How to display option icons

26 July 2024 | lisa

What are option icons?

Option Icons serve as visual indicators for product options. They offer a number of advantages to your products and increase good user experience overall. Some of these advantages are:

Enhance the visual appeal of a product page by incorporating an interactive colour component.
Improve the layout of a product section, as icons are a space-efficient way to present multiple options, compared to text and drop-downs.
Allows visitors to see all choices immediately, without having to interact with the page.
Provide more accurate depictions of colours and patterns, ensuring consistency between the product's appearance on the website and the brand's aesthetic.

On Bluepark, these can be displayed as text button-style icons, colour swatches or image swatches.

Midi dress product page showing option icons

How to use option icons?

Firstly, you need to set up your Options to create your product Variants. If you don't have these setup yet, please read our How to create Options and Variants guide.

By default, new Options created from the Product Editor are set as Select fields (drop-downs). To change these to Option Icons, click on the Option Name in the Options tab of the Product Editor or go to Products > Options in the main menu.

Here, you can change the Field type of the Option to Option icons with select field or Option icons only. Once set, click Save and then review a product with this Option to see the changes.

Default option icons displayed with their values in text

By default, Option Icons are displayed with their full Value name. However, if you wish to show a shortened name, such as S for Small, M for Medium and L for Large, this can be set by adding Short Values within the Option's Values screen in the Product Editor.

Option icons can also be used with Additions, when they're set to Option icons with select fields or Option icons only and are set up as they are on Variants. Just create your Addition first and then go to the Option Values tab to set your colour or image swatches or short codes.

Colour swatches

Additionally, swatches are also available, such as showing a small red circle or square, instead of written text of 'Red'. To do this, in the Product Editor, go to the Options tab and click the Edit icon to access the Values screen.

For Colour swatches, simply text a HEX code into Colour field for each value or select a colour from the Colour Picker that appears once you click into the Colour field.
Colour swatch option icons showing the colour hex code used

For Image swatches, click the blue folder icon next to the Image field to upload an image. When using images, it is best practice to keep them as small as possible, in both image size and file size, and keeping them all square. 100px by 100px is a decent size for swatch images and they should be no larger than 50kb in file size. Image swatch option icons showing the image uploaded

The style of colour and image swatches is dependent on the theme. Users with good knowledge of CSS can target the icons to change their size, shape, etc in the Additional CSS field in the theme.

Colour swatches on product lists

Option swatches can be displayed on category pages and within product blocks underneath the relevant products. This makes it easier for visitors to know that there are Options available on that product and allow them to see the Variant Images for each one without having to click into the product page.

Once the visitor has selected a colour swatch, and then clicks on the image or product title, it will immediately take them to that Variant on the product page.

To display swatches on categories and product blocks, navigate to the Option Editor for your Colour Option and tick Show Colour Swatch in the Displayed in a List of Products section. These swatches will only display on category pages or on blocks when ALL values of that option have either a Colour swatch or Image swatch input.

Please note, the new product Option Icons only work with V2 themes. If you are still using a V1 theme on your site, you will need to upgrade to a V2 theme in order to use it. We recommend watching our Introducing Bluepark V2 Themes video and having a read of our Introducing Bluepark V2 Themes guide before you start.