complementary products block

[Edward_Wong2]

Hi all,

May i know that which theme support complement products block? I found that there is webpage mentioned add complementary product under theme customisation but i can't find it on "Dawn" version theme. 

https://help.shopify.com/en/manual/online-store/themes/customizing-themes/add-complementary-products

[spookiesdream]

I need the same answer!

[heavyjpdx]

Same here. Using Expanse theme and there is no "Complementary Products" block.

[olys]

I need thisssss answer too~~~~~~ anyone could help PLEASE

[snarggles]

I would like to know too. I'm using Dawn and it doesn't include Compelmentary Products.

[nadinethery · Accepted solution]

Hi there!

To use Dawn's solution to recommendations, use the "complementary" case you will find inside the main-product.liquid file.

However, you can create your own component using the snippet that comes in the documentation. 

The only thing that determines whether the result are the recommendations or the complementary products is basically the 'intent' parameter defined in the URL for the section rendering.

<div
  class="product-recommendations"
  data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ section.settings.limit }}&intent=complementary"
>
...
</div>

<div
  class="product-recommendations"
  data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ section.settings.limit }}&intent=related"
>
...
</div>

[robytonight12]

Hi Nadinethery! Thank you very much for your answer. I am not a developer and so it's not clear how to fix this. I am into the main-product.liquid file but I couldn't find "product-recommendations" anywhere. In the Default Product page I have only the "Related products" block. Not the recommendations and not the complementary, that is what I need. Appreciate your help. Thanks!

[nadinethery]

Hi Roby, 

The version I downloaded of Dawn's theme, includes a <product-recommendations> tag inside the main-product.liquid.

If you don't find this, and assuming that your theme already supports this, you can try looking for a section file called product-recommendations.liquid

Sorry, it's hard for me to give you more instructions without knowing your theme or involving coding 😅

[RSL1]

So do you replace the bottom text that has the "intent-related" with the top information? I'm struggling to find this code in the dawn template. 

[nadinethery]

Yes, you need to change the part `&intent=`  with `complementary` or `related` depending on your need. I am unaware of last Dawn's updates, but it's easier to find code if you use an IDE software like Visual Studio Code. This needs a bit of coding skills to understand what's going on in the theme. I am afraid.