User Guide

Search limit to:






Image carousel #1 - #2 - #3

by Admin on Oct 21, 2025

Image carousel section allows visitors to effortlessly browse through a curated selection of images with an engaging carousel effect. It's ideal for showcasing product details, lifestyle shots, or portfolios. 

1. Section Components

Section Image carousel Display a series of images with a carousel effect.
Available block Image Add and set up an individual image.

2. Location & Setup

To add & set up the Image carousel section:

  • Open the Shopify Theme Editor (Online store > Themes > Customize)
  • Decide where you want to place the new section.
  • Click “Add Section”.
  • Select “OT: Image carousel (#number of variant)”.

3. Highlight Features

  • Flexible image styling: Adjust image ratio and corner radius to create a refined, balanced look.
  • Interactive hover effect: Control image overlay opacity and color to highlight content when users hover over images.
  • Consistent visual experience: Fine-tune the overlay and hover settings to maintain visual harmony and enhance user engagement.

4. Common Use Cases

🤔 How to set up the Image carousel section?

Here's how to set up the section:

STEP 1: Add the Image carousel section to your desired location

STEP 2: Set up Image blocks

Click on the Image block to open its settings panel and customize these:

  • Add Image and Image link for further redirection.
  • Enter text content to show on the image:
    • Sub-title content. You can also make further customizations (text font, size or letter spacing) by enable Custom sub-title.
    • Title of the image.
    • Text for further description/promotional message. Note that the text only displays on desktop devices when hovering the image.
  • Add icon to show on the image. You can use an image as a custom icon.

STEP 3: Customize the Image carousel section look

    Click on the Image carousel section to open its settings panel:

    • Enter the Heading for the section. Wrap some text in [...] to highlight it.
    • Enter Description and choose Content alignment.

    STEP 4: Click “Save” when done.

    🤔 How to add a background to the Image carousel section?

    Want to add section background? Here's how:

    STEP 1: Click on the Image carousel section to open its settings panel. 

    STEP 2: Customize the background

    At Section layout settings group, you have options to set image/color as the background:

     Background: Image  Background: Color
    Upload an Image to use as background. Choose a Color or Gradient color to use as background.

    STEP 4: Click “Save” when done.

    🤔 How to adjust the section carousel look? 

    Here's how to style the section carousel look:

    STEP 1: Click on the Image carousel section to open its settings panel. Scroll to Carousel settings group to start editing.

    STEP 2: Style the image display

    • Choose Image ratio.
    • Adjust corner for the images.
    • Choose carousel layout to display:
     Focus Standard Gray out
    • Set Opacity and Opacity color to control the transparency of the image overlay and set the base overlay tone.
    • Adjust Opacity hovering (e.g., 32%) and Opacity hovering color to define how transparent the overlay becomes when hovering over an image.

    STEP 4: Customize navigation button

    • Toggle Enable navigation button to display navigation arrows (desktop only).
    • Adjust colors for navigation button and icon.
    • Modify the button size.

    STEP 5: Click “Save” when done.

    🤔 How to make advanced customizations to the Image carousel section? 

    Want to style the typography, color, or desktop/mobile layout of the section? Here's how:

    STEP 1: Click on the Image carousel section to open its settings panel.

    STEP 2: Customize the text typography 

    At Typography settings group, you can:

    • Choose the font for heading and description text.
    • Adjust the text size on desktop and mobile.

    STEP 3: Customize the text overlay

    At Text overlay settings group, you can style the text on the images:

    • Choose the font for title and text. Adjust the font size separately for desktop and mobile.
    • Adjust the size of the milestone, title and text.
    • Choose Image content alignment and Image content position.

    STEP 4: Customize Desktop/Mobile layout

    At Desktop/Mobile layout settings group, you can:

    • Select the Number of columns to display.
    • Adjust content width, section width and padding.

    STEP 5: Customize colors

    At Color settings group, choose colors for section elements such as section text, heading,...

    STEP 6: Click “Save” when done.

    5. Layout Recommendations

    The Image carousel section has 3 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us!

    📂 Image carousel #1

    Check out demo here.

    📂  Image carousel #2

    Check out demo here.

    📂  Image carousel #3

    Check out demo here.

    6. Layout Recommendations

    Need help? Contact our support team at  Omni Themes Support .