Product variant
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.
|
Product Source with 2 options as above:
- 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.
Combined Options with 2 options as above:
- Enable Combined Options: Combine all variants in a line
- Disable Combined Options: Display every option value separately.
Show price: To show or hide the price of each variant.
Variants Display: 2 display types of variants: - Dropdown menu - Radio buttons - Variant Image (only show when Combine option on and Option swatches off)
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
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.23.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.
Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model (slot plans).
Additional Resources
Last updated
Was this helpful?