# Show relevant products for ad campaigns

In this tutorial, you'll learn how to create a more cohesive customer journey for visitors who arrive at your store through one of your marketing campaigns.

The **UTM parameters** rule allows you to create audiences based on the UTM links used in your marketing emails or online ads. We'll walk through how to add a Studio section with variant content that appear to different visitors depending on which ad link they clicked.

* Add a **section** to your home page.
* Add variant content intended for visitors who click on specific social ads.
* Create an audience based on your link with  **UTM parameters** used in one of your online ads.

<details>

<summary>What are UTM parameters?</summary>

**UTM parameters** are strings of code added to your links that help identify where your visitors are coming from. Your analytics can then capture visits by traffic source, allowing you to track the performance of your marketing campaigns.

An example of a link with UTM parameters: `https://www.mystore.com?utm_source=email`

</details>

### Example

For my example store, I sell knitted apparel for adults, babies, and even dogs. I have several social ads that are uniquely targeted for each category.

With UTM parameters, I can create section variants with relevant content that matches the ads they clicked on—whether for **adults**, **babies**, or **dogs**.

<div><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FD4mgsA1Eiwt58qXflr2L%2Fdefault-knits-shoppable.png?alt=media&#x26;token=168708f4-58ca-45d6-bc92-dfbff1f45bed" alt=""><figcaption><p>Default sections for first ad campaign</p></figcaption></figure> <figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FoBNXLQcj7EVMNN8yrZWt%2Fdog-knits-shoppable.png?alt=media&#x26;token=1719a66e-b35c-4f5f-960d-174a30ca9f4f" alt=""><figcaption><p>Section variant for second ad campaign</p></figcaption></figure> <figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FGw13AE8GSDzJis8E72Qc%2Fbaby-knits-shoppable.png?alt=media&#x26;token=d0f38baf-070b-4acd-83fc-cc8dd72bd1b8" alt=""><figcaption><p>Section variant for third ad campaign</p></figcaption></figure></div>

<h3 align="center">Add section</h3>

***

To get started, install a section from Section Studio and add it to one of your pages.

For this tutorial, we'll be using the [Shoppable hero section](https://help.fluorescent.co/section-studio/sections/sections-overview/shoppable-hero), which shows a hero image (or autoplay video) with promoted product cards. However, you can use any [other Section Studio sections](https://help.fluorescent.co/section-studio/sections/sections-overview).

For the default section, we'll add images and products for the first category: adult apparel. This default section, added in the theme editor, will appear to all visitors who don't match any audience that we'll create later.

{% stepper %}
{% step %}

#### <mark style="color:$primary;">Duplicate your live theme</mark>

In your theme library, duplicate your live theme to create an unpublished copy to edit. You can rename it to make it easy to find.
{% endstep %}

{% step %}

#### <mark style="color:$primary;">Install and add shoppable hero</mark>

In the Section Studio app, go to the **Shoppable hero** page, click **Install to theme** and select your unpublished theme copy.&#x20;

In your theme editor, add the **Shoppable hero** to your home page.

<div><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FJZeJdiWawbI9isq1BhZQ%2Finstall-shoppable.png?alt=media&#x26;token=4a3de5df-78d1-48f5-941b-6c6569488a20" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FrY02FLkNDHgRCDdSwsSd%2Fadd-shoppable.png?alt=media&#x26;token=e134fab4-0f30-431b-adaf-d78ef73c1a8f" alt="" width="375"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### <mark style="color:$primary;">Customize content and styles</mark>

Click the section to add an image and customize the general styles.&#x20;

In the section settings, select one or more products to display as cards with a "View product" button.

<div data-with-frame="true"><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FD4mgsA1Eiwt58qXflr2L%2Fdefault-knits-shoppable.png?alt=media&#x26;token=168708f4-58ca-45d6-bc92-dfbff1f45bed" alt=""><figcaption></figcaption></figure></div>

