How to Display Option Icons

Table of Contents

  1. Introduction
  2. What are Option Icons?
  3. Setting Up Option Icons in Bluepark
  4. Displaying Swatches on Product Lists
  5. Real-Life Application and Best Practices
  6. Conclusion
  7. FAQs
Shopify - App image

Introduction

Are you looking to enhance your e-commerce product listings and improve user experience? One effective way to achieve this is by utilizing option icons. These small visual elements can significantly enhance the way product options are displayed and interacted with on your site. In this blog post, we delve into the mechanics of setting up and effectively using option icons, particularly within the Bluepark platform.

Option icons can appear in various forms, including text buttons, color swatches, or image swatches. They are designed to make product options more visually appealing and easier to navigate. This blog will guide you through the essential steps to set up these option icons and offer valuable tips to optimize their usage for better user interaction. By the end, you'll understand why integrating option icons is crucial and know how to implement them seamlessly.

What are Option Icons?

Option icons are visual representations used to denote different product variations such as size, color, or style. Unlike traditional dropdown menus, option icons can transform the user experience by making product selection more intuitive and engaging. Common types of option icons include text buttons, color swatches, and image swatches.

Benefits of Using Option Icons

  1. Enhanced User Experience: By providing a visual context, users can quickly identify available product variations without unnecessary clicks.
  2. Improved Product Discovery: Options become more apparent on product list pages and can draw users into exploring more.
  3. Aesthetic Appeal: Well-designed option icons can significantly improve the visual appeal of your product listings.

Setting Up Option Icons in Bluepark

To begin using option icons, you need to have product variants created. If this step is not done yet, refer to the "How to Create Options and Variants" guide on Bluepark.

Steps to Set Up Option Icons

  1. Accessing Options:

    • Navigate to the Options tab in the Product Editor or go to Products > Options in the main menu.
    • By default, new options are set as Select fields (drop-downs).
  2. Changing Field Type:

    • Click on the Option Name in the Options tab.
    • Select "Option icons with select field" or "Option icons only" under Field type.
    • Save changes.
  3. Customizing Option Names:

    • Full Value names are default but can be shortened (e.g., S for Small, M for Medium).
    • Adjust these in the Option's Values screen in the Product Editor.

Adding Color and Image Swatches

Swatches can add a significant visual element to your product options, especially for attributes like color.

  1. Color Swatches:

    • Go to the Options tab and click the Edit icon to access the Values screen.
    • Enter a HEX code in the Color field or pick a color from the Color Picker.
  2. Image Swatches:

    • Click the blue folder icon next to the Image field to upload an image.
    • Ensure images are small (100px by 100px and under 50kb).

Customizing Swatches with CSS

If you are well-versed with CSS, you can further customize the appearance of these swatches:

  • Change their size, shape, etc., through the Additional CSS field in the theme settings.

Displaying Swatches on Product Lists

Displaying swatches on category pages or within product blocks makes it easier for visitors to recognize available options without diving into product detail pages.

Steps to Display Swatches on Categories and Product Blocks

  1. Navigate to Option Editor:

    • Find the Option Editor for your color option.
    • Check the "Show Color Swatch" box in the Displayed in a List of Products section.
  2. Automatic Navigation:

    • Once a visitor selects a color swatch and clicks on the image or product title, they will be directed immediately to that specific variant page.

Important Considerations

  • V2 Themes Compatibility: These new product option icons work only with V2 themes. Upgrading from V1 to V2 is necessary. Watch the "Introducing Bluepark V2 Themes" video and read the corresponding guide for a smooth transition.

Real-Life Application and Best Practices

Case Study: Apparel Industry

In an online clothing store, displaying option icons can help users quickly select sizes and colors without toggling multiple dropdown menus. For instance, customers can see color swatches directly on the category page, click on their preferred color, and get taken straight to the product page showing only the selected variant. This process significantly reduces the friction usually involved in online shopping.

Best Practices:

  1. Consistency: Keep swatch sizes uniform across all products.
  2. Performance Optimization: Ensure images are optimized for fast loading.
  3. User Guidance: Provide tooltips or hover effects to guide users on what each icon represents.

Conclusion

Integrating option icons into your e-commerce product listings is a smart move to enhance user experience and streamline product selection. By creating a more interactive and visually appealing interface, you can improve engagement and potentially boost conversion rates. Follow the steps outlined in this post to implement option icons efficiently on your Bluepark site and see how this small change can make a significant difference.

FAQs

Q1: What file size should image swatches be? A1: Keep image swatches no larger than 50kb and dimensionally small (about 100px by 100px).

Q2: Are option icons compatible with all Bluepark themes? A2: No, option icons are compatible only with V2 themes. You may need to upgrade from a V1 theme to utilize this feature.

Q3: How can I customize the appearance of the swatches? A3: Users with good CSS knowledge can modify the swatches' size, shape, and other attributes through the Additional CSS field in the theme settings.