# 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](https://help.fluorescent.co/ira/readme/theme-retirement).
{% 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](https://help.fluorescent.co/ira/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/ira/general/adapting-your-theme/dynamic-content-with-metafields).
{% 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](https://help.fluorescent.co/ira/general/editing-themes/using-templates).
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.

   ![](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-760007283a7194521d6fc95e27860bed03f263bb%2Ffeatured-products-contrast.jpeg?alt=media)
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](https://help.fluorescent.co/ira/sections/theme-sections/featured-collection)\
> [Product listing settings](https://help.fluorescent.co/ira/products/product-listings)\
> [Collection pages](https://help.fluorescent.co/ira/collection-pages/collection-pages)\
> [Shopify collections guide](https://help.shopify.com/en/manual/products/collections/collection-layout#change-the-sort-order-for-the-products-in-a-collection)