How to Use Shopify Product Variant with PageFly

Note: Option Swatches feature has been released that allows merchants to display all their product variants in a number of different ways

1. About Product Variant ElementClick to copy

1.1. What is Shopify Product Variant?Click to copy

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 use it on a product page.

You can also watch this video tutorial:

1.2. Access Shopify Product Variant ElementClick to copy

  • Step 1: Click on the 3rd icon in the Element Catalog which is the Add Shopify element function
  • Step 2: Click on the Product Variant element in the dropdown menu
  • Step 3: Drag and drop the element into the page editor and start using it.

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

Note that you can search for this element by using the search function instead of finding it in the sidebar.

product variants

2. ConfigurationClick to copy

2.1. Option Swatches SettingsClick to copy

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

To access the Option Swatches feature:

Step 1: Head back to PageFly Dashboard > Click on Extra functions on the left sidebar > Select Manage.

product variant

Step 2: Click the Add option swatch button, the screen will show all options in your store.

product variant

Step 3: Select all options that needed to adjust > Hit the Add option. You can search for the option by name in the Search field.

product variant

Click on the Display type dropdown button, you’ll see there are 6 option types to display:

  • Label
  • Color
  • Custom image
  • Variant image
  • Radio buttons
  • Dropdown

product variant

For example, in the Style swatch, here are detailed explanations about the Display type option.

CONTENT

2.1.1. LabelClick to copy

Option values will be displayed as text labels.

product variant

2.1.2. Color

Choose the color of the variants.

product variant

2.1.3. Custom image

Select a custom image for variants. You also can edit and manage these images here.

product variant

2.1.4. Variant Image

Apply the image you set for variants in the Shopify store admin.

product variant

2.1.5. Radio Buttons

Option values will be displayed as radio buttons. You can configure the styling in the page editor.

product variant

2.1.6. Dropdown

Option values will be displayed as dropdown menus. You can configure the styling in the page editor.

product variant

You can configure the Styling on Page Editor.

Note that 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.

color swatches is outdated

After selecting the type for all variants, hit the Save button on the bottom right.

2.2. Product Variant SettingsClick to copy

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

After adding the Product Variant element into the Editor, you’ll see the General tab in the right sidebar.Please note that, if there’s a product with NO variant, the Page Editor will hide all parameters relevant to Variant settings.

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

Note: If the Product Variant is inside the Product Details, the Product source will always be in the Auto option and will take the value of the product that has been assigned!

product variant

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

product variant

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.

product variant

2.2.1. General TabClick to copy

Content
Product Source with 2 options as above: Auto and Custom Product.
  • Auto
  • Custom

Combined Options: There are 2 options – Enable and Disable Combined Variants.Note: Option swatches only work when Disable Combined Options.
  • Enable Combined Options: Combine all variants in a line

  • Disable Combined Options: Display every option value separately.

Enabled Combined Variants
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: Three display types of variants:
  • Dropdown menu
  • Radio buttons
  • Variants image
Sold Out Text: Insert the text you want to be displayed to inform customers when the variants of products are sold out.
Disable Combined Variants
Options Values Display: You can set up the options display by Dropdown menu, Radio buttons

If turn off the Option swatches, the Options Display is applying to all option values.

If turn on the Option swatches and option value doesn’t have the setting on Swatches manager, the option value will take the settings the type of Option Values Display.

Option Values Spacing: Adjust space among option values.
<pShow option name: Switch the button to enable/disable the name of the option.
Option name position: There are two options:
  • Top
  • Left

Note: The option is only available when the Show option name enables.

Options values layout: There are two variations:
  • Horizontal
  • Vertical
Options Spacing: Adjust space among option groups.

Note: This parameter will work if the product has at least two options.

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.

2.2.2. Styling TabClick to copy

You can customize the styling of the Product Variant element in the Styling tab.

product variant

You can check more information about the PageFly Element Styling.

3. Frequently Asked QuestionsClick to copy

3.1. Do I have to add Shopify Variant API to be able to use Product Variants?Click to copy

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

3.2. How to add multiple variants in Shopify?Click to copy

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.3. What is an example of a product variant?Click to copy

Television with options on resolutions and screen sizes and a T-Shirt comes in with different colors and sizes.

3.4. What is option swatches in Shopify?Click to copy

Option Swatches in Shopify make it easier to view product variants at a glance.

3.5. Difference between variants and metafields?Click to copy

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

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us