Horizontal products list 🔥

Display your top-selling or featured items in a clean, scroll-friendly product list

The Horizontal products list section showcases a product collection in a clean, horizontal layout. Great for promotions like "Trending This Week" or "Staff Picks", this section allows customers to browse featured items from a selected collection without leaving the page.

How to add a Horizontal products list section to your Shopify store

Steps:

1. In the theme editor (Customize), click Add section

2. Locate Horizontal products list

3. Make necessary changes

4. Save

How to edit a Horizontal products list section

General

• Color scheme: Pick a predefined scheme to match your site.

  • Customize your Color schemes: Colors

• Collection: Choose a collection you want to display.

Section header

• Text alignment: Align the section header on desktop and mobile views separately.

• Heading & Subheading: Add an optional subheading and title for the section.

👀 You might be interested: Add Highlighted text to your Headings

• Text: Add description to the section header

• Text size: Small/ Base size/ Large/ Inherit

• Go to Theme settings > Typography to change the store's Base size.

• Select Inherit to apply your rich text editor setting for the text.

• Button settings:

  • Button label: Text shown on the call-to-action button.

  • Button link: Choose where the button leads (usually a collection or product page).

  • Button style: Choose between Plain or Solid styles.

  • Button icon: Choose an icon shown after the button label.

Layout setting

• Limit height: Set a pixel height limit before the section collapses behind a "Show More" button for desktop view.

Grid settings

• Maximum products to show: Control how many products are displayed.

• Number of columns in desktop: Choose how many product cards appear per row.

• Column & Row gap: Adjust spacing between products.

Mobile layout

• Limit height: Set a pixel height limit before the section collapses behind a 'Show more' button for mobile view.

Best practices

✅ Keep button CTA clear: "Shop All", "View More", etc.

✅ Limit product count for a smoother scroll experience.

FAQs

Can I link the button to a specific product or custom page?

👉 Yes, you can link to any URL or Shopify page using the Button link field.

Why aren’t all products from the collection showing?

👉 Check the "Maximum products to show" setting. It may be limiting your display.

Why is the "Show More" button not appearing?

👉 It only appears if the content height exceeds the set Limit height for desktop or mobile.