How to Use Shopify Product Variant with PageFly

About Product Variant Element

Summary: Shopify Product Variant element is designed to display the variant of your Shopify products on your page to increase your conversion rate. You can use the Product Variant element to promote your products on any non-product page or on a product page.

You can also watch this video tutorial:

How To Access Shopify Product Variant Element

Follow these steps below to navigate the Product variant element:

• Step 1: Click on the Elements icon in the Element Catalog (left sidebar)
• Step 2: In the Elements section, switch to the Shopify tab and click on the Product Variant element in the dropdown menu
• Step 3: Drag and drop the element into the page editor and then start using it.

Product Variant element comes with five common variations but we will continue to add more variations to help you save time.

How To Configure (Settings) For Product Variant Element

Product Variant element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.

When you drag and drop the Product Variant element into the editor page, there are 2 choices of the Product Source option for you to choose from such as:

• Auto
• Custom Product

On the Product page:

If you drag the Product Variant outside the Product Details, there are two options: Auto and Custom.

If you choose Auto, the Product Variant will be displayed the value of the product assigned for this product page. The Auto option is set to default when you use the Product Variant element.

On the Non-product page:

If you use the Product Variant outside the Product Details, the Product Source is disabled. The Product Variant is automatically displayed as the variant of the Custom Product.

General Tab

Product Source with 2 options as above: Auto and Custom Product. Auto: If you’re on the Product Page, the product assigned to this page will be displayed in the editor. Custom Product: Allows you to select a specific product to display. Note: The Product Source option is unavailable on Regular Pages.
Combined Options: There are 2 options – Enable and Disable Combined Variants. Enable Combined Options: Combine all variants in a line Disable Combined Options: Display every option value separately. Note: Option swatches only work when Disable Combined Options.
Show price: To show or hide the price of each variant. Note: The Show price only shows when the Combine Options has been turned on.
Variants Display: 2 display types of variants: Dropdown menu Radio buttons Variant Image (only show when Combine option on and Option swatches off) Note: The Variants Display only shows when the Combine Options has been turned on.
Option Value Display: You can set up the option value display by choosing either “Radio buttons” or “Variant image” for variants display. Refer to the below settings on how to can adjust display of each option value
Option Value Spacing: Adjust space among option values.
Option value layout: There are two variations: Horizontal Vertical Note: this setting is only available when variant display is “Radio buttons”

If your page has been assigned for two products or more, the product variant will show options for the first product on the products assigned list.

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here.

Styling Tab

You may modify a range of parameters in the Styling tab, such as element size, spacing, borders, typography, colors, and more, to guarantee that the Product quantity element matches the overall layout of your page.

You can check more information about the Styling tab here.

Common Cases

Add Hover State For Variant

To add a hover state for a variant, click on the Option Value, go to the Styling tab, change to the “Mouse over state” option, and adjust the content color and background color for the hover state.

Tips And Best Practices

• Use clear and descriptive option names to help customers easily understand the available variants.
• Provide high-quality images or swatches for each variant to give customers a better visual representation.
• Utilize the “Options Spacing” and “Option Values Spacing” parameters to create a visually appealing and organized layout for the variant options.
• Test different display types (dropdown menu, radio buttons, or variants image) to determine which works best for your products and customers.

Frequently Asked Questions

1. Do I have to add Shopify variant API to be able to use product variants?

No, you don’t need to add the Shopify Variant API as the Shopify Variant is already installed inside your Shopify Admin. You can find and edit these by visiting ‘Product Variants’ under ‘Shopify Element’ in this guide.

2. How to add multiple variants in Shopify?

No, in the meantime, you can only add one by one in the PageFly Admin Dashboard, but you can flexibly choose different types of variants.

3. What is an example of a product variant?

A television with options on resolutions and screen sizes, and a T-Shirt that comes in different colors and sizes.

4. Difference between variants and metafields?

Shopify Product Metafield maintains mostly specifications, including size charts, downloadable documents, release dates, images, and part numbers. On the other hand, Shopify variants offer options for customers to choose.

Version Update

In addition to the traditional page building mechanism (row, column), PageFly 4.16.0 adds Gen 2 Layout, a more flexible and efficient technology that allows creation of complex and highly customizable layouts, which comes with an intuitive and user-friendly interface.

Additional Resources

• Web Design Tips & Tricks For A Professional Site That Converts