Add Collapsible Button on Product page

Solved
SylwiaK
Excursionist
21 0 7

Hi everyone,

I've been looking for a way to add a collapsible button on the product page (under the "Add to cart" button.

I am using the Prestige theme and I don't seem to be able to locate that feature.

One thing that I tried was to add a variant on a product page but then what was displayed wasn't what I was looking for.

This is an example of the collapsible button I am looking for.

SylwiaK_0-1626723785605.png

 

Thank you in advance for your answers,

 

Sylwia

 

0 Likes

This is an accepted solution.

I checked and theme supports this: https://i.imgur.com/W1CVb7n.png
You just need to go to snippets > product-tabs.liquid file and add a structure similar to that, it will work fine.
Ex:
<div class="Collapsible Collapsible--large">
<button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
Delivery <span class="Collapsible__Plus"></span>
</button>
<div class="Collapsible__Inner">
<div class="Collapsible__Content">
<div class="Rte">
Delivery Content
</div>
</div>
</div>
</div>

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
SylwiaK
Excursionist
21 0 7

Thank you for providing me with a perfect solution!

0 Likes
PetterH
Tourist
6 0 2

Hi! I'm also looking for a similar solution, I tried this one and it's very good but I would like to have and right arrow ">" to the left before the text instead (see picture), do you know how I can solve that? 

Skärmavbild 2021-08-01 kl. 10.59.29.png

I have a side on my page that have this effect and the code is:

<div class="Faq__Item Faq__Item--lastOfSection" aria-expanded="true">
<span class="Faq__Icon"><svg class="Icon Icon--select-arrow-right" role="presentation" viewBox="0 0 11 18">
<path d="M1.5 1.5l8 7.5-8 7.5" stroke-width="2" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="square"></path>
</svg></span>

<div class="Faq__ItemWrapper">
<button class="Faq__Question">What shipping carriers do you use?</button>

<div class="Faq__AnswerWrapper" aria-hidden="false" style="height: auto;">
<div class="Faq__Answer Rte">
<p>We use all major carriers, and local courier partners. You’ll be asked to select a delivery method during checkout.</p>
</div>
</div>
</div>
</div>

But when I reuse this the tab isn't toggleable, any suggestions on what to do? 

0 Likes