How to add accordion on product page for Refresh Theme

Shopify Discussion
1

Hi guys! Need help, please. How can I add an accordion to my product page, please? I tried some codes, but it’s not working. Thank you in advance!

2

For this you need to create a section with schema and got a design from codepen - https://codepen.io/tag/accordion

  1. Select the design and paste the code into the new section.

  2. If you want it to work on every page you need to add schema values.

If you need more help, feel free to contact me.

3

Thanks Salil17!

I can’t figure it out though. In my understanding, the steps are:

  1. Add a new section under “Sections”

I named it product_accordion.

  1. “Select the design and paste the code into the new section.”
    Question, please: Will I choose the code from “JS” and paste it at the bottom of the new section I created? (I saw three codes there - HTML, CSS and JS

How should I test it on one product page after, please? Like what is the next step to do, please.

Thank you once again.

4

  1. Paste the HTML code

  2. Add Css above HTML in CSS tags

  3. Paste Js in Script tag

and render the section in the main product.

But if you want to make it work through the whole website. This will need custom coding.

If you need help drop me a message.

5

I still find this a bit vague, sorry.

  1. Paste the HTML code under the new section I created?

  2. Which part in the HTML code will I insert the CSS code, please? HTML code below:

Accordion

Frequently Asked Questions

What is the return Policy?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum quia deserunt, labore natus, facilis dolores reprehenderit ab quos nostrum, sunt perspiciatis consequuntur sequi doloremque aliquam. Soluta dignissimos mollitia assumenda porro.
When will i recive the Product?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum quia deserunt, labore natus, facilis dolores reprehenderit ab quos nostrum, sunt perspiciatis consequuntur sequi doloremque aliquam. Soluta dignissimos mollitia assumenda porro.
When will i get my refund?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum quia deserunt, labore natus, facilis dolores reprehenderit ab quos nostrum, sunt perspiciatis consequuntur sequi doloremque aliquam. Soluta dignissimos mollitia assumenda porro.

The CSS code is:

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

body{
background: url(‘https://i.postimg.cc/cH5p9stz/img1.jpg’) no-repeat center center/ cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}

.accordion{
width: 65%;
background-color: rgba(0, 0, 0, 0.851);
padding: 30px;
border-radius: 30px;
box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.89);

}

.accordion .accordion-title{
margin: 30px;
text-align: center;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-weight: 100;
letter-spacing: 2px;
font-size: 1.55rem;
}

.accordion .content-container .question{
padding: 18px 0px;
font-size: 22px;
cursor: pointer;
border-bottom: 1px solid white;
position: relative;

}

.accordion .content-container .question::after{
content: ‘+’;
position: absolute;
right: -5px;
}

.accordion .content-container .answer{
padding-top: 15px;
font-size: 22px;
line-height: 1.5;
width: 100%;
height: 0px;
overflow: hidden;
transition: .5s;
font-family: ‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, sans-serif;
}

/* JavaScript Styling Link */

.accordion .content-container.active .answer{
height: 150px;
}

.accordion .content-container.active .question{
font-size: 18px;
transition: .5s;
}

.accordion .content-container.active .question::after{
content: ‘-’;
font-size: 30px;
transition: .5s;
}

  1. Lastly, for the JS code shown below, where will I insert that, please?

const accordion=document.querySelectorAll(‘.content-container’);

for(let i=0;i<accordion.length;i++){

accordion[i].addEventListener(‘click’,function(){
this.classList.toggle(‘active’);
})
};

Thank you and sorry to be a pain.

6

Frequently Asked Questions

What is the return Policy?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum quia deserunt, labore natus, facilis dolores reprehenderit ab quos nostrum, sunt perspiciatis consequuntur sequi doloremque aliquam. Soluta dignissimos mollitia assumenda porro.
When will i recive the Product?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum quia deserunt, labore natus, facilis dolores reprehenderit ab quos nostrum, sunt perspiciatis consequuntur sequi doloremque aliquam. Soluta dignissimos mollitia assumenda porro.
When will i get my refund?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum quia deserunt, labore natus, facilis dolores reprehenderit ab quos nostrum, sunt perspiciatis consequuntur sequi doloremque aliquam. Soluta dignissimos mollitia assumenda porro.

The CSS code is:

.accordion { width: 65%; background-color: rgba(0, 0, 0, 0.851); padding: 30px; border-radius: 30px; box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.89); } .accordion .accordion-title { margin: 30px; text-align: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 100; letter-spacing: 2px; font-size: 1.55rem; } .accordion .content-container .question { padding: 18px 0px; font-size: 22px; cursor: pointer; border-bottom: 1px solid white; position: relative; } .accordion .content-container .question::after { content: '+'; position: absolute; right: -5px; } .accordion .content-container .answer { padding-top: 15px; font-size: 22px; line-height: 1.5; width: 100%; height: 0px; overflow: hidden; transition: .5s; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } /* JavaScript Styling Link */ .accordion .content-container.active .answer { height: 150px; } .accordion .content-container.active .question { font-size: 18px; transition: .5s; } .accordion .content-container.active .question::after { content: '-'; font-size: 30px; transition: .5s; }
  1. Lastly, for the JS code shown below, where will I insert that, please?
7

Thank you, I will try that.