Configure Variant Option Style

NestScale Product Variants app enables you to customize the product variants with multiple styles to enhance the shopping experience. 

In this user guide, you will learn how to set up the variant option style. Let’s get started!

Options Configuration 

The Option Configuration section is where you customize the style for your variant type(s).

Here, you can configure the variant option shape and adjust how it displays (e.g., color or image swatches).

Note:

Only the first 100 variants across your products are automatically synced, and the selected variant style will apply to them.

To apply the configuration to the rest variants, you’ll need to manually sync the products in the app.

1. On Option Configuration page, click on Sync product button at the top right corner.
2. Enter product name > tick to select > click Done button. 

All set! Your previously configured variant style will now be applied to synced products.

How to configure the variant option style

In Option Configuration, you can easily customize the style for your available variant type(s). For example: 

• Size
• Origin 
• Color 
• Style 
• Material 

For each variant type, set up the Display Style and Option Images. 

Display Style on Product page includes: 

• Swatch circle in square
• Swatch in box
• Swatch in dropdown
• Circular swatch
• Square swatch
• Swatch in pill
• Text swatch 

Display Style in Collection page include: 

• Swatch circle in square
• Circular swatch
• Square swatch
• Text swatch

Options Images include: 

• Variant image: This option allows you to synchronize your variant image in the Variant section under your product setting

• Color/custom image: you will need to upload image from your desktop’s file

You can select specific swatches by entering their names in the search bar to configure > click on Done button to complete > hit on Save button at the top of the page.

P.S. Currently, you can add one image per product variant. We’re working on a feature to enable multiple images for each variant, which will be included in the next version.

Also, don’t forget to click the Save button at the top of the page once you’re done to save your progress!

How to Reorder Active and Inactive Variants?

To change the order of active and inactive variants, click on the Display settings next to the search bar. 

This allows you to reorder active variants using NS image options and inactive variants using Shopify default options.

There are 2 options to choose from > Click on Apply:

• Active swatch above inactive swatch (default)

• Active swatch below inactive swatch 

That’s done! These simple steps can help you personalize your visual layout with ease.

If you would like to customize your variant option design in more detail, check out the following guidelines. 

> How To Custom Swatch Display On Product Page

> How To Custom Swatch Display On Collection Page

Want to have a quick app walkthrough demo? 

Need any help? 

Please contact our support team via live chat or email at [email protected]. We are happy to help you as soon as possible!