How To Custom Swatch Display On Production Page

In this guide, you’ll discover step-by-step instructions on how to personalize the swatch presentation to enhance the visual appeal and functionality of your products. Let’s explore it now!

Product Page

All display styles selected in Option Configuration will be highlighted in in use label. To edit them, click the customize button on the right side of the chosen swatch display style.

In each style, you have the flexibility to customize the following sections to suit your preferences:

Image Swatches Customization

1. Label settings

Here, you can customize the swatch names and variant spacing. 

– Swatch names 

• Size: Enter your preferred number.
• Case: Choose from Default, Uppercase, or Lowercase

– Spacing settings 

• Swatch Spacing: Spacing between 2 swatches
• Border Spacing

Note: Simply hide the Option Label by turning off the Show selected option name with label button 

2. Image settings

• Image align: You can crop any part of the image from top, bottom or center options
• Background swatch color
• Image size fit
  • Cover (zoom in to fill the swatch)
  • Container (zoom out to fill the swatch)
• Height, width size

Note: Swatch in Box and Swatch in Dropdown allow you to show product prices inside the variant boxes by activating the Show price button 

3. Selected Swatch

• Outer Border
  • Thickness
  • Radius: Where you rounded the outer border
• Inner Border
  • Thickness

4. Unselected Swatch

• Outer Border
  • Thickness
  • Radius: Where you rounded the outer border
• Inner Border
  • Thickness

5. Hover swatch

• Show variant description
• Show shadow
  • Shadow
  • Thickness
  • Blur
• Show the tooltip with variant image
• Zoom variant image
• Scaling size
• Zoom size

Text Swatches Customization 

1. Label settings

Here, you can customize the swatch names and variant spacing. 

– Swatch names

• Size: Enter your preferred number.
• Case: Choose from Default, Uppercase, or Lowercase.

– Spacing settings 

• Swatch Spacing: Spacing between 2 swatches
• Horizontal padding
• Vertical padding

Note: 

• You can hide the Option Label by turning off the Show selected option name with label button
• Hit on the Show price button to display the variant prices inside the Text swatches 

2. Selected Swatch 

• Outer Border
  • Thickness
  • Radius: Where you rounded the outer border

3. Unselected Swatch 

• Outer Border
  • Thickness
  • Radius: Where you rounded the outer border

4. Hover swatch 

• Show shadow
  • Shadow
  • Thickness
  • Blur

While you are editing, you can visualize the changes in real-time using the preview feature on the right side of the page.

When you’re satisfied with your edits, remember to Save your changes before returning to your website to admire the stunning new appearance of your variants.

Need any help?

If you need any assistance with NS Product Variants, feel free to contact us via live chat in-app or email [email protected]. Our support team is happy to help