---
description: >-
  In this section, you can decide on the product variants design for the entire
  store.
---

# Variant picker!!!

**Show the single-value option**

Decide whether to display the product swatch on the product listing if the product has the only product variant by enabling or disabling the current option.

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

* Remove the same option names from the other input fields that do not meet your needs.
* For the correct work of the following styles on collection pages make sure to use the **"Button"** type in _Theme settings ->_ [_<mark style="color:blue;">Product</mark>_](https://mpithemes.gitbook.io/canvas-shopify-theme/theme-settings/product) _-> Variant picker type (Collection item)._
* 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/canvas-shopify-theme/page-categories/products/product-information#variant-picker).
{% endhint %}

**"Round color" style options**

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

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FjLsnR6EEwza9D1qssnAQ%2Fvariant%20picker_round%20color.png?alt=media&#x26;token=2d8fb3c5-f2f6-468a-b142-23d84c590789" alt=""><figcaption></figcaption></figure>

**"Square picture" style options**

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

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2F8TbpNf2rKsL7tpYV1Vc2%2Fvariant%20picker_square%20picture.png?alt=media&#x26;token=50bd6dcc-1fc8-46a8-8fef-04d12b3859c5" alt=""><figcaption></figcaption></figure>

**"Square picture" border radius**

The border radius of color variants can be adjusted on a scale of 0 to 40 pixels, where 0 means to display variants as square options, and 40 is an ellipse.

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

{% tabs %}
{% tab title="0 px" %}
<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FOH3LsGTId5NAR2ytPYxD%2Fvariant%20picker_square%20radius.png?alt=media&#x26;token=47d55da9-3b47-406b-8746-9f582cc1b092" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="40 px" %}
<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FSYNBMqtooYLs8TwWk76Z%2Fvariant%20picker_round%20image.png?alt=media&#x26;token=b9f8fe74-5ce9-460b-a393-57a2bcbb8896" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FjlG9XG2OfttYoyYKzZjt%2Fcolor%20variants_admin.png?alt=media&#x26;token=1b4d794f-1427-4f0f-854b-9d6c9a6bc024" alt=""><figcaption></figcaption></figure>

{% 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" style options and "Square picture" style options):
{% endhint %}

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FTYkSMmuwo709oToO8iUm%2Fvariant%20picker_text.png?alt=media&#x26;token=9979cb08-c244-4c3e-95de-5a85c83410b2" 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 brake as a separator:
{% endhint %}

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FXvkQDmSXNVTP3PdL0Neb%2Fvariant%20picker_breakline.png?alt=media&#x26;token=a773325b-2cb7-4a42-b610-ccbfbe80bb85" alt=""><figcaption></figcaption></figure>

**Option colors (Filters and variant picker)**

The "Option colors" feature works with the color options only.

This option can be helpful in several cases:

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

In the following example, you can view how to customize the option:

_Image_
