Group product style
Group Products as Variants is a feature that allows you to link similar products together to enhance the customer experience.
You can also use it to link related products together and display them as colors, images, buttons, dropdowns.
Connect different variants of a product without using Shopify's variant system
Give each variant its own URL for better Google search indexing
Example 1:
Let’s say you have a T-shirt with 4 attributes:
Colors: Red, Black, White, Blue
You have created it into 4 separate products
T-shirt Red, T-shirt Black, T-shirt White, T-shirt Blue
With product group you can display 4 colors as variants color in product without modifying the variant
Example 2:
Let’s say you have a T-shirt with 4 attributes:
Colors: Red, Black, White, Blue
Materials: Cotton, Regular Fabric, Cotton 50%
Sizes: S, M, L, XL
Gender: Men, Women
In Shopify, you can only create 3 variants for this product. But by using Group Products as Variants, you can link products with different attributes (such as color and material) together. This way, you can display a fourth variant, like the Material option, while keeping all variations connected under one product group.
Style display product group
1. Button
2. Swatch image/color
3. Dropdown list
4. Dropdown list with image/color
5. Image with title product and price
Setting up product group
Setting product group
Name: The name of the product group, used to distinguish it from other product groups in the app.
Option name: Product group labels are displayed at the front of the store, used to identify differences of product in group
Product group style
Show on collection page
Show on product page
Change order display position, image, color, title product
You can move position option show with drag/drop button
Click image to setup new image or choose color hex show
A modal setup color/image for option open, you can set up color codes, or alternative images for the default product main image displayed.
Change the alternative name for the product name, by default we use the product name as option value
Save the product group to complete the setup.
Show product group on online store
1. Enable app embed
Go to theme customize -> find GLOBO Color Swatch -> enable app embed
2. Show on product page
Go to product page -> add block
In tab Apps -> Choose Product Groups of GLOBO Color Swatch
E.g: show on product page
3. Show on collection page
If you want to control the position, use the following code and add it to the prodct item card, note that this action you need to understand the liquid code.App auto show on collection page if you enable on
E.g: show on collection page
Last updated
