> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/variant-picker.md).

# Variant picker

In this section, change the design of the product variants and color filter for the entire store.

### **Product cards**

{% hint style="success" %}
**Tip:** For the "Button" type, decide the button style in *Products -> Product details ->* [*<mark style="color:blue;">Variant picker</mark>*](/unicorn-shopify-theme/page-categories/products/product-details/variant-picker.md).
{% endhint %}

**Show variant picker**\
Control the display of variant pickers for product cards by activating the option. This option enables additional settings related to this feature.

**Type**\
Set the product variant type displayed on store-wide product cards using the **"Dropdown"** or **"Button"**.

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVpbfeBCmZa75WqO6ConP%2Fvariant%20picker_dropdowns.png?alt=media&amp;token=48369e3a-3722-4af4-a8e3-63649a38459b" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Button" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FIZboUfRk2nxjWs67JOqO%2Fvariant%20picker_buttons.png?alt=media&amp;token=819734a6-bb83-4a0b-b2a0-8f717af38966" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Show single-value options**\
Controls whether swatches are displayed on product listings for products that have only a single option value or variant. Enable this setting to show swatches for all products, regardless of the number of available variants.

***

### Picker button styles

{% hint style="success" %}
The settings are applied to product cards and product pages store-wide.
{% endhint %}

**Show tooltips for colors and images**\
Enable this option to display a tooltip with a color name when hovering over the color variant on product cards and product pages. This feature helps enhance user experience by providing additional information about each color variant, ensuring a more informed selection process.

{% hint style="warning" %}
**Note!** There are a few requirements that should be completed for the "Round color options" and "Rectangular swatch options" types to work correctly:

* Remove the same option names from the other input field that do not meet your needs.
* To apply the provided styles for collection pages, ensure the global setting is set to **"Button"**.
* To display the required style option on product pages, use the **"Button"** type in *Products -> Product details ->* [*<mark style="color:blue;">Variant picker</mark>*](/unicorn-shopify-theme/page-categories/products/product-details/variant-picker.md).
  {% endhint %}

**Round color options**\
Paste the product option name into the input field to display color variants as round swatches.\
Example: Color

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FovB0DRvRKnmIoe0gbH7B%2Fvariant%20picker_round%20color.png?alt=media&amp;token=7a9c77e7-6599-4ad1-bfab-216ae28ca7b4" alt=""><figcaption></figcaption></figure>

**Rectangular swatch options**

{% hint style="success" %}
**Tip:** To display swatches as images instead of colors, assign a corresponding product image for each product variant in your Shopify admin.
{% endhint %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fr2pvi7tRvyuA4YC41Ji7%2Fcolor%20variants_admin.png?alt=media&amp;token=012e5396-b98f-4f41-81ef-0eecfd400277" alt=""><figcaption></figcaption></figure>

Paste the product option name into the input field to change the product swatches style to rectangular colors or images.\
Example: Color

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FbLe0RxZxEwUKSHYLXjzZ%2Fvariant%20picker_rectangular%20swatch.png?alt=media&amp;token=7362a89c-61d5-4518-8072-0c5646704b67" alt=""><figcaption></figcaption></figure>

**Corner radius**

{% hint style="info" %}
This option appears if the "Rectangular swatch options" input field is used.
{% endhint %}

Adjust the corner radius of product swatches from 0 to 40 pixels. A value of 0 displays square corners, while 40 pixels creates a pill-shaped appearance.

In the following examples, you can view the boundary values:

{% tabs %}
{% tab title="0 px" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fpd0rd5NGszAQyDr7AEEX%2Fvariant%20picker_corner%20radius%20square.png?alt=media&amp;token=76d9e5ca-d27e-46ef-9eee-500f1ca51575" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="40 px" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FdLsj9yCbfyOCh5u8YWJo%2Fvariant%20picker_corner%20radius%20round.png?alt=media&amp;token=3667fa62-ff34-4a24-8659-aebcbdab8de1" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="success" %}
**Tip:** To replace images and colors for product variants with the color names, remove the product option name (for example, "Color") from the input fields "Round color options" and "Rectangular swatch options".
{% endhint %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FCoVLLD5pc6bK9XfPbiHn%2Fvariant%20picker_text%20swatches.png?alt=media&amp;token=ce45d3d0-8c05-416e-ad21-10a0df600c16" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Tip:** If you use several product option names (for example, "Color", "Pattern", "Material", etc.) for various products in your store, add each option name to the required input field using the line break as a separator.
{% endhint %}

The following color settings help to colorize the text swatches:

**Background /** **Border**\
Change the base and border colors of unselected product variants.

**Background on hover / Border on hover**\
Applied to the selected or hovered over product variant.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F8sQwQlnHoiQuf3lArIw9%2Fvariant%20picker_colors.png?alt=media&amp;token=10cb31a5-d513-42c6-9094-6addec6cb28f" alt=""><figcaption></figcaption></figure>

***

### Picker buttons and filters

This option can be helpful in several cases:

* to assign a color/image to a missing color variant or filter item that is not displayed by default;
* to reassign a product variant or filter item with a different color/image for an existing color option.

**Option color mappings**

{% hint style="success" %}
**Tip:** Use the line break as a separator when adding a new value.
{% endhint %}

To set the desired colors or images for filter items and product variants, use the described values:

* **Color codes**. Add the color hex code using the format "color|css code".

Example: Purple|#9F2B68

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FipdfT8teTNlgb2gJZU2r%2Fvariant%20picker_custom%20color.png?alt=media&amp;token=35926685-66a7-4748-84d0-a37d856cf1eb" alt=""><figcaption></figcaption></figure>

* **Links**. To display an image for a filter item or product variant, follow the steps:

**Step 1**

Go to your *Shopify admin -> Content -> Files* and upload a new file.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FzMTJsHLRj4Iy0gnBPLU3%2Fadmin_upload%20image.png?alt=media&amp;token=9b7ac439-f165-4d38-93f8-4d7403f6cd2d" alt=""><figcaption></figcaption></figure>

**Step 2**

{% hint style="success" %}
**Tip:** To display the settings that apply to "Option color mappings" for product variants, enter the product option name into the "[<mark style="color:blue;">Round color options</mark>](#picker-button-styles)" input field.
{% endhint %}

Copy the link and paste it into the "Option color mappings" input field. The format of the used custom option should match the value: color|url.

Example: Black|Shopify link

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F9NfeYGcRihDHuapJndSZ%2Fvariant%20picker_custom%20image.png?alt=media&amp;token=deff1ca1-2cb0-46f4-99cc-be2a614d2218" alt=""><figcaption></figcaption></figure>