Storefront Product Hero

The Storefront Product Hero extension allows you to add a hero component to the homepage template of your Storefront powered web site, or anywhere else via shortcode. You can upload a background image (and set it to parallax scroll) and tweak other appearance settings using the WordPress Customizer.

Download the plugin Changelog

Installation

  • Unzip and upload the plugin’s folder to your /wp-content/plugins/ directory
  • Activate the extension through the ‘Plugins’ menu in WordPress
  • Enter the WordPress Customizer to begin using the plugin.

For more information on installing and managing plugins see here

Usage

The Storefront Product Hero extension adds all of it’s settings to the WordPress Customizer making it very easy to use. Upon entering the Customizer you will notice a new top level section titled Product Hero.

Inside of this section are several settings which we’ll overview in detail:

Featured product ↑ Back to top

Select a product to feature in the product hero. The list of selectable products is the products that are currently marked as featured at your store. This is to avoid loading your entire product list in the Customizer. Be sure that the product you want to display in your product hero is marked as featured or it wont be selectable here. Likewise, if you don’t have any featured products then the setting wont appear at all.

Content layout ↑ Back to top

Choose how to layout the content of your product hero. You can centrally align everything, or place content/image adjacently then flip them so that the content is on the left and the image on the right, and vice versa.

Hero width ↑ Back to top

Specify a fixed, or full width layout for the hero component. Fixed width means it will match the rest of the content on the page in width, full width means it will span the full browser width.

Full height ↑ Back to top

When enabled the product hero will intelligently resize the fill the browser window on page load. This effect will only work if it appears quite high up in your content and is not generally recommended when using the product hero in post/page content unless it’s a full-width page.

Product image ↑ Back to top

Toggle the display of the product featured image.

Product price ↑ Back to top

Toggle the display of the product price.

Product rating ↑ Back to top

Toggle the display of the product rating. This will only display if the product has been reviewed.

Background Color ↑ Back to top

Specify a background color for the hero component. Note: If a background image is set you won’t be able to see the background color.

Overlay color ↑ Back to top

Choose a color for the overlay on top of the main background color / image.

Overlay opacity ↑ Back to top

Specify the overlay opacity. Set it to 0 to hide the overlay entirely. This setting is useful if you’re using a visually noisy background image and finding the text in your hero component difficult to read.

Background Image ↑ Back to top

Upload a background image for the hero component.

Background Size ↑ Back to top

Choose from two options; “Auto” (Default) or “Cover”. Auto will work best when you’re using a tiling repeated background. Cover will work best when you’re using a large image. You can read more about the css background-size property here.

Parallax ↑ Back to top

Toggle the parallax effect applied to the background image. If no background image is set this setting does nothing.

Parallax scroll speed ↑ Back to top

This setting affects the ratio at which the parallax background scrolls, relative the default scroll speed. IE 25% means the background will scroll at a quarter of the speed while 50% means it will scroll at half speed.

Heading text ↑ Back to top

Specify the text to be displayed in the hero component header.

Heading text color ↑ Back to top

Choose a color for the heading text.

Description text ↑ Back to top

Specify the text to be displayed in the hero component content area. The output is run through wp_kses_post which means you can insert HTML.

Description text color ↑ Back to top

Choose a color for the description text.

Shortcode

You can add the product hero component to any page using the [product_hero] shortcode. You can pass the following attributes to the shortcode to create custom hero compontents, but please note that features like Full Height and the Full Width Layout are not best suited to all pages and should generally be set to false (0).

'product_id'
'heading_text'              
'heading_text_color'        
'description_text'          
'description_text_color'    
'background_img'            
'background_color'          
'background_size'                       
'alignment'                 
'layout' 
'width'                 
'parallax'                  
'parallax_scroll'           
'overlay_color'             
'overlay_opacity'           
'full_height'               
'style'                     
'overlay_style'
'product_img'
'product_price'
'product_rating'                

Note that valid arguments for the ‘layout’ attribute are ‘left’, ‘right’ or ‘center’ and this affects the product hero content. The valid arguments for the ‘width’ attribute are ‘full’ or ‘fixed’ and this affects the overall product hero width. The ‘full’ width option will only work on pages that use the “Full width” page template.

So a full shortcode could look like:


[product_hero layout="center" background_img="https://unsplash.imgix.net/1/irish-hands.jpg?q=75&fm=jpg&s=0b8bb73125fe1ec4828d0048550ae2bd" width="full" full_height="0" background_size="cover" overlay_opacity="0.25" product_id="299" parallax="0" description_text_color="#eeeeee"]

Which would create something like this:

The product hero inserted into a post.
The product hero inserted into a post.

Note that style and overlay_style attributes allow you to add custom CSS to your component. Any attributes added to the shortcode will over-rule settings specified in the Customizer so if you include no attributes at all (eg [product_hero]) the output hero component will simply use all the settings specified in the Customizer.

FAQ

No Settings In The Customizer ↑ Back to top

Front Page Setting

If there are no settings displaying in the WordPress customizer for Product Hero you may not yet have the default Storefront Homepage Template configured and set as the front page of your WordPress site as the Product Hero Customizer settings will only display if you have this page template set as the frontpage of your site.

The Storefront documentation referenced below explains how to setup the homepage template and set that as the frontpage of your site.

StoreFront Documentation: Setup Homepage Template

If you are not using the default Storefront homepage template as the front page of your site you will then need to add and configure the Product Hero element via it’s shortcode to the page you are using.

Store Page Setting

In order for the Product Hero settings to be displayed, your Home page must not be the same as your Store page.
shop-page-settings

How do I create the layered effect as seen on the product listing page? ↑ Back to top

Screen Shot 2015-01-30 at 15.44.12

To create this look you simply need to ensure that the featured image of the product showcased in your hero component has a transparent background.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top