How to Display Option Icons: A Comprehensive Guide

Table of Contents

  1. Introduction
  2. What Are Option Icons?
  3. How to Use Option Icons?
  4. Using Colour and Image Swatches
  5. Displaying Colour Swatches on Product Lists
  6. FAQs

Introduction

Imagine shopping online and easily visualizing product options with just a glance. This is the power of option icons, a feature that significantly enhances the user experience on e-commerce platforms. Whether it's showing a red dress through a color swatch or indicating size variants with clear icons, these small visual elements can make a significant difference. But how exactly do you set them up and optimize their use on your product pages?

This blog post will dive deep into what option icons are, how they can improve your online store, and guide you step-by-step on implementing them. By the end of this read, you'll have a clear understanding of how to transform your product pages into more engaging and user-friendly shopping experiences.

What Are Option Icons?

Option icons serve as visual indicators for product options such as size, color, and style. Instead of listing these options in a traditional drop-down menu, you can display them as icons, swatches, or even small images. These visual cues help shoppers quickly identify and select product variants, making their shopping journey more intuitive and enjoyable.

Benefits of Option Icons

Option icons offer several advantages for e-commerce sites:

  1. Enhanced User Experience: They provide visual clarity, helping users quickly understand what options are available.
  2. Quicker Decision Making: Shoppers can instantly see the product variations, reducing the time spent looking for specific options.
  3. Improved Aesthetics: Option icons add a visual element to your product pages, making them more attractive and engaging.

How to Use Option Icons?

Before diving into the setup, make sure you have your product options and variants ready. If not, follow a guide on creating options and variants for an overview.

Setting Up Option Icons

Here's a detailed step-by-step guide to set up option icons:

  1. Access Product Editor: Navigate to your product editor on your e-commerce platform.
  2. Change Field Type: Within the product editor, locate the Options tab. Click on the option name you want to change.
  3. Select Field Type: Choose between 'Option icons with select field' or 'Option icons only' from the field type dropdown menu. This will set your options to display as icons rather than a traditional menu.
  4. Save and Preview: Save your changes and preview a product featuring this option to see how the icons appear.

Customizing Option Names

By default, option icons will display the full value name, such as 'Small' or 'Large'. However, you can abbreviate these labels:

  1. Navigate to Values Screen: Go to the Values screen in the Product Editor's Options tab.
  2. Set Short Values: Enter short values for each option, like 'S' for Small, 'M' for Medium. This abbreviated form will be displayed on your icons.

Using Colour and Image Swatches

Color and image swatches can further enhance the user experience by providing visual representations of product variants.

Setting Up Color Swatches

  1. Access Values Screen: Navigate to the Values screen from the Product Editor.
  2. Enter HEX Code: In the color field, either type the HEX code or select a color from the color picker. This will display a small circle or square in the specified color.

Setting Up Image Swatches

  1. Upload Image: Click the blue folder icon next to the image field to upload a corresponding image.
  2. Optimize Image: Ensure that images are small in both dimensions and file size. Aim for 100px by 100px dimensions and a file size under 50kb for optimal performance.

Customizing Swatch Style

The style of your swatches—such as size and shape—is dependent on the theme. If you have CSS knowledge, you can use the Additional CSS field in your theme settings to customize these further.

Displaying Colour Swatches on Product Lists

Color swatches can also be displayed on category pages and within product blocks, providing users with a preview of available options without clicking into each product.

Steps to Display on Category Pages

  1. Access Option Editor: Navigate to the Option Editor for your color option.
  2. Enable Display: Tick the 'Show Colour Swatch in the Displayed in a List of Products' section. This will enable the color swatch feature for category pages and product blocks.

Note: This feature is only compatible with V2 themes. If your site uses a V1 theme, you'll need to upgrade to take advantage of this functionality.

FAQs

What Are Option Icons?

Option icons are visual indicators representing different product options like size, color, and style. They replace traditional drop-down menus with more intuitive visual elements.

How Do I Set Up Option Icons?

To set up option icons, navigate to the Product Editor, change the field type to Option Icons, and save your settings. You can also customize the display names to abbreviate option titles.

Can I Use Images for Option Icons?

Yes, you can use images for option icons. Upload the images in the Values screen of the Product Editor, ensuring they are optimized in size and dimensions.

Are Colour Swatches Customizable?

Absolutely. Color swatches can be customized using HEX codes or a color picker. Their display style can be further refined using CSS.

Do Option Icons Work with All Themes?

Option icons are compatible with V2 themes. If you're using a V1 theme, an upgrade is necessary to utilize option icons.

In conclusion, utilizing option icons on your e-commerce site can significantly enhance user experience, streamline product selection, and aesthetically elevate your product pages. By following this guide, you can effectively set up and customize option icons, ensuring your online store offers a seamless and engaging shopping journey.