Table Of Contents
WooCommerce Storefront Parallax Hero extension allows you to add a hero component to the homepage template of your Storefront powered web site. You can upload a background image (and set it to parallax scroll) and tweak other appearance settings using the WordPress Customizer.
Installation for WooCommerce Storefront Parallax Hero
- 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.
Also, get WooCommerce Storefront Mega Menus
Usage for WooCommerce Storefront Parallax Hero
The Storefront Parallax Hero extension adds all of its settings to the WordPress Customizer, making it straightforward to use. Upon opening the Customizer, you will notice a new top-level section called the Parallax Hero.
Inside of this section are three sub-sections: Content, Background and Layout. There are some settings that we’ll review in detail.
Background colour
Choose a background colour for the hero component. If a background image is set, you won’t be able to see the background colour.
Background size
Suggested media size: 1920 (wide) by 2560 (length) pixels. Please note that 2560 x 1920 will result in the Media Uploader asking you to crop the image.
Choose from two options: Default or Cover. A default will work best when you’re using a repeat tiling background. The cover will work best when you’re using a large image. To learn more, see CSS background-size property.
Parallax for WooCommerce Storefront Parallax Hero
Toggle the parallax effect applied to the background image. If no background image is set, this setting does nothing.
Parallax scroll speed
This setting affects the ratio at which the parallax background scrolls relative to the default scroll speed. For example, A 25% setting means the background will scroll at a quarter of the speed and 50% means it will scroll at half speed.
Hero layout
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.
