Code added in product-template.liquid file for clickable vendor showing in ALL tabs

Technical Q&A
1

Hi there, I have finally managed to get the vendor to appear as a clickable link in the tab section of my product page. But I am now facing the problem that rather than it only appearing in one tab (the tab I intended for the vendor) it appears in all tabs on my product pages. How do I manage to have it only appear in the one tab I want it to show in?

Also, how can I center tab content?

I am using the Impulse theme. Here is a preview link: https://kmzi09wgr405cf7x-10223261.shopifypreview.com

2

Hi @SenSinsations ,

I checked and it only shows on 1 tab, can you explain more about showing on multiple tabs?

  • With center: Go to Assets > theme.css and paste this at the bottom of the file:
.product-block--tab .product__brands {
      text-align: center !important;
}

Hope it helps!

3

@LitExtension I have now made the theme live. I came up with a workaround to get the update live (I was already a week behind schedule). I removed it from the tab section, added a full-width details section, and added a tab there since this is a separate section and snippet from the other tab section. I added the code into the full-width detail tab, and it works well. But to explain the multiple tab issue for future knowledge on my part if you can give a solution. Once I added the code, the brand/vendor was showing in every tab to the right of my product image, not including the description tab since that is technically a separate section in the code. So the brand would appear in the shipping tab, the fabric and care tab; at the time, I had a vendor tab in which it also appeared. If I added any other tabs to that same section, it would appear in those too.

As for centering the information, how can I do this for all tabs rather than just one?

If you care to see the workaround, here is a link to a live product page: https://sensualsinsations.com/collections/new-arrivals/products/fuchsias-sheer-embroidered-set

4

Hi @SenSinsations ,

Please add code:

.product-block--tab .collapsible-content__inner {
      text-align: center !important;
}
  • With all tabs: Can you send me the code of the tab where you add the code and it shows create every tab, I will help you to add conditions to it
5

@LitExtension

{%- when ‘tab’ -%}

{% assign tab_id = block.id | append: product.id %} {% capture tab_content %} {{ block.settings.content }} {{ block.settings.page.content }} {% endcapture %} {%- render 'tab', id: tab_id, title: block.settings.title, content: tab_content -%}
6

Hi @SenSinsations ,

I don’t see the vendor code, did you add it here?

Can you include the vendor code you added before? I will check it.

7

@LitExtension I have removed it from this tab area because I placed it in the full-width details section where I added a tab. I am happy with the outcome. Thank you for your help, I really appreciate it.