What is the banner section?
The banner is a fixed section and can only appear at the top of the homepage. It offers a split layout with a slideshow and an image with text overlay. On larger screens, the companion content is shown the right of the banner, while on mobile, it is placed beneath the slideshow. This section, which merges dynamic and static marketing elements, is a smart, space-saving choice for homepage layouts.
How to show the banner and companion content
The banner section is a fixed section. It is specifically designed to be used as the first section on the homepage and can only be shown in this position. If a sidebar is used, the banner will appear above the sidebar. Within the settings, use the setting Show banner to enable the section. The companion content is optional and controlled by two settings Show companion content on larger screens and Show companion content on smaller screens.
How to set up the banner slideshow
Steps
- Open the Theme Editor and view the homepage. Click on the fixed Banner section and enable the setting Show banner.
- Click Add Slide or use one of the Banner blocks that are present upon install to add more slides.
- In the banner slideshow Layout settings, there are two Banner size settings available.
Adapt to first slide: All images will be the same height as the first image.
Fixed height: The slider can be used to select a specific px height for both desktop and mobile.
- The Show slideshow text below image on mobile can be selected to differentiate the viewing experience for mobile users.
- There are three Overlay style options to choose from. Once this is selected for the section, additional settings can be customised in each slide block.
- Adjust the Transition and decide whether to Auto-rotate slides.
- In each Slide block, add an Image and Slide link if desired. Links can also be added to individual buttons.
- If the Full image or Text box overlay style is selected in the section settings, the Overlay color can be chosen, and the Overlay opacity adjusted using the slider in each slide block. These settings are not applicable to the No background style.
- A Text color can be selected in each block. This will change the color of the Subheading, Heading and Text fields.
- To change the button colors, go to Theme settings > Colors > Buttons > Over image button text and Over image button background. Note that any changes made to these settings will apply throughout the store.
- There are nine different Text alignment options available to adjust the text and button position.
How to set up the banner companion content
The companion content can be shown on desktop or mobile or on both. Keep it simple with just an image and a single link, or alternatively add up to three sets of overlay text with individual links.
On larger screens the companion content is shown to the right of the banner slideshow and the overlay text is vertically stacked. On mobile the layout is a little different, the image will be shown under the banner slideshow and the text overlay will cycle, showing up to three messages, one at a time.
Steps
- Open the Theme Editor and view the homepage. Click on the fixed Banner section and enable the setting Show banner.
- In the banner slideshow Layout settings, choose whether the companion content should appear on desktop, mobile or both using the settings Show companion content on larger screens and Show companion content on smaller screens. To ensure it fits nicely, the overlay text will be vertically stacked on larger screens and shown in a carousel on mobile.
- Use the setting Show space between companion and slideshow to adjust the layout.
- Add an Image, set an Overlay color and adjust the Overlay opacity if required. If the companion content has no additional overlay text then a link can also be added to the image. This image link will only be active when there is no overlay text.
- Set the Text color.
- Set the text Alignment to be used on larger screens. The text will be center aligned on mobile.
- Add a Heading, Subheading and Link for up to three messages. Links in the overlay text will take precedence over a link on the underlying image.
FAQs
How does the Banner section differ from the Slideshow section?
The Slideshow section can be positioned in any location on any page. The Banner section is a fixed section that can only be positioned at the top of the homepage. The banner section contains a slideshow but also includes the additional option of Companion content.
Can I use this section with a sidebar?
No, this Banner section will appear above the sidebar at the top of the homepage. For a slideshow next to the sidebar, use the Slideshow section and select Show sidebar in the Sidebar fixed section.
My slideshow image contains text, how do I ensure it is not cropped?
We recommend using the text overlay settings for slideshow text to ensure it is always easy to read on different screen sizes, but we recognise on some occasions text may be part of the image. To ensure the full image is shown, set the Banner size to be Adapt to first image and ensure all the images are the same size. Slide headings, subheadings, buttons and text can be removed for each slide in the slideshow block settings. Do not select Show text below image on mobile as space will be reserved for text.
Why is my image being cropped?
By it's nature, a slideshow contains several different images, all of which are shown in the same sized space. You may find that you can set up your slideshow such that the first image displays perfectly, but if subsequent images have different dimensions - parts of the images will be cropped.
This is best illustrated below:
The best chance to avoid this is to set the Banner size to the Adapt to first image, and then make all images within the slideshow the same dimension.
To read more about aspect ratios, refer to the Shopify Understanding image aspect ratio guide.
Focal points may also affect image cropping. Focal points allow you to choose the part of the image which should remain in view, no matter what the screen size. This means that parts of the image may be cropped to ensure that the focal point remains visible. Read Shopify's Focal points guide for more on this.
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