# Product options design

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 to choose:

* 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 %}

### Default option design

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>

### Product options design

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 image design, kindly upload images in **Theme settings** > **Product options swatches**.
{% endhint %}


---

# 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/megamog-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.