# Variant picker

### **Product card**

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

Control the display of variant pickers for product cards by activating the **"Show variant picker"** option. The option activates additional settings related to this feature.&#x20;

**Type**

The current option allows you to choose the product variant type on collection pages and for collections in sections using **"Dropdown"** or **"Button"** settings.

{% 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&#x26;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&#x26;token=819734a6-bb83-4a0b-b2a0-8f717af38966" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Show the single-value option**

By using the provided option, arrange whether to display the product swatch on the product listing if the product has only one product variant.

### Picker button styles

**Enable tooltips for colors and images**

Enable this option to display a tooltip with a color name when hovering the mouse 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" and "Rectangular picture" types to work correctly:

* Remove the same option names from the other input field that do not meet your needs.
* For the correct display of the following styles on collection pages, ensure to select the **"Button"** type in the current global section above.
* To display the required style option on product pages, use the **"Button"** type in *Products -> Product information ->* [*<mark style="color:blue;">Variant picker</mark>*](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/products/product-information#variant-picker).
  {% endhint %}

#### **Round color**

To display color variants as round options for products in the entire store, use the given input field. Here you can paste the product option name (for example, "Color") to add the style:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FV1HNOLxcQh8tj0icjKTf%2Fvariant%20picker_round%20color.png?alt=media&#x26;token=1842b79f-0495-4589-b446-bedd85277853" alt=""><figcaption></figcaption></figure>

#### **Rectangular picture**

{% hint style="success" %}
**Tip:** To display the color variants as images instead of the color options, 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&#x26;token=012e5396-b98f-4f41-81ef-0eecfd400277" alt=""><figcaption></figcaption></figure>

Paste the product option name (for example, "Color") into the input field to change the style of product variants to rectangular colors or images:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FlKrq1FETgEKTNG1VfiWZ%2Fvariant%20picker_picture.png?alt=media&#x26;token=3e24f58e-7fd2-4475-8835-572c0e6c4ca2" alt=""><figcaption></figcaption></figure>

#### **Corner radius**

{% hint style="info" %}
This option will appear if you add a product option name in the "Rectangular picture" input field.
{% endhint %}

The corner angles of product variants can be adjusted on a scale of 0 to 40 pixels, where a value of 0 displays variants as squares, while 40 pixels renders them as ellipses.

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%2F0AzqunnORnE868MX4U4u%2Fvariant%20picker_square%20corner.png?alt=media&#x26;token=7da1d2c2-53b3-40c4-a1aa-e75bb5bd6ee3" 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%2FhNF2lD7TQjWrxvhex3Is%2Fvariant%20picker_round%20corner.png?alt=media&#x26;token=d0291df2-3f2f-4c8b-b68f-3cffdf1978d8" 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" and "Rectangular picture":
{% endhint %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FbVy7e1vhq0QlQ8TYxhLU%2Fvariant%20picker_pill.png?alt=media&#x26;token=35282985-3051-4499-9cc7-89fb44c26046" 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 %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F6SENdJZ16XdMl36dslWK%2Fvariant%20picker_separator.png?alt=media&#x26;token=e51475d2-5c51-4c00-a068-06a07be0a69b" alt=""><figcaption></figcaption></figure>

The following color settings help to colorize the variant pickers:

Apply the **"Background"** color to change the base color of the text variant pickers, such as "Size".

Change the border color of unselected product variants by specifying a color in the **"Border"** picker. This configuration can be applied to the text variant pickers.

Use the **"Hover background"** and **"Hover border"** items to change the colors of the selected product variant, as well as the product variants that are hovered over with the mouse.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FF3eY0FSLRHFbuB3PvOjF%2Fvariant%20picker_colors.png?alt=media&#x26;token=cd270a6c-72e9-4341-b05e-79de625681d0" 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.

{% 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, you can use such values:

* color codes:

Add the hex code of a color by using the format "color|css code".

Eg.: Green Pearl|#134D24

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FKaA45gDCEgBbc9x71QzP%2Fvariant%20picker_custom%20color.png?alt=media&#x26;token=d24d5a31-11d7-44ab-acd9-9ca0176be094" alt=""><figcaption></figcaption></figure>

* links:

To display an image for a filter item or product variant, you should follow the next 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%2FBSHu5umtKQQNEcxFNneZ%2Fadmin_custom%20image.png?alt=media&#x26;token=5a2cb7d7-a205-4060-97e8-9eeb76a4cba8" alt=""><figcaption></figcaption></figure>

**Step 2**

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

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

Eg.: Multicolor|Shopify link

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Foa5cROE6fSPeZYard4NA%2Fvariant%20picker_custom%20image.png?alt=media&#x26;token=c081e567-7653-4947-826d-207ebfd9f571" alt=""><figcaption></figcaption></figure>