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