Theme Section - Collection Banners

With the Collection Banners theme section, you can promote your popular collections with attractive banners and guide customers through your store. It can let you showcase multiple collections simultaneously to pique your visitors' interest in checking out the products.

Installing the Image & Text theme section to your Shopify theme

Before going to the Shopify Theme Editor to insert this theme section, you would first need to install it first from the Vitals app.

For a complete list of instructions, you may refer to this article: How to Add a Theme Section to Your Shopify Store

Once you have successfully installed the theme section, you can now go to the Shopify Theme Editor and insert it by clicking Add section > Vitals: Collection Banners:

Customizing the Collection Banners Theme Section

Customization is simple and intuitive through Shopify’s Theme Editor:

1. Select the Section

   • In the left sidebar, click on the newly added Image & Text section.

     Adjust Settings

   • The customizable settings for the section will appear in the right sidebar.

   • You can modify the text, image, and Call-to-Action button to suit your store's branding and needs.

     Preview Your Changes

   • Use the live preview to ensure the section fits perfectly on your storefront.

You can also add multiple collections by clicking the + widget that appears when pointing over the section in the left sidebar.

Here are some of the settings that can be changed:

Collection Banners Main Theme Section:

• Design
  • Section Background - can be changed via a Color Picker (can also be transparent)
  • Desktop Content Position - lets you choose the position of the text content inside a Collection card for Desktop
  • Mobile Content Position - lets you choose the position of the text content inside a Collection card for Mobile
  • Buttons corner radius - in px
• Layout
  • Section Max Width - in percent
  • Custom Max Width (Optional) - allows you to provide a custom maximum width for the theme section. Note that high values might make this theme section go beyond the page's bounds.
• Space Between Banners - In Pixels. Specifies the distance between each banner.
• Top - bottom padding (desktop) - in px
• Top - bottom margin (desktop) - in px
• Top - bottom padding (mobile) - in px
• Top - bottom margin (mobile) - in px

Collection:

• Collection - Here you can choose which collection from your store you would like to be displayed in the Collections Banner.
• Image (optional) - This allows you to place a specific image as the background of the collection banner, one for desktop and one for mobile. If you don't designate an image here, the image of the first product in that selected collection will be used.
• Banner Settings
  • Banner Width on Desktop - Allows you to choose how much of the Collection Banner section's width you would like this collection to cover:
    • 1/4 section
    • 1/2 section
    • 3/4 section
    • Full section
  • Banner Height on Desktop
    • Small
    • Medium
    • Large
  • Overlay color - Can choose a color via a color picker
  • Overlay Opacity - in percent
• Text Settings (optional) - Change the settings in this section if you like to place text content in the banner
  • Heading - The text that will appear as a heading in the banner (if blank, will use the collection name instead)
  • Heading Size
    • Small
    • Medium
    • Large
  • Subheading - The text that will appear as a subheading in the banner.
  • Subheading Size
    • Small
    • Medium
    • Large
  • Description - The text that will appear as a description in the banner.
  • Description Size
    • Small
    • Medium
    • Large
  • Text Color - Can choose a color via color picker
• Button Settings - different settings for the button that appears inside a banner.
  • Button label - the text inside the button
  • Button link (optional) - you can enter a URL here if you would like the button to go to a specific location on your store. If blank, it will use the link that points to the assigned collection in that banner.
  • Button Style
    • Filled
    • Outline
    • Link
  • Button Background - Can Choose a color via color picker
  • Button text - Can choose a color via color picker
  • Button Border - Can choose a color via color picker
  • Add Inner Border - if enabled, will add an inner border inside the button

That's it! The Collection Banners Theme Section is a powerful way to highlight your collections and engage your customers. Start showcasing your products with eye-catching banners and drive more attention to your store today! 🚀