Swatches are samples of colour that help your customers choose the right product. Use the “Colour” product option to add swatches to product pages in your online store. This way, customers will be engaged visually.
You can choose to display swatches on the product grid and customise their shape and the size on the Design page in your store admin.
Swatches will be displayed on the product page in your store, where customers can select the option they like before making the purchase. The swatches customers chose will be listed in the order details as well as in your store’s notifications and in invoices.
Plan availability: Venture, Business, Unlimited.
Table of contents
- How to Create swatches for a product
- Adjusting the swatch display on the product layout
- Customizing swatch shape and size
How to Create swatches for a product
- From your Netcash Shop admin, go to Catalog → Products.
- Open the product you want to edit (or create a new one).
- Go to the Options tab and click +Add Product Option.
- Select the “Color” option type from the Option type.
- In the Option values field, enter the name of the first swatch. For example, “Green”.
- Click on the swatch icon to set its colour in your storefront.
- Click +Add Value and add the other swatches you want your product to have.
- Click the Value selected automatically dropdown to choose if any swatch value should be preselected. By default, customers need to choose an option manually.
You can select from the list of popular colors or switch to the Set custom color tab to use the color chooser tool:
Note: Product Options do not alter stock or show individual images. After adding swatches, you can use the “Color” product option values to create product variations and add individual images, stock levels, prices, and more to them.
Adjusting the swatch display on the product layout
By default, swatches appear only on the product pages in your online store. You can also opt to display them on the product grid. This way, customers will immediately see the available swatches when browsing your store’s categories.
To adjust the swatch display on the product grid:
- From your Netcash Shop admin, go to Design.
- Scroll down to the Product Card details and layout block.
- From the Color options dropdown, choose Show or Do not show.
- The changes will be autosaved.
Customising swatch shape and size
You can customise the swatch shape and size to fit your store’s style and concept.
This can be with the shape – Circle, Square, and Rounded square options or with the size of the swatch – Small, Medium and Large options
To customise one or both of these:
- From your Netcash Shop admin, go to Design.
- Scroll down to the Color options block.
- Choose the shape from the Swatch shape dropdown and/or select your option in the Swatch size on product details page list:
- The changes will be autosaved.
