How to custom option swatches for product variants?

Overview

Option swatches are visual elements that allow customers to easily select product variants, such as color or size, directly on the product page. Instead of just seeing text descriptions for different options, customers can view small images, colored boxes, or labels that represent each variant.

Requirements

To use the option swatches feature, your Shopify product must have at least one variant. Read more about how to add variants for your Shopify product here.

How To Access Option Swatches

To access the Option Swatches feature, in the PageFly Dashboard, go to the “Extra functions” in the left sidebar, then select the “Manage” button next to “Option Swatches“.

How to Configure Option Swatches Settings

This video tutorial will guide you on how to set up Product swatches options:

Step 1: Add Option Swatch

• Click the “Add option swatch” button, and the screen will show all the options available in your Shopify store.

• Select the options you want to display as swatches, and click “Add option“.

Step 2: Configure Display Type

For each option, you can choose from six different display types:

1. Label: The option values will be displayed as text labels.

2. Color: Choose a solid color to represent the variant.

3. Custom Image: Select a custom image to represent the variant.

4. Variant Image: Use the image you have set for the variant in your Shopify store admin.

5. Radio Buttons: The option values will be displayed as radio buttons, which you can style in the page editor.

6. Dropdown: The option values will be displayed as a dropdown menu, which you can also style in the page editor.

After selecting the appropriate display type for each variant, click the “Save” button to apply the changes.

Use Cases

Update Data For Option Swatches

If you make any change to products in the Shopify store, the Option swatches feature will show the notification “Data outdated” and show all the changes that you have made in Shopify.

To update data, click the “Update data” button, the page will reload again and show all valid data in your Shopify store at the moment.

Using Option Swatches In The PageFly Editor

To enable option swatches in your PageFly page, follow these steps:

1. In the PageFly editor, drag and drop the “Product Variant” element onto the “Product Details” section of your page canvas.
2. In the “General” tab of the Product Variant settings, select “No” for the “Combine options” parameter and “Yes” for the “Use option swatches” parameter.

This will display the selected display type for the variants of that product. The available display types include label, color, custom image, variant image, radio buttons, and dropdown.

Customize Option Swatches Value

After enabling the option swatches feature, you can further customize the appearance of the option values:

1. Click on an individual option value in the PageFly editor.
2. Navigate to the “Styling” tab to customize the outlook of the option value.

For detailed information on styling options for the option swatches, please refer to the PageFly documentation.

Tips And Best Practices

• Choose display types that best represent the product variants. For example, use color swatches for color options and label options for size options.
• Ensure that the custom images or variant images you use are high-quality and consistent in size and appearance.
• Consider the overall aesthetic of your product page and choose display types that complement your branding and design.
• Test the option swatches on different devices and screen sizes to ensure they are easy to view and interact with.
• Regularly update the option swatches if you make changes to your product variants in the Shopify store. The “Data outdated” notification will alert you to any necessary updates.

Frequently Asked Questions

1. Can I customize the styling of the option swatches beyond the built-in display types?

Yes, you can further customize the styling of the option swatches in the PageFly page editor. This allows you to adjust the size, shape, colors, and other visual properties to match your overall design.

2. What happens if I add a new variant to my Shopify product?

When you add a new variant to your Shopify product, the “Data outdated” notification will appear in the PageFly option swatches settings. Simply click the “Update data” button to ensure the new variant is reflected in your option swatches.

3. Can I use option swatches for all types of product variants, such as size, color, and material?

Yes, the option swatches feature in PageFly is flexible and can be used to display various types of product variants, including size, color, material, and more. Choose the display type that best represents each variant.

4. Do option swatches improve the user experience for my customers?

Yes, option swatches can significantly enhance the user experience by making it easier for customers to visualize and select the product variants they want. This can lead to higher engagement, fewer abandoned carts, and ultimately, more sales.