<mark style="color:$info;">Learn more about</mark> [<mark style="color:$info;">Shoppable hero settings</mark>](https://help.fluorescent.co/section-studio/sections/sections-overview/shoppable-hero) <mark style="color:$info;">and how to</mark> [<mark style="color:$info;">edit Global styles</mark>](https://help.fluorescent.co/section-studio/sections/global-styles) <mark style="color:$info;">to closely match your branding.</mark>
{% endstep %}
{% endstepper %}

<h3 align="center">Create targeted content for ad campaign</h3>

***

Now that you have your default section added, you can create variants of the section with content intended for different audiences.

I'll be creating two section variants that match my online ads for my baby and dog apparel products.

<div><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FoBNXLQcj7EVMNN8yrZWt%2Fdog-knits-shoppable.png?alt=media&#x26;token=1719a66e-b35c-4f5f-960d-174a30ca9f4f" alt=""><figcaption><p>First section variant</p></figcaption></figure> <figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FGw13AE8GSDzJis8E72Qc%2Fbaby-knits-shoppable.png?alt=media&#x26;token=d0f38baf-070b-4acd-83fc-cc8dd72bd1b8" alt=""><figcaption><p>Second section variant</p></figcaption></figure></div>

{% stepper %}
{% step %}

#### <mark style="color:$primary;">Add variant for your section</mark>

Go to the **Smart sections** page in the app dashboard.

Select the theme and template where you added your section. Click **Add variant**. When added, the section variant duplicates the content and settings of the main section.

Enter a **name** for the section variant: e.g. "Dog scarves"

<div align="left"><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FXGy26gc7rEsNxBDwx3fH%2Fadd-variant-shoppable.png?alt=media&#x26;token=ec01c558-7c49-4780-bdd6-986ea0e85c30" alt="" width="563"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### <mark style="color:$primary;">Customize the variant with matching ad content</mark>

Click **Customize variant** to open the section variant in the theme editor. Edit the content and styles as you would any section.

Update the headings and products to match the content for one of your online ads. You can modify the styles and other elements.

Remember to click **Save**.
{% endstep %}
{% endstepper %}

<h3 align="center">Create audience with UTM link</h3>

***

Now that you have your section variants, you can create audiences based on your UTM links. After creating audiences, you can assign them to the section variant.

I'll be creating 2 audiences based on my UTM links used by my online ads for baby knits and dog scarves.

{% stepper %}
{% step %}

#### <mark style="color:$primary;">Create audience with UTM parameters</mark>

Go to the **Audiences** page in the app dashboard, and click **Create new audience**.&#x20;

Enter a **name** for the audience. Example: "Ad - Dog scarves".

Select the **UTM parameters** rule, then enter you ad campaign's UTM link. Remember to click **Save**.

<div align="left"><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FV1LSxHrDzjPEdZhGWBcB%2Fselect-utm-parameter.png?alt=media&#x26;token=730abce9-b4ad-4c10-ab2f-2af7106a0188" alt="" width="563"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FpXFd77CVHWFtnftyNLAu%2Fpw%20428.png?alt=media&#x26;token=0501b599-dc1b-4ffe-9fcd-cfa0deaeca3e" alt="" width="563"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### <mark style="color:$primary;">Assign audience to section variant</mark>

To activate your section variant, you need to assign the audience.

Go to the **Smart sections** page. Click the **Assign** button in the **Audiences** column. Select the audience you created.

<div align="left"><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2F8Pw0Dim4ZtXHsSQrMRI5%2Fassign-shoppable-audience.png?alt=media&#x26;token=977cea14-45cf-4068-82e0-37235b4f4a13" alt="" width="563"><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

<h3 align="center">Publish your new smart section</h3>

***

It's time to take the final step and publish your theme with your new smart section.

#### Checklist

> * [ ] &#x20;Start your free trial of the **Smart Sections** or **Ultimate** plan
> * [ ] Add section to your home page
> * [ ] Add section variants in Smart Sections
> * [ ] Customize your section variant with content tailored for your online ad
> * [ ] Create an audience with the UTM link used by your online ad
> * [ ] Assign the audience to your section variant
> * [ ] Publish your theme