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

# Variant picker

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products** from the dropdown window **->** Choose **Default product**.
4. From the side menu, select **Product information**. Click **+ Add block** and select **"Variant picker"** block, or click the **Search** bar to enter a search term.

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Type</td><td><p>Select variant type from the dropdown menu:</p><ul><li><strong>Dropdown</strong></li><li><strong>Pills</strong></li></ul></td></tr><tr><td>Input option name to show swatch style</td><td>Fill in the field with the same name of product variant to show swatch style</td></tr></tbody></table>

#### Block padding

<table><thead><tr><th width="184">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determines the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

***

The default theme uses Color Board from the [w3schools website](https://www.w3schools.com/colors/colors_names.asp) for the color swatches. If the color name doesn't exist on the [w3schools website](https://www.w3schools.com/colors/colors_names.asp), it will not display on your filter.

{% hint style="info" %}
If your products have custom color's/special color's, please upload image with the same name as the variant color name: Go to **Settings** **→** **Files** **->** **Upload Files**.

**Naming convention**: Lower cap and use a hyphen "-" to replace white space if your color image name has the white space. For example: your special color will have this name: "Holo Rainbow", you will upload the .png image is holo-rainbow\.png
{% endhint %}