This feature allows you to change the appearance of your Shopify options to Image or Color swatch without altering their underlying functionality or setup.

💡 Makes it easy for customers to view variant images changed while choosing variants by clicking on the color/image swatches

In this article, you will understand how to use this feature from our app to customize the style of options (as known as variant pickers) which created from Shopify. Here is 3 main steps:

• Step 1: Sync Shopify product variants options to the app
• Step 2: Customize the option display style as your wish
• Step 3: Check the new swatches on your product

To get the detailed instruction, please read through each step below:

Step 1: Sync Shopify product variants

• This step will help our app get the Shopify options you have in your store.

• Go to app > open Custom Shopify options page > Click on the Sync variant options button to start sync product data to the app.
  

• You will see your product variant options listed in the table.

• If you edit some product variants from Shopify admin after product data has been synced to the app. Please click on the Sync variants again to update the changes.

Step 2: Customize the option display style as your wish

From the option table, you will see some columns listed including:

• 1. Options - Show the option title similar to how you named it in your Shopify products. Options from different products but have the same option title will share the same display style.

• 2. Connected products - Display the number of synced products that have the correspondent option

• 3. Display type - Let you know that how the options is displaying on your product page.

• 4. Customize - You can click on the pencil icon to start customize the display style of your option

From this modal you can change whether you want to display your Shopify options as:

Theme default

• This is the default display type which let you know that the option is using the display style from your current theme.

Custom color swatch

• If you choose to apply display type as custom color swatch, you will need to assign color represents for each variant. Click on the color picker and choose color for each variant

Custom image swatch

• If you choose to apply display type as custom image swatch, you will need to upload image represents for each variant. Click on add image button and choose image for each variant

Variant image swatch

• If you choose to apply display type as variant image swatch, the uploaded image for each variant from Shopify products will be automatically displayed option image.

Step 4: Save changes

• After uploading the images or choosing colors you want for your Shopify variant options on the Product page, please click the Save button on the bottom right corner to save all the changes. The style will automatically update on your storefront after you save.

Step 4: Check the new swatches on your storefront

• In the Shopify options table, next to the Options, you will see the number of products that this Option is connected to. (for example: "19 products")

• Click on that text and you will see the list of connected products. Continue and click on the product title to see product in Shopify Admin and view it on your live store to check for the result of your customization.

Demo products

Updated on: 19/06/2025