I have an app that is being placed on multiple product pages

Store Design
, , , ,
1

Hi guys, this might be the wrong place to post this and I may have to speak directly to the app support team though I will try anyways. I am using an app named ‘section store’ I have bought ‘product tabs #5’. I have made 3 sections in the header as you shown in the picture below, I then create a custom liquid and paste the code into my product information section on each product page. The problem is that all of the product tabs continuously show on each product page and I dont know how to make it only 1 or the other.

How can I have a separate product tab section for each product page without it overlapping?

URL: Hygiadental.com

Thank you in advance!

3 product tabs for 3 productss
3 product tabs for 3 productss604×498 23.1 KB

product tabs are showing on all product pages instead of just each one I want
product tabs are showing on all product pages instead of just each one I want2190×1490 225 KB

2

You’re seeing all the product tabs on every product page because the code you added isn’t filtering them by product. Right now, the custom liquid section is likely loading all the tab sections globally, instead of linking them to specific products.

To fix this, you need to make sure that the tabs only show when they match the current product

{% if product.handle == 'sterilization-tablets' %}
  {% render 'product-tabs-sterilization' %}
{% elsif product.handle == 'another-product' %}
  {% render 'product-tabs-another' %}
{% endif %}

This way, each product page will only show the correct product tabs instead of all of them at once