How To Custom Swatch Display On Production Page

  • 06/05/2024
  • 340
  • 0

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 you’ve selected in Option Configuration will be highlighted in “in use” blue. To edit them, simply click on the customize button located on the right side of the chosen swatch display style.

PV_Production Page

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

1. Label settings:

Here, you can customize the names of swatches.

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

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
PV_Image settings

3. Spacing settings

  • Swatch Spacing: Spacing between 2 swatches
  • Border Spacing
PV_Spacing settings

4. Selected Swatch

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

5. Unselected Swatch

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

6. Hover swatch

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

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.

PV_example
Sources: Music Frame Lab

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

Helpful?

Featured articles

Variants Options Style

NS Product Variants offers endless product variation options with samples and drop-down menus to enhance the shopping experience. In this

Can’t Find What You Need? 🤔


Article Outline