Color Swatches & Text Labels for Product Variants: Grab Viewer Attention with this New Feature from Zipify Pages

In our efforts to deliver conversion-proven elements that also provide an enjoyable user experience, we’re happy to announce our newest release: 

Color Swatches and Text Labels for product variants.

Now, you can improve the look and feel of your product pages with colorful, eye-catching variant selectors.

Previously, if you wanted to use these variant selectors on your product pages then you had to code them yourself or hire someone to do it for you.

But now, these variant styles are available with just a few clicks inside the Zipify Pages builder. 

Here’s why you should use these new variant styles and how to set them up! 

What Makes Color Swatches & Text Labels So Effective?

A study by the Baymard Institute showed that buttons and swatches outperformed conventional drop-down variant menus on product pages. 

Why did these product variants perform so well? Reasons include: 

  • Shoppers see all their options right away
  • Colors attract viewers’ attention 
  • Easily recognizable and intuitive design

We also learned that 28% of desktop sites don’t use swatches or labels, so if you do have them, it could be one more reason to shop from you over the competition — and these things add up! 

How To Use Zipify’s New Product Variant Styles

These new variant styles are available for the newly added Dynamic Buy Boxes. If you don’t see the variant style options in the buy box editor, you may need to re-add the block to access the newest version.

Once you’ve added the buy box to your page and selected the product and desired variants, click on the variant section of the builder: 

Buy Box product variant section highlighted inside the page builder.

This will open the list of editable variant elements.

Under the “Appearance” section, you can modify the font name, size, style and color of the variant label. 

Learn more about this section by visiting our dynamic buy box help documentation.

"Appearance" section of the product variant editor.

Right below the “Appearance” section, you can select the “Type” of variants displayed: 

"Type" section of the product variant editor.

Color Swatches: Add a specific color for each variant. We recommend choosing a color that matches the color of your product: 

Color swatch editor for product variant inside Zipify Pages.

Text Labels: Show the variants in text boxes rather than a drop-down. Each variant has its own text box that can be edited to match your brand’s look: 

Text Label variant editor inside Zipify Pages.

Finish by saving your style changes! 

On the live page, you’ll see the new variants displayed above the buy button. Here’s an example of the text label variants: 

Live example of the Text Label variants on the BOOM! site.

We recommend testing these 2 new variant options against the traditional drop-down menu to see which performs best for you. 

We’re currently testing these new product variants on our own site, and we look forward to sharing our results soon.

Get Started Now

With the new product variant options, you can help improve conversions by bringing more color and style to your product pages!

Leave your traditional drop-down menu behind and leverage the eye-catching visual elements conveniently built into our page builder.

If you’re a member of Zipify Pages, log in now to start using the “Color Swatch & Text Label” product variants. Also, would you please do us a huge favor by leaving an honest review in the Shopify App store? We love to hear from our users.

Not a Zipify Pages member? Start leveraging conversion-proven templates on your store today: visit the Shopify App Store to start your free 14-day trial. 

This is Brittany — thanks for reading!

Try Zipify Pages

TRY FREE FOR 14 DAYS | 100% MONEY-BACK GUARANTEE

Don’t miss our latest app updates...

Join over 89,000 subscribers who follow the Zipify blog and start getting more from your Shopify store.

Zipify will not sell or spam your email, you can opt-out at any time.