Table of Contents
- Introduction
- Understanding Option Icons
- Setting Up Option Icons
- Converting Select Fields to Option Icons
- Creating Colour and Image Swatches
- Displaying Swatches on Product Lists
- Limitations and Requirements
- Conclusion
- FAQs
Introduction
Imagine offering an array of product options to your customers, but they struggle to find or understand these choices. Frustration mounts, and potential sales slip away. Now, envision using visual indicators for these product options – a process that not only enhances user experience but also improves conversion rates. This isn't a mere dream; it's the power of option icons in ecommerce. This post delves into the world of option icons, detailing how their use can revolutionize your product presentation and significantly boost customer satisfaction.
Understanding Option Icons
Option icons serve as visual indicators for product variations, such as size, color, or material. They simplify the shopping experience by presenting choices in a more intuitive and engaging manner. Customers can quickly identify and select product options without sifting through long dropdown menus, making the process more seamless and efficient.
Benefits of Using Option Icons
The use of option icons offers several notable advantages:
- Enhanced User Experience: Visual cues are quicker to process than text, reducing the cognitive load on customers.
- Improved Aesthetics: Icons can make your product pages look more dynamic and appealing.
- Faster Decision Making: Customers can make quicker selections, streamlining the purchasing process.
- Increased Conversion Rates: By enhancing usability, you also boost the likelihood of conversions.
Setting Up Option Icons
Before diving into the specifics of setting up option icons, it's essential to have product variants configured in your ecommerce platform. If you haven't done this, refer to the "How to create Options and Variants" guide available on Bluepark.
Converting Select Fields to Option Icons
By default, new options in the Product Editor on Bluepark are set as Select fields (dropdowns). To switch to Option Icons, follow these steps:
- Navigate to the Options tab in the Product Editor or go to Products > Options from the main menu.
- Click on the Option Name.
- Change the Field type to either Option Icons with select field or Option Icons only.
- Save your changes and preview a product to see the updated option display.
By default, Option Icons will display with their full Value name. For instance, if an option value is "Large," it will show "Large." However, you can customize this by setting Short Values (for example, "L" for Large) within the Value screen in the Product Editor.
Creating Colour and Image Swatches
Colour Swatches
Colour swatches replace text descriptors with visual cues like colored circles or squares. To set these up:
- Go to the Options tab in the Product Editor and click the Edit icon to access the Values screen.
- Enter a HEX code in the Colour field for each value or use the Colour Picker.
- Save the changes.
Image Swatches
For image-based swatches:
- In the Values screen, click the blue folder icon next to the Image field.
- Upload an image. Ensure the images are small (around 100px by 100px) and do not exceed 50kb in file size.
- Save your changes.
Customizing Swatches with CSS
The appearance of colour and image swatches depends on the theme you're using. For advanced customization, users with CSS knowledge can target and alter the icons' size, shape, etc., via the Additional CSS field in the theme settings.
Displaying Swatches on Product Lists
To enhance visibility and make browsing easier, option swatches can be displayed on category pages and within product blocks. This setup allows visitors to see available product variants without needing to click through to the product page. Here's how to enable this feature:
- Go to the Option Editor for your Colour Option.
- Tick the box for Show Colour Swatch in the Displayed in a List of Products section.
- Save the changes.
Once enabled, when a visitor selects a colour swatch and clicks on the image or product title, they will be directed to the specific product variant page.
Limitations and Requirements
It's important to note that the new Option Icons functionality only works with V2 themes on Bluepark. If you're still using a V1 theme, you will need to upgrade to a V2 theme. For more information, check out the "Introducing Bluepark V2 Themes" guide or watch the corresponding video.
Conclusion
Integrating option icons into your ecommerce platform is not merely a cosmetic change but a strategic enhancement aimed at improving the user experience and boosting sales. By replacing text-heavy dropdowns with intuitive, visual cues, you make it easier for customers to make selections quickly and confidently. Whether using colour or image swatches, these icons can significantly impact your product presentation and customer satisfaction.
FAQs
What are option icons?
Option icons are visual indicators for product options, such as color, size, or material, that help streamline the shopping experience for customers.
How do I switch from Select fields to Option Icons in Bluepark?
Navigate to the Options tab in the Product Editor, click on the Option Name, change the Field type to Option Icons, and save the changes.
Can I customize the names displayed for Option Icons?
Yes, you can set Short Values within the Value screen in the Product Editor to display shortened names, like "S" for Small.
How do I create colour swatches?
Enter a HEX code or use the Colour Picker in the Colour field of the Values screen in the Product Editor.
How do I create image swatches?
Upload a small image (100px by 100px, no more than 50kb) in the Image field of the Values screen in the Product Editor.
Do Option Icons work with V1 themes in Bluepark?
No, they only work with V2 themes. You'll need to upgrade your theme to use this functionality.
