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.
Thank you in advance for your answers,
Solved! Go to the solution
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.
<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>
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?
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>
<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>
But when I reuse this the tab isn't toggleable, any suggestions on what to do?