1. Purpose
Displays images and promotional content in a continuously scrolling loop. Suitable for featured collections, campaigns, brand visuals, and announcements.
2. Common use cases
Homepage
Promotional campaigns
Featured collections
Brand showcase
Announcement content
3. How to add
Shopify Admin → Online Store → Themes → Customize → Add section → Infinite loop slider
4. Main blocks
Image: Adds desktop and mobile images with an optional link.
Heading: Adds the main title.
Text: Adds supporting content.
Button: Adds a call-to-action.
Spacer: Adjusts spacing between blocks.
5. Key settings
5.1. Image block
Setting | Description |
|---|---|
Image | Uploads the main image. |
Mobile image | Uploads a separate image for mobile. |
Link image | Makes the image clickable. |
Open in new tab | Opens the image link in another browser tab. |
5.2. Slider layout
Setting | Description |
|---|---|
Image height | Selects Min height, Adapt to image, or Adapt to first image. |
Min height | Sets a custom desktop height. |
Mobile image height | Controls image height behavior on mobile. |
Mobile min height | Sets a custom mobile height. |
Enable background content | Adds a background behind the slide content. |
Color scheme | Controls the section colors. |
Items per row | Sets visible items on desktop, tablet, and mobile. |
5.3. Marquee settings
Setting | Description |
|---|---|
Speed | Controls how fast the slider moves. |
Direction | Sets movement from left to right or right to left. |
Pause when hover | Stops the slider while customers hover over it. |
5.4. Content position
Setting | Description |
|---|---|
Content position | Positions content at the top, center, or bottom on desktop and mobile. |
Content alignment | Aligns content left, center, or right on desktop and mobile. |
5.5. Section spacing
Setting | Description |
|---|---|
Top padding | Adjusts spacing above the section. |
Bottom padding | Adjusts spacing below the section. |
Rate padding (mobile) | Controls responsive spacing on mobile. |
6. Best practices
Use images with consistent dimensions.
Upload a separate mobile image when needed.
Keep text and buttons short.
Use a moderate scrolling speed.
Enable pause on hover when items contain links or buttons.
Avoid showing too many items at once on mobile.
7. Common issues
Issue | Solution |
|---|---|
Images are cropped | Use Adapt to image or adjust Min height. |
Mobile image is missing | Upload a Mobile image or use the desktop image as fallback. |
Slider moves too quickly | Increase the Speed value. |
Slider does not pause | Enable Pause when hover. |
Image link does not work | Add a valid Link image URL. |
Content is difficult to read | Enable background content or adjust the color scheme. |
