# Product options design

<div data-full-width="true"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa5w6LQkUFhLWSt58jhjP%2FHelp%20Center%20banner%20%201250%20x%20200-2.png?alt=media&#x26;token=ab0daf12-b917-4435-a603-9a3f6613f853" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

Give your customers the best shopping experience with better usability product options.

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Product options design**
3. Make necessary changes
4. **Save.**
   {% endhint %}

**Minimog** offers 5 product options designs:

* Color
* Variant image
* Button
* Dropdown
* Custom image

{% tabs %}
{% tab title="Color" %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FEETHGlFrzb9fYa31I9Fc%2Fimage.png?alt=media&#x26;token=78cf635a-75aa-449f-8de2-5a2456cbb99e" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Variant image" %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fs9Vdb20CdRIcGmq2mGbu%2Fimage.png?alt=media&#x26;token=8fbdbbc4-56d4-4634-8273-5d35bd685447" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Button" %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FWHTmmbPOisZus0flacHr%2Fimage.png?alt=media&#x26;token=ae49e84a-4c02-44ff-b804-2b77dfe66647" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dropdown" %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fl2HGfIC8p2o3Ep3JeNZL%2Fimage.png?alt=media&#x26;token=b19df65f-d5a7-475a-b534-2b051c2ee762" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Custom image" %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FmpGW3jZ8UfUY6zF26WkC%2Fimage.png?alt=media&#x26;token=fd787ca8-fc24-44c9-b2e2-777afcb9f6cc" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Choose your default design - if option names don't match any of the names you set in the below settings.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fen9OCwPmpIVfPxBeFMjD%2Fimage.png?alt=media&#x26;token=33bb396b-0846-40a5-b6db-3ee38e3b9883" alt=""><figcaption></figcaption></figure>

You can add and select option design for up to 5 option names. Each option includes a **name** (fill in exactly the name of the option you set in Shopify Admin > Products), **design**, and **alternative name**. You can leave the alternative name if you want to display the option name.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FzKWuRwmEtM9HqcTVQr6A%2Fimage.png?alt=media&#x26;token=ffd74319-b6b5-4711-8dc7-9cd4928f8aba" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
For custom images, upload them in **Theme settings** > [**Product options swatches**](https://docs.foxecom.com/minimog-theme/theme-settings/product-options-swatches).
{% endhint %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FGeIkBQFI4LGjyGqhvlet%2Flivechat883x471%20(1).png?alt=media&#x26;token=9168d917-bd02-4cd6-a7af-eb9896c7a5ef" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_minimog&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>
