Description product page tabs

Solved
Bernard9
Excursionist
19 0 4

Hello!

I managed to relocate the description section under the product in the product page in full width but the process wasn't flawless. I had two tabs in the description, one called "Description" and another one "Coating & Paint". When I clicked on the second one, a new section showed its own content. Now the content of both are merged together and when I click on the second one, the button acts as an anchor and the page jumps to the text where the content of the section starts instead of showing me a new page separately with the content of this section only. I am using the minimal theme.

 

 

Here's the code in product-template.liquid:

 

{% unless section.settings.show_extra_tab == false or pages[section.settings.extra_tab_content] == empty %}
            <div class="tabs">
              <ul class="tab-switch__nav">
                <li>
                  <a href="#description" data-link="description" class="tab-switch__trigger h3">{{ 'products.product.description' | t }}</a>
                </li>
                <li>
                  <a href="#extra" data-link="extra" class="tab-switch__trigger h3">{{ pages[section.settings.extra_tab_content].title }}</a>
                </li>
              </ul>
              <div id="description" class="tab-switch__content" data-content="description">
                <div class="product-description rte" itemprop="description">
                  {{ product.description }}
                
                </div>
             
              </div>
              
              <div id="extra" class="tab-switch__content" data-content="extra">
                <div class="rte">
                  {{ pages[section.settings.extra_tab_content].content }}
                </div>
              </div>
            
          {% else %}
            <div class="product-description rte" itemprop="description">
              {{ product.description }}
            </div>
          {% endunless %}

 

 

Accepted Solutions (2)

Accepted Solutions
pioneer100
Shopify Partner
1102 145 481

This is an accepted solution.

ok i am looking at the problem now

If helpful, Please Like and accept The Solution.

View solution in original post

pioneer100
Shopify Partner
1102 145 481

This is an accepted solution.

-i just removed a extra </div> tag.

-- please give me some likes and mark my last answer as accepted solution

If helpful, Please Like and accept The Solution.

View solution in original post

Replies 21 (21)
pioneer100
Shopify Partner
1102 145 481

-no one here can solve your issue because it requires to see code and debug it therefore  ask a  developer.

--i can fix your issue if you add me as a staff in your store.
email:  candisoft100@gmail.com

 

thank you

If helpful, Please Like and accept The Solution.
Bernard9
Excursionist
19 0 4

Thanks a lot! I have added you as staff.

pioneer100
Shopify Partner
1102 145 481

This is an accepted solution.

ok i am looking at the problem now

If helpful, Please Like and accept The Solution.

View solution in original post

pioneer100
Shopify Partner
1102 145 481

can you give me the product page url in which you have issue?

If helpful, Please Like and accept The Solution.
Bernard9
Excursionist
19 0 4

I can't thank you enough! I was about to give you a link to a product page and I just noticed that it was fixed! Thanks a lot!!!

pioneer100
Shopify Partner
1102 145 481

This is an accepted solution.

-i just removed a extra </div> tag.

-- please give me some likes and mark my last answer as accepted solution

If helpful, Please Like and accept The Solution.

View solution in original post

pioneer100
Shopify Partner
1102 145 481

Thank you for your kindness

If helpful, Please Like and accept The Solution.
Aleksandra1
Tourist
8 0 0

May I ask to see your website because I have been looking forever to try and move the description from the right-hand side of the page to go underneath.

pioneer100
Shopify Partner
1102 145 481
@Aleksandra1 tell me what issue you are facing?

And share page url here.
If helpful, Please Like and accept The Solution.