Variant Picker

This block displays available product options (e.g. Color or Size) with selectable variants.

Create a variant

  1. Go to the product to which you want to add a new variant.

  2. Find the Options block and check the This product has options checkbox if you're adding variants for the first time.


  3. Add the Option name (e.g. Color, Size, Material).
  4. Add Option values (e.g. XS, S, M, L, XL, 1X).
  5. Click Done.

Frame

Set up block

  1. Select a Product Template to edit from the dropdown menu in the top bar.
  2. Click the Variant picker block to open its settings.
    • If the Variant picker block doesn’t exist, go to the side panel. Under the Product page section, click + Add block and select the Variant picker block.
  3. Select the Type option you desire. Frame offers two options: buttons and dropdowns.

    • Buttons: Variants display as 'chips' or clickable rectangles.

    • Dropdowns: Variants display as a dropdown list selector.

      Most customers prefer color swatches to be shown as buttons, and this is the default. However, if you have dozens of colors you may prefer the dropdown.

  4. Check Show color swatches to display your product variants as a row of clickable color swatches. To learn how to set-up color swatches, please refer to the color swatches article.
  5. Check Show low stock notification to display a notification when the selected variant has 5 or fewer items in stock. Please ensure you have inventory tracking enabled.
  6. Click Save.

Honey

Set up block

  1. Select a Product Template to edit from the dropdown menu in the top bar.
  2. Click the Variant picker block to open its settings.
    • If the Variant picker block doesn’t exist, go to the side panel. Under the Product page section, click + Add block and select the Variant picker block.
  3. Select the Variant picker type you desire. Honey offers two options: Buttons and Dropdowns.

    • Buttons: Variants display as 'chips' or clickable rectangles.

    • Dropdowns: Variants display as a dropdown list selector.

Most customers prefer color swatches to be shown as buttons, and this is the default. However, if you have dozens of colors you may prefer the dropdown.

  1. Select the Swatch type you desire. Honey offers tree options: Default, Swatches, and Variant images.
    • Default: This setting takes the option you selected in the previous step: Buttons or Dropdowns.

    • Swatches: This option will display clickable swatches. You can use the default system colors or custom images. To learn more, please refer to the color swatches article.

    • Variant images: This option will display the variant images you selected for each product variant. To learn more, please refer to the color swatches article.

  2. Select the Swatch shape you desire.

    • Circle


    • Square
      • This shape will take the border radius setting you selected under Theme Settings > Styles > Border Radius

    • Rectangle
      • This shape will take the border radius setting you selected under Theme Settings > Styles > Border Radius

  3. If desired, use the slider to change the Swatch size.
  4. Click Save.

According to the Baymard Institute, buttons almost always outperform dropdown menus. 


“[With a dropdown menu,] users must check to see if their size is available for each variation under consideration — a potentially tedious task that often leads to users simply giving up....exposed “Buttons” allow users to immediately see size options.” 


-Baymard Institute 


“Always Use “Buttons” for Size Selection”With buttons, all options are shown up front, which is less work for the user, which then results in a higher conversion rate. For this reason, we use buttons as the default variant picker on Frame and we highly recommend that you do not change it. However, for those merchants with 100 or more SKU variations, you may want the option of the traditional dropdown menu. 

Filter gallery by color

For variant options such as color, our themes provide the option to filter the images displayed in the gallery depending on the selected color variant. This feature is ideal for merchants with many images per color. To filter the gallery by color, please follow the steps below:

  1. Select a Product Template to edit from the dropdown menu in the top bar.
  2. Click the Product page section to open its settings.
  3. If enabled, uncheck Show images of all colors regardless of variant selected.
  4. Exit the Theme Editor and navigate to your Shopify Admin.
  5. Go to the product you want to filter images by color.
  6. Find the Media block and click on one of the product images to open its settings.
  7. Click Add alt text and type the color name exactly as it appears on your variant in parentheses. For example, if your color variant is Heather Gray, type the alt text as (Heather Gray) .
    • If you don’t add any alt text, the image will be displayed for all color variants.
    • You may add additional alternative text outside of the parentheses. You may want to describe the image for accessibility purposes. For example, Long Dress with Short Sleeves (Black). 
  8. Click Save alt text.

Our themes offer the option to filter thumbnails by any custom option such as Fit, Material, or Style. For instructions on setting up custom options please visit Products.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us