> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/product/featured-collection-grid-slider.md).

# Featured collection - Grid/Slider

The Featured Collection section displays products from a collection or a custom product list in a grid or slider layout. This section helps you showcase your best-selling items, new arrivals, or curated product selections directly on your homepage or other pages, making it easy for customers to discover and shop your products.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FqNXyWPgbIhl0NwlZlqSa%2FCapture%20d'%C3%A9cran%202026-02-20%20144943.png?alt=media&amp;token=1487f356-988a-4af8-bfa3-a66c1633d823" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Open **Sections** > **Featured collection - Grid/Slider.**
3. Make your changes, preview live, then click **Save**.
   {% endhint %}

### Settings

#### Content

* **Collection**: Select a collection to display products from. You can create and manage collections in your Shopify admin under Products > Collections.
* **Product list**: Alternatively, enter a custom list of specific products to display. If you add products here, the collection selection will be ignored.
* **Heading**: Enter a title for this section, such as "Best Sellers" or "New Arrivals". Leave blank to hide the heading.
* **Heading size**: Choose how large the heading appears, from XS (extra small) to 2XL (extra extra large).
* **Underline**: When enabled, adds a decorative underline beneath the heading.
* **Description**: Add custom text to describe the collection or products. You can use rich text formatting.
* **Show collection description from admin**: When enabled, displays the description you've written in the collection settings instead of the custom description above.
* **Header text position**: Controls where the heading and description appear horizontally - left, center, or right.

#### Layout

* **Product count**: Set how many products to display (between 2 and 25 products).
* **Columns**: Choose how many columns of products appear on desktop screens (1 to 6 columns).
* **Slider display**: When enabled, products scroll horizontally in a slider on desktop instead of displaying in a static grid. This is useful when you have more products than can fit in the columns.
* **Slider buttons position**: When slider display is enabled, choose whether navigation buttons appear above the cards or overlaid on the cards.
* **Show progress bar**: When enabled, displays a progress indicator to show how far through the slider you've scrolled.
* **Progress bar position**: Choose whether the progress bar appears at the top or bottom of the slider.
* **Full width**: When enabled, the section stretches across the entire width of the page instead of being contained within the standard page width.
* **Show "View all" button**: When enabled, displays a button that links to your full collection page. This only appears if your collection has more products than what's shown in this section.

{% hint style="info" %}
The “Show all” button can only be displayed if the products come from a [collection](#content).
{% endhint %}

* **"View all" style**: Choose how the "View all" button appears - as a text link, outline button, solid button, or transparent button.
* **View all button position**: Choose whether the "View all" button appears at the top or bottom of the section. This setting only works when the button style is set to "Link".
* **Color scheme**: Select a color scheme for the section background and text. Note that product card colors are controlled in your theme settings.

#### Mobile layout

* **Columns**: Choose how many columns of products appear on mobile devices (1 or 2 columns). Products will automatically scroll in a slider on mobile for better usability.
* **Show progress bar**: When enabled, displays a progress indicator on mobile devices to show how far through the slider you've scrolled.

#### Product card

* **Image ratio**: Choose the aspect ratio for product images - Landscape (wide), Portrait (tall), Square, or Tall (extra tall).
* **Vendor**: When enabled, displays the product vendor name on each product card.
* **Quick add**: When enabled, adds a quick add button to product cards that allows customers to add products to their cart without visiting the product page.
* **Quick view**: When enabled, adds a quick view button to product cards that opens a popup showing product details without leaving the current page.
* **Show swatches**: When enabled, displays color or option swatches on product cards, making it easier for customers to see available variants.
* **Product rating**: When enabled, displays product ratings on cards. Note that a ratings app is required for this feature to work.
* **Show availability**: When enabled, displays whether products are in stock or sold out on each product card.
* **Show variants**: When enabled, displays all available product variants (like sizes or colors) on each product card. If you want to show only specific variants, use the Custom product variants field below.
* **Custom product variants**: Enter the names of specific variants you want to display, separated by commas. For example: "Color, Shoe size". Leave empty to show all variants.

{% hint style="info" %}
Each variant must be connected to a metafield
{% endhint %}

* **Metafields to show**: Enter the metafield references you want to display on product cards, separated by commas. For example: `custom.material, custom.care_instructions`. Metafields must be set up in your Shopify admin first.

#### Padding

* **Top**: Adjust the spacing above the section (0 to 400 pixels).
* **Bottom**: Adjust the spacing below the section (0 to 400 pixels).

***

### Tips

* Use the Product list option when you want to showcase a specific curated selection of products rather than an entire collection.
* Enable the slider display when you have many products to show - it creates a more interactive browsing experience.
* Show swatches and variants to help customers quickly see available options without clicking through to product pages.
* Use quick add and quick view to reduce the number of page visits customers need to make, potentially increasing conversions.
* Consider your product image dimensions when choosing an image ratio - square works well for most products, while portrait or tall ratios can make fashion items stand out.