Liquid, JavaScript, themes, sales channels
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.
Thank you in advance for your answers,
Sylwia
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.
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>
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>
Thank you for providing me with a perfect solution!
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>
</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?
Anyone know if there is a way to make a tabe auto-expanded? I am using one of the tabs as the description but I would like it to start expanded
I tried changing aria-expanded="false" to true and it shows the '-' rather than the '+' but the tab is still not expaned
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024