PRODUCT - Adding an associated product ("buy it with")

1

Open the theme editor and choose "Product pages" in the page selector at the top:

Then, click on the "Default product" template:

2

Under the "Product content" section, click on "Add block" and select "Featured products":

3

Then, for the setting "Products", click on "Select products" and select up to two products you want to feature:

1

We will first need to create metafields. Metafields are additional information you can attach to your products, to save specialized information like related products. To do that, open the settings of your Shopify store, and click on the "Metafields" section:

Click on "Products":

Then click on "Add definition" button to add a new metafield. For the name, enter for instance "Buy it with - product 1" (you can enter any name, but it is a good practice to use a meaningful name so it is easier to edit in the future). Click on "Select content type" and choose "Reference" in the dropdown:

Select "Product", and make sure to check the "Accept list of values" checkbox, and click on Save to save the metafield:

2

Now that we have created the metafields, we will need to connect them in the theme editor.

To do that, open the theme editor and choose "Product pages" in the page selector at the top:

Then, click on the "Default product" template:

Under the "Product content" section, click on "Add block" and select "Featured products":

3

Now, click on the database like icon next to "Products":

Shopify will show the list of metafields. Select the metafield you have created at the previous step:

4

Now that we have connected the metafields, the last thing we need to do is actually select the products we want to highlight on a given product page. To do that, open Shopify admin and select your product in the "Products" part of the admin:

At the very bottom of the product in the admin, you will now find a new "Metafields" category, showing all the metafields you have created in step 1. In our case, we are interested in the "Featured products" metafield (or whatever you have called it). Click on it to select the related product you want to show for this product. Finally, save the product.

1

Open the theme editor and choose "Product pages" in the page selector at the top:

Then, click on the "Default product" template:

2

Under the "Product content" section, click on "Add block" and select "Featured products":

3

For "Product 1" and "Product 2" settings, click on "Select product" and select the product you want to display:

1

We will first need to create metafields. Metafields are additional information you can attach to your products, to save specialized information like related products. To do that, open the settings of your Shopify store, and click on the "Metafields" section:

Click on "Products":

Then click on "Add definition" button to add a new metafield. For the name, enter for instance "Buy it with - product 1" (you can enter any name, but it is a good practice to use a meaningful name so it is easier to edit in the future). Click on "Select content type" and choose "Reference" in the dropdown:

Select "Product", and click on Save to save the metafield:

If you want to show two associated products, repeat this step one more time (but name the new metafields "Buy it with - product 2" for instance).

2

Now that we have created the metafields, we will need to connect them in the theme editor.

To do that, open the theme editor and choose "Product pages" in the page selector at the top:

Then, click on the "Default product" template:

Under the "Product content" section, click on "Add block" and select "Featured products":

3

Now, click on the database like icon next to "Product 1":

Shopify will show the list of metafields. IMPORTANT: make sure that you select "Current page - main product", as what you want is selecting a metafield that belongs to the page main product. By default, Shopify will not open the main product by default:

Finally, select the "Buy it with - product 1" metafield we have created earlier (or whatever you have named it):

If you want to attach a second product, repeat the same process for "Product 2", but by selecting this time the metafield that will hold the second product.

Once you have linked them two, it should look like this:

4

Now that we have connected the metafields, the last thing we need to do is actually selecting the products we want to highlight on a given product page. To do that, open Shopify admin and select your product in the "Products" part of the admin:

At the very bottom of the product in the admin, you will now find a new "Metafields" category, showing all the metafields you have created in step 1. In our case, we are interested in the "Buy it with - product 1" metafield. Click on it to select the related product you want to show for this product. Finally, save the product.

If you have created a second metafield to show the second product, select it or leave it empty. You can now repeat the process by selecting a different product for each of your product page.

Starting from the version 5, we now use metafields to power this metafields. Metafields allow you to save specialized information that is not usually captured by Shopify admin.

1

Open the settings of your Shopify store, and click on the "Metafields" section:

Click on "Products":

Then click on "Add definition" button to add a new metafield. For the name, enter for instance "Buy it with" (you can enter any name, but it is a good practice to use a meaningful name so it is easier to edit in the future). Click on "Select content type" and choose "Reference" in the dropdown:

Select "Product", and click on Save to save the metafield:

2

Now that we have created the metafield, we will need to connect it in the theme editor.

To do that, open the theme editor and choose "Product pages" in the page selector at the top:

Then, click on the "Default product" template:

In the product section, click on "Add block" and select the "Buy it with" block:

Once added, Shopify will reveal the settings of the block. You will need to click on the small database icon that is next to "Product" setting:

Finally, select the metafield you have newly created in step 1. In our example, we have name it "Buy it with", but if you have named it differently at step 1, simply create the one you have created:

3

Now that we have connected the metafield, the last thing we need to do is actually selecting the product we want to highlight on a given product page. To do that, open Shopify admin and select your product in the "Products" part of the admin:

At the very bottom of the product in the admin, you will now find a new "Metafields" category, showing all the metafields you have created in step 1. In our case, we are interested in the "Buy it with" metafield. Click on it to select the related product you want to show for this product. Finally, save the product.

You can now repeat the process by selecting a different product for each of your product page.

1

1) First, you need to find the handle of the product you want to associate. To do that, open the product in Shopify admin, and in the "Search engine listing preview" box at the bottom, locate the handle. The handle is the last part of the URL, after the final slash. In the example below, the handle is le-petit-cartable:

2

2) Then, open the product in Shopify admin to which you want to add the associated product, and add a tag that follows this convention: __with:handle-of-associated-product (please note that it starts by two consecutive underscores). In our example, the resulting tag would be __with:le-petit-cartable