What is the Hero collections section?
The Hero collections section showcases two collections side by side in a bold, eye catching layout. In Beautify, additional customization options include an inset image, animated text, a main image, supporting text and a button. This eye catching design grabs attention and provides another opportunity to showcase standout product imagery.
How to set up the Hero collections section
Steps
- Open the Theme Editor and add the Hero collections section.
- The two Collection blocks permitted are already present on install.
- In the main section Images settings, choose the Image shape.
- In the main section Style settings select a Color scheme. Select the Section background which can be a color, image or gradient. This background will be visible if a transparent background color is selected in the block settings.
- In the Collection block settings, select a Collection, an optional Image and use the slider to choose the Image width.
- Select an optional Inset image - this will appear at the side of the main image on hover for desktop or always on mobile. Use the Image inset width slider to adjust the size.
- In the Content settings, Beautify will automatically take the Title and Description from each collection set in the Shopify admin area. To override this, insert some text in to the Title and Description fields.
- Insert an optional button. The button will show underneath the text. Select Display inline button to show the button next to the collection title. This is only available on larger screen sizes.
- In addition, the Title can also appear as a scrolling element behind the main image. Select the Show animated title on hover setting to do this.
FAQs
How do I get my Section background color to show?
The Section background color setting is located in the main section settings. In each block there are two other color settings - Background color and Hover background color. To show the Section background set to transparent or partially transparent
How do I make the Images have curved corners?
Go to Theme settings > Design > General > Card radius. Note that changing the setting here will impact the whole of the theme.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us