# Product options design

<div data-full-width="true"><figure><img src="/files/1OZ2q7N6tFYitFzBKwTz" 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="/files/UNMhNOq2myBEu0Qys9EU" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Variant image" %}

<figure><img src="/files/7ySwauI7FAPWu0zj5dAU" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Button" %}

<figure><img src="/files/yjS1cNbN8W6o4HHPv7Sq" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dropdown" %}

<figure><img src="/files/bASRTLIdVKnGb9LAdoTj" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Custom image" %}

<figure><img src="/files/yQP3XlJDmaUlFHAt7gX3" 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="/files/FnY1hqvqbTyznOy0YYEI" 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="/files/RCOSH56G62AKTvrjPKXO" alt=""><figcaption></figcaption></figure>

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

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


---

# 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.foxecom.com/minimog-theme/theme-settings/product-options-design.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.