Configure Variant Option Style

  • 30/05/2025
  • 2123
  • 0

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!

Overview: Option Configuration 

The Option Configuration section is where you customize the style of your variant types.

Here, you can:

  • Choose the shape and layout for your variant options.
  • Display options as color swatches, images, or text.

⚠️ Note:

By default, the first 100 product variants are synced automatically in the app.
To apply the variant style setting for more products, please sync products manually. Follow the steps below:

  1. Go to Option Configuration
  2. Click Sync Product (top right)
  3. Search for the product name > Select > Click Done

Your variant style will now be applied to the newly synced items.

Sync products

How to Configure Variant Style

Step 1: Enable NestScale App Embeds on Shopify Theme Editor

  1. Go to Online Store > Theme > click Customize button
  2. On the left sidebar, toggle on NestScale Product Variants app embeds 
  3. Click Save button in the top right corner
Configure variant option style

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 includes: 

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

✅ Toggle ON to activate your selected style on each page.

Step 3: Add Option Images

For Option Images, you can choose from the following: 

  • Variant image: Automatically uses the primary variant image as the swatch.
PV_Option image1
  • Color/custom image: Assign a color code or upload a custom image per variant.
PV_Option images2

How to apply:

  1. Search and select the swatches you want to edit
  2. Set a color code or upload a custom image
  3. Click Done
  4. Don’t forget to Save at the top!
Upload swatch

That’s all set!
You can now view the product variants on your website to verify that the app is working correctly.

Note: If the variants don’t appear as configured in the app, please reach out to our support team via the in-app live chat or email us at [email protected]. We’re here to help and will assist you as quickly as possible!

How to Reorder Active and Inactive Variants?

You can reorder variant display based on availability:Click on Display Settings (next to the search bar).

  1. Click on Display Settings (next to the search bar)
Display settings

2. There are 2 options to choose from

  • Active swatch above inactive swatch (default)
  • Active swatch below inactive swatch 
Display settings 2

3. Click Apply

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!

Helpful?

Featured articles

Variant Split

The Variant Split feature allows you to separate product variants into individual listings.   By displaying each variant as its own

Quick View

The Quick View feature in the NestScale Product Variant app enables customers to preview product details in a pop-up directly

Can’t Find What You Need? 🤔


Article Outline