# Horizontal products list

<figure><img src="/files/hboLLkLiv4uyIzwO7b4a" alt=""><figcaption></figcaption></figure>

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&#x20;

* **Color scheme:** Pick a predefined scheme to match your site.&#x20;
  * Customize your Color schemes: [Colors](/hyper-theme/theme-settings/colors.md)
* **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.

:eyes: You might be interested: [Add Highlighted text to your Headings](/hyper-theme/faqs/add-highlighted-text-to-your-headings.md)

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

{% hint style="info" %}

* Go to **Theme settings** > [Typography](/hyper-theme/theme-settings/typography.md) to change the store's **Base size.**&#x20;
* 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.

<figure><img src="/files/a9dYqlkwV0cBKrRkAlrO" alt=""><figcaption></figcaption></figure>

### Layout setting

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

<figure><img src="/files/S069nelcQl2QwcwWWMpL" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/xUjdGsYVCJRu3Qk08RP2" alt=""><figcaption></figcaption></figure>

## 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?**&#x20;

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

### **Why aren’t all products from the collection showing?**&#x20;

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

### **Why is the "Show More" button not appearing?**&#x20;

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

***

<figure><img src="/files/6RW1JWuKNf9ovVFLkLXc" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/hyper-theme/theme-sections/horizontal-products-list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.