Try Hyper freeContact support

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.

Last updated