1. What is a collection list banner?
Typically displayed prominently on the homepage or a dedicated landing page, the Collection List Banner provides an organized and visually appealing way for users to browse through different product categories or collections.
This section serves as a navigational aid, helping users quickly find and access the products they are interested in. It also helps to highlight featured or seasonal collections, promote new arrivals, or showcase best-selling categories.
2. Use section as the page hero
"Hero" refers to the prominent section at the top of a webpage, often used to grab the visitor's attention and deliver key messages or visuals. By enabling the "Use as hero" configuration in the slideshow settings, you can designate the slideshow to serve as the hero section on a page. This allows you to leverage the dynamic and visually engaging nature of a slideshow to create an impactful introduction to the page content.
Keep in mind that images used in the hero section won't be lazy-loaded, with the aim of preventing an increase in page load times and minimizing any negative impact on user experience (UX), so it's best to limit having only one hero section per page to avoid impacting performance.
3. How to set up each collection banner?
You can add up to six banners for this section, each configured with its own collection, title, image or video, text content, button, and visual styles. This allows for a dynamic and visually engaging presentation of multiple collections or promotional content within the section.
Here's a brief overview of the configuration options for each block:
- Choose the collection to feature in the banner.
- Enter a custom title for the banner. If there's no custom title provided, it will use the selected collection's name.
- Select the heading tag for this section to enhance the SEO of the page.
- You can upload or explore free images for the banner, including separate options for mobile devices. Choose a video hosted on Shopify or embed one from a URL (supports YouTube and Vimeo).
- Locate the “Show sound control” checkbox. Check the box to enable the sound control feature. By default, this checkbox is set to false. Once enabled, an icon will appear on the storefront, allowing customers to toggle sound on or off as needed.
- You can add a subheading and main heading for the banner, adjusting the size and HTML tag for the heading. Select the heading tag for this section to enhance the SEO of the page.
- Additionally, you can include extra text content for the banner, with the option to use the collection description.
- Enter the label and link for the button, with the option to display the button as the primary style.
- Choose the position of the banner. (Custom Horizontal Position & Custom Vertical Position are only used with custom positions)
- Set the alignment of the content (left, center, right).
- Choose the color for text and button shown on the banners.
4. How to customize the animation and styles of the banner?
To customize the animation and styles of the slideshow, follow these steps:
- Enable autoplay and adjust the timing for changing slides. You can typically set the duration to change banners every 5 to 10 seconds.
- Choose the pagination style that best fits your design. Options may include none, dots, or bars for indicating banner progress.
- Select the transition style for banner changes. Common options include slide or fade effects.
- If desired, enable the parallax effect. This adds depth to the banner by moving background images at a slower rate than foreground content: Theme settings => Design => Enable “Disable parallax effect". By disabling this configuration, you effectively enable the parallax effect for the banner.
- Adjust the height of each banner to ensure it displays optimally within your web page layout.
- Customize the padding around the banner to control its spacing within the page content.
