# Horizontal products list

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(25)_hboLLkLi.jpg)

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 type="success">

Steps:

1. In the theme editor **(Customize)**, click **Add section**
2. Locate **Horizontal products list**
3. Make necessary changes
4. **Save**

</Hint>

## How to edit a Horizontal products list section

### General

* **Color scheme:** Pick a predefined scheme to match your site.&#x20;
  * Customize your Color schemes: [Colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors)
* **Collection:** Choose a collection you want to display.

### Section header

* **Text alignment:** Align the section header on desktop and mobile views separately.&#x20;
* **Heading & Subheading**: Add an optional subheading and title for the section.

👀 You might be interested: [Add Highlighted text to your Headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings)

* **Text**: Add description to the section header
* **Text size**: Small/ Base size/ Large/ Inherit

<Hint type="info">

* Go to **Theme settings** > [Typography](https://docs.foxecom.com/hyper-theme/theme-settings/typography) to change the store's **Base size.**&#x20;
* Select Inherit to apply your rich text editor setting for the text.

</Hint>

- **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.

![image](https://docs-assets.foxecom.app/hyper-theme/image_a9dYqlkw.png)

### Layout setting

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_S069nelc.png)

### 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**.

![image](https://docs-assets.foxecom.app/hyper-theme/image_xUjdGsYV.png)

## 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.