PRODUCT - Creating product variations that link to different pages

In Shopify, you can use variants to create different options for a given product. While variants are very powerful, creating completely different products for variations is sometimes desirable. For instance, you may want to create completely different sections, color schema, or content based on the variant but still, be able to link those variations on the identical product page. You can see an example of this feature in our demo by clicking here. As you can see, if you select a variation, you will be redirected to a different product page.

Impact offers a built-in solution to this problem by allowing you to use metafields to link different products.

To use setup this feature, please follow the instructions below:

1

In your Shopify admin, create one individual product for each variation. For instance, if you want to create one product page per color, create one product for every color variation.

2

You will now need to create two product metafields: one that will hold the actual value for the option (for instance, "Red," "Blue,"...), and one metafield that will hold the list of products to show.

To do that, open the Metafields in your Shopify admin and click on "Products":

Then, click on "Add definition" button.

Create the first metafield called "Variation value" by filling the form as shown below, and save:

Click again on "Add definition", and configure the metafield as shown below (make sure to select "List of values" for this metafield type):

3

Now that our metafields are configured, open the theme editor and choose "Product pages" in the page selector at the top:

Then, click on the "Default product" template (the list of templates you see may be different based on how you have configured the theme, so make sure to select the Default template):



Then, click on the "Product page" section:

Finally, click on "Add block" and select "Product variations":

4

For the "Option name" setting, enter the option name you want to use as the variation (here, we are using "Color") and, for the option value metafield, enter the "namespace and key" of the first metafield we have created at step 2. If you did not change the name, you can type custom.variation_value :

Finally, click on the database icon next to Products, as shown in the number (3) in our screenshot, and select the metafield "Variation products" we have created earlier:

5

We have now set up all the features. What is left is filling the information for all our products to create the link between them. To do that, in your Shopify admin, open the first product you want to link, and scroll down to the "Metafields" section:

For "Variation value", enter the option value for the variation (for instance, if you want to create variations based on the color, then variation value should hold the actual color value for this product, such as "Red", "Blue", "Green"...).

Then, for the "Variation products" metafields, select all the product variations that should appear in this product (make sure to include the product itself as well).

Finally, repeat the same process for every variation product by making sure to adjust the variation value for each product (the "Variation products" metafields, on the other hand, should contain the same list of products for every product within a group).