# Featured products

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> Ira is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](/ira/readme/theme-retirement.md).
{% endhint %}

The **Featured products** section lets you feature up to 3 products alongside a featured image, custom marketing text, and button. This section is perfect for showcasing products that pair well together.

## Set up section

Add this section to your template and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/ira/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/ira/general/adapting-your-theme/dynamic-content-with-metafields.md).
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Select a **Template** to edit from the dropdown menu in the top bar.

   > Learn how to use templates in our [Templates guide](/ira/general/editing-themes/using-templates.md).
2. Under **Template**, click **(+) Add section** and select **Featured products**
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.
4. Click on the **Featured collection row** section and click **Select collection** to choose which collection to feature.

</details>

## Add section image and headings

The section image displays on the left or right half of the section. Change the headings that display above the featured products.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click the **Featured products** section to open the settings.
2. Click **Select image** to choose the image to display next to the featured products.
3. Set the **Image position** to either *Left* or *Right* of the featured products.
4. Change the **Heading** and **Subheading** text that displays above the featured products.
5. Select or paste a **Link** and change the **Link text** of the button that displays below the featured products.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read ["What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
6. Click **Save**.

</details>

## Change section style

The section image displays on the left or right half of the section. Change the headings that display above the featured products.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click the **Featured products** section to open the settings.
2. Choose to **Enable contrast** colors.

   > The **Contrast** style uses the Contrast colors in your **Theme Settings**.

   > Sections with contrast colors can improve the variety and flow of your page.

   ![](/files/L5lzBMUeSCKnUjEQI37r)
3. Choose to **Enable full width** to remove any borders around the section, letting it fill the entire width of the screen.
4. Click **Save**.

</details>

## Settings reference

Click on the section to find the following settings:

| Setting           | Description                                                                           |
| ----------------- | ------------------------------------------------------------------------------------- |
| Image             | Select or upload an image to show beside the featured products.                       |
| Image position    | Place the image to either the Left or Right of the featured products.                 |
| Heading           | Enter heading text to display as a section title.                                     |
| Subheading        | Enter text to display below the heading.                                              |
| Link              | Choose a page from your store to be link to from the section's call to action button. |
| Link text         | Add text to be used on the call to action button                                      |
| Enable contrast   | Apply your store's Contrast colors to this section.                                   |
| Enable full width | Remove the outer margins from this section to span the entire width of the screen.    |
| <p><br></p>       |                                                                                       |

***

> **Related links**
>
> [Featured collection](/ira/sections/theme-sections/featured-collection.md)\
> [Product listing settings](/ira/products/product-listings.md)\
> [Collection pages](/ira/collection-pages/collection-pages.md)\
> [Shopify collections guide](https://help.shopify.com/en/manual/products/collections/collection-layout#change-the-sort-order-for-the-products-in-a-collection)


---

# 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://help.fluorescent.co/ira/sections/theme-sections/featured-products.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.