Skip to main content

How to Create a List Widget

Step-by-step guide to creating a List widget for compact product displays

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

List widgets display products in a vertical stacked layout. They're ideal for sidebars, mobile views, and anywhere you need a compact recommendation section.

Step 1: Create the Widget

Create List dialog

  1. Go to Widgets in the sidebar

  2. Click Create Widget

  3. Select List as the widget type

  4. Name your widget (e.g., "Sidebar Recommendations")

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 Layout Settings

Layout Settings options

  1. Go to the Design tab

  2. Under Layout Settings:

    • Style - Choose how product information is displayed:

      • Price on the right - Product title on left, price aligned to the right

      • Price below the title - Price displayed under the product title

    • Gap - Space between items (Tight, Normal, Comfortable, Spacious)

Note: List widgets display products in a single column. The number of products shown is controlled by the Product Limit in your connected Data Rule.

Step 4: Style the Product Cards

Under Product Card Design:

Card Appearance

  • Card style - Bordered, Shadow, or Flat

  • Border color - For bordered style

  • Border radius - Corner rounding

  • Background color - Card background

  • Padding - Internal spacing

Product Information

  • Text alignment - Left, Center, or Right

  • Image aspect ratio - Square, Portrait, Landscape, or Original

  • Title - Color, font size, font weight

  • Price - Original price display, colors, sizing

  • Description - Show/hide, max lines, positioning

  • Add to Cart button - Text, colors, styling

Step 5: Add Title and Subtitle

Under Content Controls:

  1. Enter your Widget Title (e.g., "You May Also Like")

  2. Add a Subtitle if desired

  3. Set font size, color, and alignment

Step 6: Add a Timer (Optional)

List widgets support countdown timers to create urgency.

  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: Configure Display Controls

  • Quantity Picker - Let customers select quantity

  • Variant Picker - Enable for products with variants

  • Product Sorting - Order products by sales, price, date, etc.

Step 8: Set Up Discounts (Optional)

  1. Go to Settings tab

  2. Enable Apply Discount

  3. Choose discount type and value

  4. Set any quantity limits or cart thresholds

  5. Add a discount message for the cart

Step 9: Save and Publish

  1. Review in the preview panel

  2. Click Save Changes

  3. Toggle to Live

Step 10: Add to Your Store

  1. Go to Shopify theme editor

  2. Navigate to your page

  3. Add a section or block

  4. Select your List widget

  5. Save

Did this answer your question?