Hi, could anyone tell me how to have the description of my product pop out when you click the arrow, like this:
https://www.liveoficial.com.br/shorts-run-sportif-beat-beat-v2-43810EX2169
Thanks in advance!
Hi @summershop ,
This is called accordion, you can refer to the following code: https://www.w3schools.com/howto/howto_js_accordion.asp
Do you have experience with coding? You just need to add this code to the sections/product-template.liquid file, then customize it to display the product description, everything will work fine.
Hope it helps!
Hello,
I have created this accordion in our store please see here https://dev-simplearmour.myshopify.com/pages/faq password is dev
#####
Simple Armour is a Silicon Dioxide (SiO2) based automotive glass protective coating.
#####
It repels Rain/Frost/Ice/Snow/Dirt/Debris, improves visibility, and helps to prevent chips and cracks.
#####
First and foremost, it offers 1 year of protection vs 30-90 days. Also, unlike the competition, it will strengthen the glass on a molecular level to help prevent scratches, chips and cracks. Our formula also has properties that will help to reduce glass glare and improve overall visibility. The solution is pre-measured and comes with a full installation kit.
#####
The all-in-one kit provides you with everything needed for an easy installation. The SiO2 solution is in a pre-measured wipe format, making installation a breeze. You will also receive alcohol wipes to clean the windshield prior to installation and the microfiber cloth/buffer to finish off the install.
#####
Yes! Simple Armour is Non-Toxic. Lots of cheaper products in the market are heavy on chemicals and can harm the surface of your car. This makes them harder to use, as you have to be careful about residual contact while you’re working. Our SiO2 Wipes are pH neutral and completely safe for use on all glass surfaces. This means you can wipe-on without any worries. It won’t stain plastics, rubbers or other miscellaneous surfaces, either.
#####
SiO2 nano-particles may help fill in light scratches after your first application. Give the SiO2 particles a few moments to fill into the abrasions, and then buff the surface to level off and produce a more filled shine!
/FAQ page/
section.faq-section {
padding: 127px 0;
margin: 0;
position: relative;
}
.faq-section .container {
position: relative;
z-index: 1;
}
.faq-section .page-title {
padding-bottom: 54px;
color: #fff;
}
.faq-section .search-btn {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
line-height: 1;
}
.faq-section form {
max-width: 964px;
margin: 0 auto;
position: relative;
}
.faq-section form .input-control {
width: 100%;
background: #fff;
border-radius: 10px;
height: 72px;
border: 0;
padding: 25px 55px 25px 25px;
font-size: 18px;
color: #5B5B5B;
}
.faq-page-section .card-block h5 .btn-link {
font-size: 22px;
font-weight: 500;
color: #272727;
display: block;
width: 100%;
text-align: left;
font-family: ‘Inter’, sans-serif;
padding: 40px 42px 36px;
position: relative;
}
.faq-page-section .card-block h5 .btn-link:hover {
text-decoration: none;
color: #497448;
}
.faq-page-section .card-body {
padding: 0 0 0 14px;
max-width: 886px;
font-size: 16px;
color: #5b5b5b;
border-left: 2px solid #497448;
line-height: 1.75;
}
.faq-page-section .card-collapse {
padding: 0 0 33px 41px;
}
.faq-page-section .card-block {
margin: 0;
border-bottom: 1px solid #EDEDED;
list-style: none;
position: relative;
}
.faq-page-section .card-block h5 .btn-link:after {
content: ‘’;
position: absolute;
right: 4px;
font-size: 34px;
top: 50%;
width: 32px;
height: 32px;
line-height: 1;
color: #497448;
background-image: url(https://cdn.shopify.com/s/files/1/0588/8262/1649/files/plus.png?v=1633689841);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.faq-page-section .card-block .btn-link:before {
counter-increment: li;
content: counter(li) “.”;
text-align: center;
position: absolute;
left: 0;
color: inherit;
top: 50%;
line-height: 1.2;
transform: translateY(-50%);
}
.faq-page-section ol {
counter-reset: li;
margin: -23px 0 0
}
.faq-page-section .card-block h5 .btn-link:not(.collapsed):after {
content: ‘’;
background-image: url(https://cdn.shopify.com/s/files/1/0588/8262/1649/files/minus.png?v=1633689841);
}
.faq-page-section .card-block:last-child {
border-bottom: 0;
}
.main-content>.shopify-section:first-child:not(.transparent-header) {
margin-top: 0;
}
I will help you in this, I have totally 6 years of experience in shopify.
Have complete knowledge in building apps and Shopify store. I have worked in 50+ stores and 10+ apps in my carrier. give shopify url, lets start .