Customize Shopify variants options
This feature allows you to change the appearance of your Shopify options to Image or Color swatch without altering their underlying functionality or setup.
With the Free and Grandfather plan, you can sync options for up to 20 products. However, if you have more than 20 products, you'll need to upgrade to the Unlimited plan. The Unlimited plan allows you to sync options for all products in your store, regardless of how many you have. For more details and features, please have a look at the Pricing details page here.
To see how the feature works in action, please visit our demo product. Password (if needed): 123
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:
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.
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:
This is the default display type which let you know that the option is using the display style from your current theme.
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
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
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.
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.
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.
If you are not seeing the new customization works on your product page, this may happen if the app is disabled in your current theme' app embeds. To enable app in current theme, please follow this article
Hopefully this article has helped you understand our feature on customizing Shopify options. Things change all the time, so if you run into issues please don't hesitate to share them with us at the in-app live chat. We're happy to lend a hand 🤩
💡 Makes it easy for customers to view variant images changed while choosing variants by clicking on the color/image swatches
With the Free and Grandfather plan, you can sync options for up to 20 products. However, if you have more than 20 products, you'll need to upgrade to the Unlimited plan. The Unlimited plan allows you to sync options for all products in your store, regardless of how many you have. For more details and features, please have a look at the Pricing details page here.
To see how the feature works in action, please visit our demo product. Password (if needed): 123
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
If you are not seeing the new customization works on your product page, this may happen if the app is disabled in your current theme' app embeds. To enable app in current theme, please follow this article
Hopefully this article has helped you understand our feature on customizing Shopify options. Things change all the time, so if you run into issues please don't hesitate to share them with us at the in-app live chat. We're happy to lend a hand 🤩
Updated on: 16/02/2024
Thank you!