> For the complete documentation index, see [llms.txt](https://docs.funnelish.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.funnelish.com/integrations/shopify/set-up-dynamic-variants.md).

# 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="/files/XKhsNlcea3s2qdfSVvD4" 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="/files/iGdJ4Fb3dWTkf2hYMvOC" 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="/files/hRK23QNn61qH9Punk7O9" 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="/files/SX2Gloj83FMUvy1PcNio" 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="/files/ogXe2VPbS4LMgoLoFkUP" alt=""><figcaption></figcaption></figure>

#### Results

The screenshot below shows the results.

<figure><img src="/files/vQwi53vdd7L5hBTkbkfE" 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.

![](/files/77d9ackQ2VucWoODR4x1)

## 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](/integrations/shopify/automate.md).&#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="/files/GysP6860qOmPkf9sf3oN" 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="/files/Eksoxb7xFrGljyzeFRVt" 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;

![](/files/NsKshELtXxosrsKStvOY)

#### 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](/files/6Ao3PWKZ2G5YjkU1F4nj)

## 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).)

![](/files/Q74FYe6okQs4gomag1bW)

### &#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](/files/qHYS5Vmz17ILnWsCzd8B)
