# Set Up Dynamic Variants

Use this feature to display a wide range of product choices and get around Shopify's limitation on variations.&#x20;

When building automations that sell on your funnel and fulfill on your Shopify store, sellers face a limitation: Shopify limits the number of variants to three. If you're selling a product with two or three variations (e.g. a coffee pot that comes in three sizes - small, medium, and large), the limitation is not a problem. But what if you're selling a product with two variables and lots of variations? For instance, you sell a super-cute baby t-shirt with three sizes (small, medium, and large) and three colors (pink, blue, and white). That color-size mix represents nine possible variations.

Funnelish has a solution. It's called dynamic variants.

It's a three-step process:

1. [create forms](#creating-forms)
2. [customize the automation](#customizing-the-automation)
3. [run a test purchase](#testing-the-fields)

## Creating forms

The first step is to create a form on your funnel step. This form will display a drop-down menu for one variant with multiple choices.

{% hint style="info" %}
In this example, we create variants for a leather travel bag. The bag has three colors and three sizes. &#x20;
{% endhint %}

1. Open a funnel.
2. Open the step with your product.
3. Drag a **Select form element** to the canvas to create a drop-down menu.

{% hint style="info" %}
To convert any other form element into a **Select form element** on the side navigation, go to the **Input type** heading and click **Select.**
{% endhint %}

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2Fsi1Jo8trqSqZO2hZe61H%2Fimage.png?alt=media&#x26;token=f6a26be6-145e-4f63-be18-8275071e2307" alt=""><figcaption></figcaption></figure>

&#x20; 5\. Scroll down to the **Props** heading.

&#x20; 6\. Click the **Data type** field.

&#x20; 7\. Select **Custom** on the drop-down menu.<br>

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F3dgVUDtCEzxoTiPowljt%2Fimage.png?alt=media&#x26;token=e8cc7343-16f8-460b-b3c5-f22e916ed349" alt=""><figcaption></figcaption></figure>

#### Configuring the form

Now add a Data name and placeholder text.&#x20;

1. Toggle off the **Show label?** feature. (optional)
2. Click the **Data name** field and enter a unique name. This is for internal use to know what data we're collecting here. The customer does not see this text. In this example, we enter Color.
3. &#x20;Enter **Placeholder** text (e.g. user instructions). In this example, we enter **Select a color**.
4. Click the **Options** dropdown and choose **Custom**<br>

   <figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FA3tZXEBsvXLxml9dE4Gb%2Fimage.png?alt=media&#x26;token=4fcd7bc7-23e0-4afe-91a3-634cefbd136f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Make sure the **Data name** has no spaces or special characters. To use multiple words, separate them with an underscore symbol, for example "**Color\_Pair1**"
{% endhint %}

#### Adding options

Now add options to the drop-down menu.

1. Click the **Add option** button below the **Options** field
2. Enter a name and value. In this example, we enter Blue and Blue.
3. Repeat steps to add more options.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FCnSnQ3UxFOgtZKgGKsxk%2Fimage.png?alt=media&#x26;token=d986a28d-c437-4bb3-a616-254151294191" alt=""><figcaption><p>Create drop-down menu with options</p></figcaption></figure>

### Adding another variant

In the previous steps, we created one dynamic variant called Color. Repeat the steps to add another variant. In this example, we add a variant called Size.&#x20;

{% hint style="success" %}
Pro tip: To quickly recreate a form and its settings, hover the mouse on the form element and click the Clone icon.
{% endhint %}

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FEelyWVjGoGjNlutXw9TA%2Fimage.png?alt=media&#x26;token=3243f823-7c12-49a2-a243-1c5c1c23f3de" alt=""><figcaption></figcaption></figure>

#### Results

The screenshot below shows the results.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FasJnOoE2npCDX4Nn6qto%2Fimage.png?alt=media&#x26;token=4c4bdb88-127b-4e76-9e20-0b85d72ab342" alt=""><figcaption></figcaption></figure>

### Previewing the fields

You can preview the drop-down menus.&#x20;

1. Click **Save changes**.
2. Click **Preview**.

* The step displays in a new browser tab.  Click each drop-down menu to review the options.

![](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FETV378RZuzi8WEYxaDnY%2Fb-5a.png?alt=media\&token=01474ccb-de3f-4d59-ba72-444625eb2af4)

## Customizing the automation

The next step is to customize the automation for the product and enable dynamic variations.

{% hint style="info" %}
This step assumes you already have an automation set up for the product. Not sure how to create an automation? [Learn more](https://docs.funnelish.com/integrations/shopify/automate).&#x20;
{% endhint %}

1. Open the funnel step with the product.
2. Click the product one time.
3. Scroll down and click the product automation.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FQ690pBvk9FgMUKUsCc4b%2Fimage.png?alt=media&#x26;token=ad0a9f4a-1ad6-4ffd-aa6b-c9fa0a3277f7" alt=""><figcaption></figcaption></figure>

&#x20; 4\. On the Edit automation panel, click the **Notes & dynamic variants** button.

&#x20; 5\. On the popup window, switch on the **Enable dynamic variants?** toggle.

&#x20; 6\. Click **Add new variant**&#x20;

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FMY6kUoACvC0LC0yllXFN%2Fimage.png?alt=media&#x26;token=b41c270b-620d-4063-869e-602589f225a4" alt=""><figcaption></figcaption></figure>

7. Go back to the funnel step and copy the **Data name** of one variant.
8. Go back to the Edit automation window and paste the **Data name** into the **Value** field.
9. Enter a variant name. Shopify shows this name on the Order page. &#x20;

![](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FtIRGQXWAxYIIEwaXpqmY%2Fc-1bb.png?alt=media\&token=c5dff68a-9020-42ba-a200-5fec08dd190a)

#### Adding another variant

1. Repeat steps to add more variants.
2. Click **Done**.
3. Click **Save changes** on this panel and the next panel.

![Add multiple dynamic variants](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FWPp4wsS9ZCmGFLJ6VHiY%2Fc-3.png?alt=media\&token=3726b1c3-15eb-461c-8015-24d05cc43506)

## Testing the fields

Now you can test the fields and see how they display on the Shopify admin page.

1. Go to the funnel step and click **Preview**.
2. Select the product.
3. Choose an option for each variant. In this example, we select a Black and Large.
4. Complete the test transaction. (Use [test credit card numbers](https://stripe.com/docs/testing).)

![](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2Fgf1z1k45SWeZvQuTRNms%2Fc-4.png?alt=media\&token=5d6e3e3d-4e1f-4b67-ad66-06ac281ec29d)

### &#x20; Go to Shopify

1. Go to your Shopify account.
2. Open the **Orders** page.
3. Open the order.

* Shopify shows the product and variants that were selected on the funnel page.

![Priduct and variants](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FlLxEzqjpBQMm7LDQvnGl%2Fc-5a.png?alt=media\&token=a7961137-a03e-46c4-9f7c-98f425f4807f)


---

# 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://docs.funnelish.com/integrations/shopify/set-up-dynamic-variants.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.
