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

This article only applies to the themes   Prestige and Focal v8 only.

Our themes Prestige and Focal v8 allow attaching hand-picked products on product pages. This can be used as a cross-sell feature or for clothing brands. The instructions depend of the theme you are using. Please make sure to click on your theme below.

Focal v8

In Focal, you can select up to two products that are shown next to the main product, as shown below:

There are two ways to add this: you can either show the same two products on every product page, or you can select different products per product. Please select the appropriate section below:

Showing the same linked products on every product page
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:

Showing different linked products for every product page
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.

Prestige

In Prestige, the associated product is shown below the product images. You can only add one per product:

IMPORTANT, PLEASE READ THIS BEFORE: the instructions are different based on the version. To know more about which version of the theme you are using, please click here to see the instructions. Then, make sure to select the instructions that apply to your version. Using instructions that do not apply to your version will not work.

I am using version...

Prestige v5

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.

Prestige v1, v2, v3 or v4
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