# 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.

{% hint style="info" %}
**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.
{% endhint %}

### Steps to Add the Banner Slider Section

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

{% stepper %}
{% step %}
**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.
{% endstep %}

{% step %}
**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.\
    \


    <figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXd7djvy1puhd6gE_INBiGmdYDszWfZoZwI7wyhFI9icuTVhmM_uVt16oqex0YoUH_Rts7hnXESZx8ucQZjYTjwEia5rCQUzfmRbO3pW_y694OEX-QANofHB0_Tku1HjlsSpBlsK?key=7_aHdMbaBNceKxuSNLyOfqDS" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**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.\


      <figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXevZfTGLJqjG7yCI-nYhDpVwfdYHxWKtz3VcRRS2mETuSkpdJKPOD78tLgKy0ou996w17o2rgS-WksNk_F-RiFSUjGliZJEg7u0BoOI9_K25i6fmi-XJ9Dhh51SRdd2uyDK9B7UMg?key=7_aHdMbaBNceKxuSNLyOfqDS" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**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.\


    <figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeT0LP6BcxRvknL_em2LZW1JKUYzqemuWdkQ073xSl5q1VMHGDT0PtZS5uvutjQzmIvBpYYvnnHjE-MOOdNu3a73woIQVbJriyNPMRl7kGd5FWX6TN1wZolPTlsXjvnpktFrPo69A?key=7_aHdMbaBNceKxuSNLyOfqDS" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**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.
{% endstep %}
{% endstepper %}
