About Product Variant Element
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
- 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.
How To Configure Product Variant Element
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.
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
1. 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.
2. 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. |
|
| Combined Options: There are 2 options – Enable and Disable Combined Variants. Note: Option swatches only work when Disable Combined Options. |
|
| 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: 2 display types of variants:
|  |
| Disable Combined Variants | |
| Options Values Display: You can set up the options display by Dropdown menu, Radio buttons If you turn off the Option swatches, the Options Display applies to all option values. If you 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. |  |
| Show option name: Switch the button to enable/disable the name of the option. |  |
Option name position: There are two options:
Note: The option is only available when the Show option name is enabled. |  |
Options values layout: There are two variations:
|  |
| 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.
Styling Tab
You can customize the styling of the Product Variant element in the Styling tab.
You can check more information about the PageFly Element Styling.
Common Cases
Use Option Swatches
To use Option Swatches for the Product Variant element, click on the Product Variant element, go to the General tab, and make sure to disable the “Combined Options” parameter and enable the “Use Option Swatches” parameter. You can read more about how to create and set up Option Swatches here.
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 “Hover 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
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.
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.
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.
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.
