Product Carousel Section
Last updated
Last updated
How to display products in a horizontally scrollable layout
How to customize product labels, pricing, and badges
How to adjust product spacing, typography, and colors
How to set desktop and mobile layout preferences
The Product Carousel section displays a scrollable row of featured products. It’s ideal for promoting a specific collection or highlighting bestsellers. Products can include pricing, labels (like “Sale” or “Sold Out”), and custom layout settings.
In the Shopify Theme Editor, click Add section
Choose Product Carousel
Drag and drop the section where you want it on the page
Section Title: Add a heading for the carousel (e.g., “Featured Products”)
Shop Link Text: Add a call-to-action button (e.g., “Shop All”)
Shop Link URL: Paste a collection or page link
Product Text Alignment: Align titles left, center, or right
Toggle the following options:
Show Product Titles
Show Product Prices
Show Compare at Price
Show Sold Out Badge
Show Sale Badge
Show Pre-Order Badge
💡 Tip: Enable badges to highlight discounts or stock status.
Products per Row – Desktop: Choose how many products to display (1–6)
Products per Row – Mobile: Choose between 1–3 products
Adjust font sizes independently for desktop and mobile:
Section Header
Product Title
Product Price
Optional: Toggle Bold styles for:
Section Title
View Link
Product Title
Background Color: Transparent, solid, or brand color
Section Title & Link Color
Arrow Color (navigation arrows)
Product Title Color
Product Price Color
Label colors for each badge:
Pre-Order
Sold Out
On Sale
Compare at Price
Each badge has both:
Text color
Background color
⚠️ Make sure text and background colors contrast clearly for legibility.
You can adjust spacing for better visual balance across screen sizes.
Desktop
Top spacing: 20px
Bottom spacing: 20px
Mobile
Top spacing: 16px
Bottom spacing: 16px
Additional controls:
Space Between Section Header and Products
Space Between Product Image and Info
Space Between Product Title and Price
Gap Between Products (Desktop and Mobile)
Use the Navigation Context setting to define which collection customers stay in when clicking a product.
For example:
If set to “Summer Collection,” clicking any product keeps customers browsing within that same collection.
If this is not set, clicking a product takes users to the product's standard page without collection context.
📧 Email us at: support@openspaces.design
💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website
💬 Join our community on Discord:
