> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Shine Featured Collection

**Theme:** Shine · **Section type:** All-template section

A Featured collection section shows products from one collection in a grid or a carousel. Use it to put a seasonal edit, best sellers, or new arrivals on any page, and let customers add products to the cart from the product cards.

> **Note:** You can add this section to any template. It isn't available in the header or footer. The section comes with 1 Collection image block, and it holds only 1.
![Featured collection section on a Shine storefront](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-featured-collection-1_sdlpuq.jpg)

**What you can do**
- Add the section and choose a collection
- Show the collection image with the products
- Let customers add products from the cards
- Choose the layout on large screens and phones
- Add a button below the products
- See what customers see
- Look up every setting in "Settings reference"
- Fix common problems

---

## Add the section and choose a collection
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Featured collection**. The section comes with 1 **Collection image** block.
3. Under **General**, click **Select collection** under **Collection**, choose a collection, and click **Select**.
4. Enter a **Section subheading**, **Section heading**, and **Section description**. Leave a field empty to hide it.
5. Set **Maximum items to show**.
6. Click **Save**.

> **Tip:** To highlight part of the heading, put it between \[ and ], for example "Our \[best sellers]". You choose the highlight style in **Theme settings** > **Typography**.

## Show the collection image with the products
The **Collection image** block shows a collection card: the collection image and title, linked to the collection. If the collection has no image, the card uses the image of the first product.

1. In the left sidebar, under **Featured collection**, click **Collection image**.
2. Under **Large screen**, choose an **Image style**:
   - **Inline card** places the card in the product list, as the first item.
   - **Small banner** and **Large banner** show the card as a banner above the products.
3. Under **Mobile screen**, choose **Small banner** or **Large banner**. On phones, the card always shows as a banner above the products.
4. Click **Save**.

> **Tip:** To show only the products, remove the **Collection image** block. To add it back, click **Add block** > **Collection image**.

## Let customers add products from the cards
1. Click **Featured collection**.
2. Under **Product card**, choose a **Quick shop action**: Quick add, Quick view, Both, or Not use.
3. If you chose Quick add or Both, choose a **Quick buy mode**:
   - **Standard (variant picker)** opens a small window where customers pick a variant and add it to the cart.
   - **Bulk order (all variants)** opens a table where customers enter a quantity for each variant at once.
4. Click **Save**.

> **Note:** You change how the quick shop window looks in **Theme settings** > **Quick shop**, and how the quick buy button shows on cards in **Theme settings** > **Product card**. The card style itself (image ratio, second image on hover) also comes from **Theme settings** > **Product card**.

> **Tip:** Use **Bulk order (all variants)** for products that customers often buy in several sizes or colors at once, such as wholesale or team orders.

## Choose the layout on large screens and phones
1. Click **Featured collection**.
2. Under **Large screen**, choose the **Section heading alignment**, a **List style** (Grid or Carousel), and the **Columns per row**.
3. Under **Mobile screen**, choose the same settings for phones.
4. Click **Save**.

> **Tip:** With the Grid style, set **Maximum items to show** to a multiple of **Columns per row** so the last row is full.

## Add a button below the products
1. Click **Featured collection**.
2. Under **Button**, check **Enable "View all" button**.
3. Enter the button text in **Label**. If you leave it empty, the button is hidden.
4. Choose a **Style**: Filled, Outlined, or Text link.
5. Click **Save**.

> **Note:** The button links to your collections page (/collections), which lists all your collections. It doesn't link to the collection you chose in the section.

## What customers see
- **Product cards:** each card shows the product image, title, and price, plus the vendor and variant swatches if you turned them on. Customers click a card to open the product page.
- **Carousel:** customers swipe or use the arrows to see more products.
- **Quick add:** customers pick a variant (Standard) or enter quantities for each variant (Bulk order) in a window and add the product to the cart without leaving the page. A product with only one variant is added straight from the card.
- **Quick view:** the eye button opens the product details in a window.
- **Collection image:** customers click the collection card to open the collection.
- **Phones:** the collection card shows as a banner above the products, and the products use the Mobile screen layout.
![Featured collection carousel on mobile](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-featured-collection-2_x6l3wd.jpg)

## Settings reference

### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |
| Collection | The collection whose products are shown. |
| Section subheading | A short tagline above the heading. Leave it empty to hide it. |
| Section heading | The section heading. Put words between [ and ] to highlight them. You choose the highlight style in Theme settings > Typography. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. |
| Section description | Text below the heading. Leave it empty to hide it. |
| Maximum items to show | Sets how many products to show, from 2 to 12. |

### Product card
| Setting | What it does |
| ---- | ---- |
| Show vendor | Shows the vendor on each card. |
| Show variant swatches | Shows variant swatches on each card. You set up swatches in Theme settings > Product information. |
| Quick shop action | Adds a Quick add button, a Quick view button, Both, or none (Not use) to each card. You style the quick shop window in Theme settings > Quick shop. |
| Quick buy mode | Opens a variant picker (Standard) or a table with every variant (Bulk order) when customers use quick add. Appears with Quick add or Both. See "Let customers add products from the cards" above. |

### Large screen
| Setting | What it does |
| ---- | ---- |
| Section heading alignment | Aligns the heading, the description, and the button to the Left or Center. |
| List style | Shows the products in a Grid or a Carousel. |
| Columns per row | Shows 3, 4, 5, or 6 products per row. |

### Mobile screen
| Setting | What it does |
| ---- | ---- |
| Section heading alignment | Aligns the heading, the description, and the button to the Left or Center. |
| List style | Shows the products in a Grid or a Carousel. |
| Columns per row | Shows 1 or 2 products per row. |

### Button
| Setting | What it does |
| ---- | ---- |
| Enable "View all" button | Shows a button below the products that links to your collections page (all collections). |
| Label | The button text. Leave it empty to hide the button. |
| Style | Shows the button as Filled, Outlined, or Text link. |

### Collection image settings
| Setting | What it does |
| ---- | ---- |
| Image style (Large screen) | Shows the collection card as an Inline card in the product list, or as a Small banner or Large banner above the products. |
| Image style (Mobile screen) | Shows the collection card as a Small banner or a Large banner above the products. |

## Troubleshooting
**The section shows grey placeholder products.**
No collection is selected, or the collection is empty. Select a collection with products under **Collection**.

**The "View all" button doesn't show.**
Check that **Enable "View all" button** is on and that **Label** isn't empty.

**The "View all" button doesn't open my collection.**
The button always links to your collections page (all collections). To link to the chosen collection, customers can click the collection card from the **Collection image** block.

**The Quick buy mode setting is missing.**
**Quick buy mode** appears only when **Quick shop action** is Quick add or Both.

**The collection image looks different on my phone.**
The **Collection image** block has a separate **Image style** for **Mobile screen**. On phones, the card is always a banner above the products, even if you chose Inline card for large screens.

## Related articles
- [Shine Tabbed Collections](https://doc.ecomx.co/en/article/shine-multiple-product-tabs-yujkhj/)
- [Shine Collection List](https://doc.ecomx.co/en/article/shine-collection-list-qar9y1/)
- [Shine Quick Shop](https://doc.ecomx.co/en/article/shine-quick-shop-18cw684/)
- [Shine Featured product](https://doc.ecomx.co/en/article/shine-featured-product-x3ilzf/)
- [Shine Theme Settings](https://doc.ecomx.co/en/article/shine-theme-settings-1876q8v/)