Boost Sales with Shopify Product Variants

Table of Contents

1. Introduction
2. Understanding Shopify Product Variants
   • What are product variants?
   • Why are product variants important?
3. Setting Up General Settings for Product Variants
   • Locating the product variant element
   • Adding product variants to the page editor
   • Displaying variants of assigned products
   • Displaying variants of custom products
4. General Settings for Product Variants
   • Combining options
   • Displaying price and variant options
   • Using sold out option
   • Choosing option swatches
   • Displaying option values
   • Adjusting option value spacing
   • Showing option names
   • Positioning option names
5. Styling Configuration for Product Variants
   • Customizing content color
   • Adjusting paddings and margins
   • Changing typography
   • Setting background
6. Conclusion
7. FAQs

Understanding Shopify Product Variants

Shopify offers a versatile feature known as product variants that allows you to display different versions of your products. These variants play a crucial role in boosting your conversion rates. With the product variant element in PageFly, you can easily promote your products on non-product pages or enhance the product page itself. In this video tutorial series, we will explore how to effectively utilize Shopify product variants using PageFly.

Setting Up General Settings for Product Variants

To start configuring the product variant element, locate it in the Shopify element on the left sidebar of PageFly. You will find five product variants to choose from. Pick the one that suits your product details and drag and drop it into the page editor. Make sure the product variant is placed inside the product details section.

If you want to display the variants for products that have already been assigned, simply ensure that the product variant element is within the product details section. On the other hand, if you add a product variant outside of the product details section, you can manually select the product you want to show its variants for. Just head to the product Source option, select custom product, and choose the desired product.

General Settings for Product Variants

There are several general settings you can configure for the product variant element. One of these settings is the "Combine options" feature. Enabling this option allows you to combine all variants in a single line. You can choose from three options to display your variants: drop-down menu, radio buttons, or variance image. If you opt for the variance image option, make sure you have uploaded the relevant images of your products in Shopify.

Another option available is the "Sold out" option. This option informs your customers when a particular variant is out of stock. If you wish to display variants separately even if they are sold out, disable this option. Additionally, you can choose to use option swatches, which require proper configuration of your options. Refer to the tutorial video in the description box for guidance on setting up product variant swatches. If you prefer a normal display of options, simply disable the use of option swatches.

You also have control over the way variants and their values are displayed. You can choose between drop-down menus and radio buttons for selecting values. Moreover, you can choose between horizontal and vertical layouts for the variants. To adjust the spacing between option values, you can modify the option value spacing. The default spacing value is 16 pixels, with a maximum value of 50 pixels.

To provide further clarity, the option name can be displayed alongside the variant values. Enable the "Show option name" option for this feature. You can also specify the position of the option names, either on top of the values list or on the left of the list. Adjusting the options spacing allows you to fine-tune the alignment of the labels.

Styling Configuration for Product Variants

In the Styling tab of the product variant element, you can customize various aspects of its appearance. This includes changing the content color, adjusting paddings and margins, modifying typography, and setting the background. You have the freedom to personalize the font family and font size of the variants to match your website's design. Additionally, you can add padding to the left side of the product variants to provide a balanced layout.

Conclusion

In this video tutorial series, we have explored the functionality and configuration options of Shopify product variants using PageFly. By effectively utilizing the product variant element, you can enhance the presentation and user experience of your products, ultimately boosting your conversion rates. Stay tuned for more informative video tutorials by subscribing to our YouTube channel.

FAQs

Q: What are product variants? A: Product variants are different versions or variations of a particular product. They allow customers to choose between various options, such as size, color, or material.

Q: Why are product variants important? A: Product variants enhance the user experience by providing customers with more choices. This can help increase the conversion rate and cater to individual preferences.

Q: How do I display product variants using PageFly? A: With the product variant element in PageFly, you can easily showcase the variants of your Shopify products on any page. You can also customize the display options, such as using drop-down menus or radio buttons.

Q: Can I show variant images instead of text options? A: Yes, you have the option to display variant images instead of text options. Simply upload the relevant images of your products in Shopify and select the variance image option in the product variant element configuration.

Q: How can I customize the styling of product variants? A: In the Styling tab of the product variant element, you can customize various aspects such as content color, paddings, margins, typography, and background. This allows you to align the appearance of product variants with your website's design.