Banner Slider

The Banner Slider section in your theme offers a powerful way to showcase key content with customizable banners. Each banner is designed to be fully responsive and configurable, making it ideal for promotions, announcements, or storytelling.

Key Features

1. Customizable Banners Merchants can add multiple banners to the slider, each with its own settings. Every banner block includes options for media, text, buttons, and layout configurations.

2. Responsive Media Options

   1. Desktop Images: Upload high-resolution images for larger screens.

   2. Mobile Images or Videos: Optimize your banners for mobile by adding dedicated images or videos for smaller screens.

3. Text and Button Configuration

   1. Add headings, subheadings, and buttons to your banners.

   2. Buttons can be linked to specific pages, collections, or products and styled to align with your theme.

4. Content Positioning Merchants can choose where the content (text, buttons, etc.) is displayed on the banner. Position options include:

   1. Top

   2. Bottom

   3. Left

   4. Right

   5. Center

   6. Left-Center

   7. Right-Center

5. Color Scheme and Styling Each banner block can have its own unique color scheme, allowing merchants to align the design with their brand or specific campaign.

6. Video Integration For a dynamic experience, merchants can include videos in their banners. Videos can either replace or complement images, creating a more interactive experience.

7. Slider Settings

   1. Navigation Options: Enable arrows or dot indicators for manual navigation.

   2. Overlay and Readability Merchants can add transparent overlays to improve the readability of text on top of images or videos.

Use Case Scenarios

• Promotional Campaigns: Highlight ongoing sales or limited-time offers with visually striking banners.

• Storytelling: Use text and media to convey your brand’s story in a compelling way.

• Product Features: Showcase specific products with tailored banners that provide detailed information and a call-to-action.

Steps to Add the Banner Slider Section

Follow these simple steps to add and customize the Banner Slider section to your Shopify store:

1

Access the Theme Editor

• Go to your Shopify Admin.

• Navigate to Online Store > Themes.

• Click on Customize for the theme you want to edit. This will open the Shopify Theme Editor.

2

Add the Banner Slider Section

• In the Theme Editor, locate the sidebar on the left-hand side.

• Click Add Section.

• Search for Banner Slider in the section list.

• Click on Banner Slider to add it to your page.

• The section will now appear on your page. You can drag and drop it to position it where you want it to appear.

  

3

Customize the Banner Slider Settings

• Click on the Banner Slider section in the sidebar to open its settings.

• Configure the global slider settings:

  • Enable or disable autoplay.

  • Set autoplay speed.

  • Choose whether to show navigation arrows and/or dot indicators.

  • Decide if the slider should loop after the last banner.

    

4

Add and Configure Banner Blocks

• Inside the Banner Slider section, click Add Block to add a new banner.

• Customize each banner block with the following options:

  • Media

    • Upload a desktop image.

    • Add a separate mobile-optimized image or video.

  • Text

    • Add a heading and subheading.

    • Style the text with custom font sizes, colors, or alignment.

  • Buttons

    • Add call-to-action buttons with links to specific pages or collections.

    • Customize button colors and text.

  • Content Position

    • Select where the content will appear (e.g., Top, Bottom, Center, etc.).

  • Color Scheme

    • Choose a unique color scheme for each banner block.

• Repeat the process to add more banner blocks.

  

5

Save Your Changes

• After configuring your banner slider, click Save in the Theme Editor.

• Preview your changes on both desktop and mobile to ensure the banners look as intended.