Product groups setup

About:

Product groups is our theme's solution to presenting different products as a variant to one another. This enables you to have different description, variants, images, you can even use entire new templates to link them together.

In this documentation, we'll find the steps to:

Create the metaobjects definitions:

a. Product groups

b. Product options thumbnails

Connect the products via the "Product groups" metaobject

Set up the "Product groups" in the theme's settings.

In short: In order to set this up, you'll require two separate metaobject definitions, that will make the connection between the products, product variants, and product variants images. We ask that you follow the following steps to the letter to have the desired outcome. We will include both the text and visual steps to have a better view of how it's supposed to look.

Step 1:

Access the store's Settings > Custom Data > Add metaobject definition

Step 2:

Name your metaobject as: Product groups

Step 3:

Add a new field and select "Single line text"

Step 4:

1. In the Name filed, type in: Name
2. Check the box for "Use this field as display name"
3. Click on "One value"
4. Check the box for "Use as filter in metaobject index"
5. Check the box for "Required field"
6. Click "Add"

Step 5:

Add a new field and select "Product"

Step 6:

1. In the name field, type in: Group
2. Select "List of values"
3. Check the box for "Use as filter in metaobject index"
4. Check the box for "Required field"
5. Click "Add"

Step 7:

Add a new field and select "Single line text"

Step 8:

1. In the Name filed, type in: Group by option
2. Select "One value"
3. Check the box for "Required field"
4. Check the box for "Limit to preset choices"
5. In the text field below, type in: Color
6. Click on "Add item" to add a new text field
7. In the second field, type in: Size
8. Click "Add"

Step 9:

Add a new field and select "Single line text"

Step 10:

1. In the Name filed, type in: Thumbnail
2. Select "List of values"
3. Check the box for "Required field"
4. Check the box for "Limit to preset choices"
5. In the text field below, type in: Product image
6. Click on "Add item" to add a new text field
7. In the second field, type in: Custom image
8. Click "Add"

Step 11:

Save your newly created metaobject.

Step 12:

Next, we will set up another metaobject definition for the thumbnails.

Therefore, access the store's Settings > Custom Data > Add metaobject definition

Step 13:

In the "Name field" type in: Product options thumbnails

Step 14:

Add a new field and select "Single line text"

Step 15:

1. In the Name filed, type in: Name
2. Check the box for "Use this field as display name"
3. Click on "One value"
4. Check the box for "Use as filter in metaobject index"
5. Check the box for "Required field"
6. Click "Add"

Step 16:

Add a new field "File"

Step 17:

1. In the name field, type in: Image
2. Select "One file"
3. Check the box for "Accept specific file types"
4. Check the box for "Images"
5. Click "Add"

Step 18:

Save your newly created metaobject.

Step 19:

Go to your theme > Theme options > Custom groups

Step 20:

In the "Metaobject for product groups" field, type in: product_groups

In the "Metaobject for product options thumbnails" field, type in: product_options_thumbnails

In the "Variant options use custom thumbnails" field, type in: Color

Save the theme changes.

Step 21:

Go to your theme's backend > Content > Metaobjects > Product groups > Add entry

Step 22:

1. Name your test entry.
2. Select 2 or more products that can form a group
3. In "Group by option" select "Color"
4. In "Thumbnail" select "Product image"
5. Click save

Step 23:

You can now go to your live product and test your product groups.

Step 22b:

1. Name your test entry.
2. Select 2 or more products that can form a group
3. In "Group by option" select "Color"
4. In "Thumbnail" select "Custom image"
5. Click save

Step 23b:

Go to your theme's backend > Content > Metaobjects > Product options thumbnails > Add entry

Step 24:

1. Name: Use the exact name of your product color variant. Example: Blue
2. Image: Use an image representative of that product color variant.
3. Click "Save"

Note: This option enables you to use specific images for the swatches of the product groups.

Contact Us