Welcome to CodeCrew Infotech
Minimal Theme-How To Create Collapsible Accordion For Product Description
If you want to some extra things for the your product in shopify then adding a collapsible accordion for the product description.This will help you to break the longest description into small parts likes you wan to one part for design one part for size guide one part for delivery status many more...
Step 1: First add the below script to the theme.liquid file.
Paste this script line below <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
if you want top letest script then you can download online
Step 2: Then Add CSS code to theme.scss and save it.
|
.accordion { margin: 1rem 0; padding: 0; list-style: none; border-top: 1px solid #e5e5e5; } .accordion-item { border-bottom: 1px solid #e5e5e5; list-style: none !important; } .accordion-thumb { margin: 0; padding: 0.8rem 0; cursor: pointer; font-weight: normal; } .accordion-thumb::before { content: ''; display: inline-block; height: 7px; width: 7px; margin-right: 1rem; margin-left: 0.5rem; vertical-align: middle; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(-45deg); transition: transform 0.2s ease-out; } .accordion-panel { margin: 0; padding-bottom: 0.8rem; display: none; } .accordion-item.is-active .accordion-thumb::before { transform: rotate(45deg); } |
Step 3: Open the theme.js file and paste this below js code.
|
$(function() { $(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown(); $(".accordion > .accordion-item").click(function() { $(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp(); $(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out"); }); }); |
Step 4: Go to Shopify admin and click on Settings->Metafields ->Products.
Step 5: Create meta fields as per the below image.
Step 6: After that add this below code in product-template.liquid.
Add this code by replacing {{ product.description }}.
|
<ul class="accordion"> <li class="accordion-item is-active"> <h3 class="accordion-thumb">{{ product.metafields.product.first_tab_title }}</h3> <p class="accordion-panel">{{product.metafields.product.first_tab_descrtption }}</p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">{{ product.metafields.product.second_tab_title }}</h3> <p class="accordion-panel">{{ product.metafields.product.second_tab_description }}</p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">{{ product.metafields.product.third_tab_title }}</h3> <p class="accordion-panel">{{ product.metafields.product.third_tab_description }}</p> </li> </ul> |
Step 7: And then last go to your product, click a product, then you can see meta fields block to the last of the product page.
add the product description you want and save them.
You may also like
