Slideshow

Slideshow

On Azzel theme's homepage, the slideshow is often the first thing visitors see, making it a prime opportunity to showcase key products, promotions, and brand messaging. This Slideshow Section provides a visually engaging and customizable way to create an impactful first impression.

Adding Slide Items

Step 1: Go to Shopify Theme Editor
Step 2: Under the Slideshow section, click "Add slide item."

Step 3: You can customize each slide item as follows:
  1. Color Scheme: Choose a color scheme for this specific slide.
  2. Image*:
    1. Desktop Image: Select an image for the desktop version of the slide. 
    2. Mobile Image: Select an image for the mobile version of the slide.
*Use a 16:9 aspect ratio (width:height) for desktop images and a 3:4 aspect ratio for mobile images.
  1. Link:
    1. Link: Insert link so customers can navigate to there
    2. Open this link in a new window: Enable or disable to have the product open in another tab.
  2. Information:
    1. Heading: Insert the heading text for this slide.
    2. Short Description: Insert a brief description for this slide.
    3. Button Label: Enter the button label for this slide.

Configuration Options

  1. On the theme customization page, click the first icon to access section settings.
  2. Click "Slideshow" on the setting bar, or click directly on the Slideshow display on the page.


  1. Configure the section header
    1. Heading: Enter the main heading text for the section (e.g., "Why Choose Us"). This is the primary title that will appear at the top of the badges section.
    2. Heading Size: Select a heading size ("Small," "Medium," or "Large").
    3. Sub-Heading: Enter a sub-heading text.
    4. Description: Enter a section description.
    5. Alignment: Choose the text alignment ("Default" or "Center").
  1. Configure the section body
    1. Enable/Disable Options:
      1. Make slideshow full screen: Enable to display the slideshow across the entire width of the screen.
      2. Show scroll button: Enable to display pointing arrow or other visual cue at the bottom of the slideshow, encouraging visitors to scroll down the page and explore more content. Disable to hide this visual cue.
      3. Auto play: Enable to automatically advance the slideshow to the next slide. Disable to require manual navigation.
      4. Loop: Enable to have the slideshow automatically return to the first slide after reaching the end. Disable to stop at the last slide.
    2. Effect: Choose the transition effect: Slide / Fade / Cube / Flip
  1. Configure the section layout
    1. Color Scheme: Choose a color scheme for this section.
    2. Background image: Choose a background image for the section (if desired).
    3. Section Full Width: Toggle this setting to make the section span the full width of the screen. If disabled, customize the size at "Section max width."
    4. Content Full Width: Toggle this setting to make the content within the section span its full width. If disabled, customize the size at "Content max width."
    5. Padding and Margin: Adjust the padding and margin for the section on mobile, desktop, and tablet screens to control spacing.
  2. Configure the section optimize
    1. Lazy Load Speed: The section will only load when it is scrolled to on the page, improving initial page load times.

    • Related Articles

    • Gallery Slider

      The Gallery Slider section, typically located on the homepage, displays a series of images and accompanying text in a slideshow format. It's a visually engaging way to showcase products, promotions, or other key information. Accessing Gallery Slider ...

    • Home Page

      Understanding Sections and Blocks Sections are the building blocks of your store's layout in Shopify, providing a flexible way to arrange content on each of your store's pages. Accessible from the left-side menu in the Theme Editor, sections are made ...

    • Menu Setting

      Optimize your store’s navigation with Tapita’s advanced menu options, including a customizable multi-column dropdown (mega menu). This guide provides step-by-step instructions for creating and configuring menus to enhance the user experience. ...

    • Azzel Theme Setting

      On the customization page, click on the second icon to access the theme settings. Now, let’s explore each component in the theme settings one by one! Color With the Colors setting, you can create and customize unique color palettes for different ...