Skip to main content

How to Create a Carousel Widget

Step-by-step guide to creating a Carousel widget with horizontal scrolling

Tom Nipravsky avatar
Written by Tom Nipravsky
Updated over a month ago

Carousel widgets display products in a horizontal scrollable row. Customers can swipe on mobile or scroll to browse more products. They're perfect for saving vertical space while still showing many products.

Step 1: Create the Widget

Create Carousel dialog

  1. Go to Widgets in the sidebar

  2. Click Create Widget

  3. Select Carousel as the widget type

  4. Give your widget a name (e.g., "New Arrivals Carousel")

Step 2: Connect a Data Rule

Data Rules settings options

  1. Go to the Settings tab

  2. Under Connected Data Rules, select an existing data rule from the dropdown

  3. Set the Product Limit (maximum number of products to display)

  4. Click Save

Note: Data Rules are created and configured separately in the Data Rules section. If you don't have any data rules yet, create one first.

Important: Widgets without a connected Data Rule will not be displayed on your storefront.

Step 3: Configure the Layout

Layout Settings options

  1. Go to the Design tab

  2. Under Layout Settings, configure:

    • Desktop columns - How many products visible at once on desktop (1-6)

    • Tablet columns - Products visible on tablet (1-4)

    • Mobile columns - Products visible on mobile (1-2)

    • Gap - Spacing between products (Tight, Normal, Comfortable, Spacious)

Example setup:

  • Desktop: 4 columns

  • Tablet: 2 columns

  • Mobile: 1 column

  • Gap: Normal

Step 4: Style the Product Cards

Under Product Card Design, customize how each product looks:

Card Appearance

  • Card style - Bordered, shadow, or flat

  • Border radius - Corner rounding (None to Rounded)

  • Background color - Card background

  • Padding - Space inside the card

Product Image

  • Aspect ratio - Square (1:1), Portrait (3:4), Landscape (4:3), or Original

Product Title

  • Text color - Custom color for titles

  • Font size - Small (12px) to Extra Large (18px)

  • Font weight - Light (100) to Bold (900)

Product Price

  • Show original price - Display strikethrough price if discounted

  • Price color - Color for current and original prices

  • Font size and weight - Match your design

Add to Cart Button

  • Button text - Custom text (e.g., "Add to Cart", "Quick Add")

  • Button color - Background color

  • Text color - Button text color

Step 5: Add Title and Subtitle

Under Content Controls:

  1. Widget Title

    • Enter your title (e.g., "Trending Now")

    • Set font size, color, and alignment

  2. Widget Subtitle (optional)

    • Add supporting text (e.g., "Products our customers love")

    • Toggle show/hide as needed

Step 6: Add a Timer (Optional)

Create urgency with a countdown timer.

  1. Enable Timer

  2. Set duration (days, hours, minutes, seconds)

  3. Choose timer position (above or below title)

  4. Configure expiration action:

    • Do nothing

    • Remove widget

    • Remove discount only

  5. Style the timer (size, colors)

Step 7: Set Up Discounts (Optional)

  1. Go to Settings tab

  2. Enable Apply Discount

  3. Configure:

    • Discount type (percentage or fixed)

    • Discount value

    • Quantity limits

    • Cart thresholds

Step 8: Save and Publish

  1. Preview your carousel in the right panel

  2. Click Save Changes

  3. Toggle status to Live

  4. Copy the Widget ID

Step 9: Add to Your Store

  1. Go to Shopify Admin > Online Store > Themes > Customize

  2. Navigate to your desired page

  3. Click Add section or Add block

  4. Select Triom from the Apps list

  5. Paste your Widget ID

  6. Save

Did this answer your question?