To add a Hero section (or slideshow), click “Add section” in the main sidebar on the left. Then customize the layout using its setting sidebar. The section’s setting sidebar may be located on the right side of your screen if you're using a large display. You can delete the section by clicking “Remove section” at the bottom.
The general look and feel of your section is customizable from the section settings sidebar. The content of your section is created by adding blocks in the main sidebar on the left. Adding more than one block will automatically generate slides. By default the section has two blocks. Delete blocks and keep only one if you want to use the section without slides. Each of those blocks can be customized using their own setting sidebar, which may be located on the right side of your screen if you're using a large display. Remember that blocks can be reordered using drag and drop in the sidebar, and deleted by clicking “Remove block” at the bottom of each block’s setting sidebar.
Styling pro tips
- Enabling the image offset will make your layout more dynamic, and will give the image more emphasis and create visual impact. Interesting results can be obtained with transparent PNG images.
- Image cropping can sometimes create unwanted results. Especially in a slideshow because every slide must keep the same height to prevent layout “jumps”. If cropping is a problem with your assets, one option that can be useful is the “Adapt to first image” slide height option.
Remember that slides with lots of text have the opposite effect on your customers: they tend to ignore them altogether. Maintaining the same text across slides and applying the slide animation to the image only can be a good way to create visual impact without impoverishing the user experience. You can find an example of that on the demo store here.
