Home / Knowledge Base / Customize Swatches

Customize Swatches

You can easily customize the swatches on Nopsbit Theme. Forget uploading files to the theme one by one like most themes does it. Here's how we do it:
1. Navigate to General Settings under Theme Settings.
2. Scroll down until you find "Display product variant" settings.

Illustration

3. Here are the design settings for variants.

Variant Type selects if the selector is dropdown menu, or swatches with product picture.

Color Variant Style selects if the swatches are boxes or round.

Color Variant Size edits the size of the swatches.

Variant Highlight Style selects if there is a colored border around selected swatches or a checkmark.

You can select if the product image is shown in swatches instead of a color.

And lastly you can select the color of the border.

Illustration

4. Next you can navigate to Product Settings under Theme Settings. Please note that this is a different place than the settings on section page.

Illustration

5. Here you can select if the swatches show on product items (sliders, home page, catalog etc). You can select if they only show on desktop or mobile, and of course both.


6. You can choose specifically on which pages they show.

Illustration

7. You can add swatch colors at the bottom. Use HEX color codes here.