Adding an accordion on the product pages beyond theme

HIEa
Excursionist
38 1 6

Does anyone know how to add an accordion to the beyond theme

 

 

accordion.jpg

Replies 6 (6)
HIEa
Excursionist
38 1 6
Beyond

PageFly-Noah
Shopify Partner
1283 227 260

This is Noah from PageFly - Shopify Page Builder App

 Hi @HIEa  Please check again editor page. You can drag and drop accordion elements. If your theme does not support this function, please drag the html/liquid element to the position you want and add this code into the html/liquid tag.

 

<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

HIEa
Excursionist
38 1 6

Hi Noah,

 

If I am to use this code, could you please direct me where I would go?

Anshul_arora
Navigator
424 121 84

Hello @HIEa ,

I understand you are looking to add accordion in product pages.

In case you are not looking to add custom code for accordion, then you can go for the collapsible rows as the look and feel will be the same. https://prnt.sc/2UiEPIKm5kYg

Steps to add collapsible row -:

1. Go to Online Store-> Themes -> Click Customize.

2. Select Product Page -> Add Section -> Add Collapsible Rows https://prnt.sc/Hvw5XyxZt_y2

3. Once Collapsible rows added https://prnt.sc/5q9V99Il50vf , you can add or edit the rows heading and sub-text by clicking over it https://prnt.sc/5Tgq1x7uxCzJ

I hope it helps

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
HIEa
Excursionist
38 1 6

Thank you this is very helpful. I have so many different products, is there a way of adding the information under the accordions on the product pages? At the moment this has gone across all products, but I dont know how to customise each products information?

Screenshot 2024-05-20 at 7.04.20 PM.png

Anshul_arora
Navigator
424 121 84

Hello @HIEa ,

I understand you are providing different headings or sub-text to different products and it may be difficult to do this without using custom coding.

You can hire a Shopify Developer who can create accordions to your specific needs or you can use a Shopify App.

Some of the Shopify Apps for your reference -:

- https://apps.shopify.com/tabs-by-station
- https://apps.shopify.com/free-tabs-custom-product-tabs
- https://apps.shopify.com/custom-product-accordion-tabs

Kindly take a look.

I hope the app helps you.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here