# Horizontal products 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 {% hint style="success" %} Steps: 1. In the theme editor **(Customize)**, click **Add section** 2. Locate **Horizontal products list** 3. Make necessary changes 4. **Save** {% endhint %} ## How to edit a Horizontal products list section ### General * **Color scheme:** Pick a predefined scheme to match your site. * Customize your Color schemes: [colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors "mention") * **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. :eyes: You might be interested: [add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention") * **Text**: Add description to the section header * **Text size**: Small/ Base size/ Large/ Inherit {% hint style="info" %} * Go to **Theme settings** > [typography](https://docs.foxecom.com/hyper-theme/theme-settings/typography "mention") to change the store's **Base size.** * Select Inherit to apply your rich text editor setting for the text. {% endhint %} - **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. ***