Custom variant picer

Im using the atelier theme for my store and want to make my variants for my products unique.

I wonder if its possible to do like my Variants on shopify like in the picture. So when someone choose a color instead of showing them the color directly, they first see a swatch or preview and some text about the material. How to do it on shopify atelier theme. (These pictures are just for inspiration and for making my explanation easier to understand, not my website)

@armin777 You can recreate that variant preview style in Atelier using product metafields and a small code edit.

1. Create metafields:

custom.material_name (text)

custom.material_description (multi-line)

custom.material_image (file)

2.Add this snippet above your product form in main-product.liquid:

{% assign v = product.selected_or_first_available_variant %}

{% if v.metafields.custom.material_image %}

<img src="{{ v.metafields.custom.material_image | image_url: width: 600 }}" alt="{{ v.metafields.custom.material_name }}">

{% endif %}

{{ v.metafields.custom.material_name }}

{{ v.metafields.custom.material_description }}

3. Fill in your metafields per variant.

When customers switch colors, the image and material info will update just like your example.

Depending on theme just use swatches.
https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields

When a theme does not have the exact business requirements or it’s difficult for you to explain critical detail then an advance theme customization is needed, reach out for services.

Hi @armin777

Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.

Hi @armin777 ,
Yes, that’s possible - but it requires a bit of custom coding since the Atelier theme doesn’t have built-in support for variant previews with text.

You can achieve this by:

  1. Adding custom metafields for each variant (e.g., material description, preview image).
  2. Editing your product template to display the selected variant’s metafield info dynamically when a color is chosen.
  3. Optionally, replace the standard color swatches with clickable thumbnails or styled buttons showing the preview image and material text.

If you’re comfortable with Liquid and JavaScript, you can code this manually. Otherwise, you can use an app like “Variant Image Automator” or “Variant Descriptions King” to simplify the setup.

Hi @armin777

You can easily do that with the Easify Product Options app. It lets you create image swatches for your product options — just upload your own product images for each color, and they’ll display as swatches instead of plain text or color blocks.

You can also add short descriptions or tooltips to show material details when customers hover over the swatch, or display the text right below it. It’s super easy to set up and works smoothly with most Shopify themes.

  • This is the result:

  • This is the app setting:

You can add description for each option value here:

I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime! :blush:

vylonefurniture.com password: Cozynest777

Hi @armin777,

I hope you’re doing well. If you’re open to using an app, you can try the Inkybay – Product Personalizer app.

With Inkybay’s Product Option feature, you can easily create swatch options that display a color image as a preview without directly changing the product image. You can also add a short description of the fabric material below the preview image. Customers can initially see the color swatch and a short description of the materials. After clicking on a swatch, they can view the product image updated with that color. You can create as many swatch options as needed.

You can also create various options, such as text fields, number fields, file uploads, etc., with dynamic pricing. These options can be displayed as drop-downs, radio buttons, swatches, checkboxes, and more. Additionally, you can create child options according to your preferences.

The best part is setting up products is very easy. Inkybay also offers a 21-day free trial, so you can explore it at no cost before committing. If you like, we can share a demo product with you.