Minimal theme edit accordion

New Member
4 0 0

Hey !

so i wanna add an accordion section to my product pages exactly like this https://www.endclothing.com/ca/paul-smith-tapered-fit-lightweight-stretch-jean-m2r-301zw-a20007.html

but all the info I've seen is for FAQ which is helpful I'm sure but i was wondering if there is info or someone knows how to add it to a product page so i can display Size guide, Shipping, returns etc etc so it looks cleaner 

 

hope you cna help 

Thanks

0 Likes
Highlighted
Shopify Staff
Shopify Staff
335 31 70

Hi, Tmax!

This is May from Shopify.

Having an accordion on your product page is a great way to provide useful informations and keep your product page looking clean! If you have some experience in coding, you can custom code this yourself on the product description by adding HTML content with the rich text editor. This solution may not be ideal, since you will have to manually put the code in every individual product. The easiest solution to this is to use an app. I’ve looked through the app store, and found that you can add accordion to your product page with EasySlide ‑ Accordions & FAQ. If you are open to other alternatives, you can also achieve a similar look with tabs instead of an accordion. If you are interested, FREE Product page Tabs or Easy Tabs ‑ Product Tabs are two of the many apps that you can use to create product description tabs. You can also visit our app store to see other product tabs apps!

If you decide to use an app, please keep in mind that some apps have a monthly subscription fee for using their service. You can find more information about the fees on their app’s page. For future reference, in case you run into any technical issues or have any questions about the app, you can reach out to the developers directly. Their contact information can be found on the right hand side of the page.

Let me know if this helps. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!

Kind Regards,

May

Shopify Support


 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
Shopify Partner
2 0 4

Hello Tmax!

I wanted to let you it's possible to add an accordion to any page you want to using the Shogun Page Builder with the help of our accordion element.

We also have a bunch of ready to use templates, including for sizing pages. In case you want to copy over the sizing structure to an accordion we have a Snippets feature that let's you do just than in a matter of seconds. 

We offer a 10-day trial so you can test Shogun to give you a chance to be sure that it's the right product for you. Let me know if you need any more information! 

Abhinav Sapru | Support @ Shogun | support@getshogun.com | Try Shogun Page Builder for Shopify for FREE!**
3 Likes
Tourist
5 0 0

Greetings May

 

I have a similar issue with wanting to add my accordion to an FAQ page of which I developed the accordion in W3Schools see HTML below.

 <!DOCTYPE html>
<html>
<h3> Payment Information</h3>
<head>
<title>BEB Accordion Slider</title>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.accordion.beb {
    -webkit-box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6);
    -moz-box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6);
    box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6);
    font-family: Arial, Helvetica, sans-serif;
    border-color: #ffffff;
    border-style: solid;
    border-width: 0px;
    border-radius: 0px;
    margin: 0 auto;
    height: 960px;
    width: 860px;
}

.accordion.beb > ul > li,
.beb .accordion-title,
.beb .accordion-content,
.beb .accordion-separator {
    float: none;
} 

.accordion.beb > ul > li {
    background-color: ffffff;
    margin-right: -0px;
    margin-bottom: -410px;
}

.beb .accordion-select:checked ~ .accordion-separator {
    margin-right: 0px;
    margin-bottom: 410px;
} 

.beb .accordion-title,
.beb .accordion-select  {
    background-color: #e7e7e7;
    color: #000000;
    width: 860px;
    height: 50px;
    font-size: 18px;
}

.beb .accordion-title span {
    margin-bottom: 25px; 
    margin-left: 25px;
} 

.beb .accordion-select:hover ~ .accordion-title,
.beb .accordion-select:checked ~ .accordion-title {
    background-color: #00e1d2;
} 

 .beb .accordion-title span  {	
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-writing-mode: lr-tb;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
    margin-bottom: 0px;
    line-height: 50px;
} 

.beb .accordion-content {
    background-color: #ffffff;
    color: #000000;
    height: 342px;
    width: 792px;
    padding: 34px;
}

.beb .accordion-title,
.beb .accordion-select:checked ~ .accordion-content {
    margin-right: 5px;
    margin-bottom: 5px;
} 

/* Do not change following properties, they aren't 
generated automatically and are common for each slider. */
.accordion {
    overflow: hidden;
}

.accordion > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 101%;
}

.accordion > ul > li,
.accordion-title {
    position: relative;
}

.accordion-select {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 1;
}

.accordion-title span {
    display: block;
    position: absolute;
    bottom: 0px;
    width: 100%;
    white-space: nowrap;
}

.accordion-content {
    position: relative;
    overflow: auto;
}

.accordion-separator {
    transition: margin 0.3s ease 0.1s;
    -o-transition: margin 0.3s ease 0.1s;
    -moz-transition: margin 0.3s ease 0.1s;
    -webkit-transition: margin 0.3s ease 0.1s;
}
</style>
</head>
<body>
 <div class="accordion beb">
    <ul>
         <li>
            <input type="radio" name="select" class="accordion-select" checked />
            
            <div class="accordion-title"> 
            
                <span>Q: What Form of Payments Do You Accept?</span>
            </div>
            <div class="accordion-content">
            A: Be Exceptional Brands (beexceptionalbrands.com) currently accepts Visa, MasterCard, Discover, American Express, Amazon Pay, Google Pay, and Paypal for all orders.
            </div>
            <div class="accordion-separator"></div>
        </li> 
         <li>
            <input type="radio" name="select" class="accordion-select" />
            <div class="accordion-title">
                <span>Q: Do You Accept Cashier's Check or Money Order</span>
            </div>
            <div class="accordion-content">
                A: No. At this time Be Exceptional Brands does not accept Cashier's Checks or Money Orders.
            </div>
            <div class="accordion-separator"></div>
        </li> 
         <li>
            <input type="radio" name="select" class="accordion-select" />
            <div class="accordion-title">
                <span>Q: For Local Deliveries and/or Store Pickup Is Cash An Acceptable Form of Payment?</span>
            </div>
            <div class="accordion-content">
                A:  Yes. In addition to Be Exceptional Brands regular accepted forms of payment, when retrieving your order from our local delivery site(s) cash is accepted.
            </div>
            <div class="accordion-separator"></div>
        </li> 
         <li>
            <input type="radio" name="select" class="accordion-select" />
            <div class="accordion-title">
                <span>Q:  What Can Cause My Order To Be Delayed?</span>
            </div>
            <div class="accordion-content">
                A: - If the billing information you provided does not match what your bank has on file (including address and telephone number), your order may be delayed.

- Although we all like the idea of sending and receiving gifts to and from others; if you are shipping to an address other than your billing address, your order may be delayed.
            </div>
            <div class="accordion-separator"></div>
        </li>
        
    </ul>
</div> 
</body>
</html> 

Of course, when I add to the HTML on the page it gives me gibberish. How can I add it successfully to look like it does on W3Schools, Many Thanks In Advance.

0 Likes
Shopify Staff
Shopify Staff
335 31 70

Hey, @shopbeb!

 

I'd be more than happy to take a look into this! 

 

Did you copy and paste the entire code above to your Rich Text Editor (RTE)? If you are, you would only want to paste the content inside the <body> (without the tag itself), and your <style> (with the tag). So, you'll need to remove any other opening and closing tags  tags such as <html>, <head><title><meta> and <body>. The reason for this is because the content inside the Rich Text Editor is already the <body> of your website. I hope this clarifies the confusion. 

 

In this case, you would want to remove the code I've marked in red:

 

 

 

 

After you remove them, you should not be seeing a raw code (gibberish) on your product page anymore! If you wish to make edits of the code, I do not recommend editing them directly on the RTE, since RTEs aren't meant to be used as a code editor, so it may not reflect code changes properly. Instead, I recommend using W3School's online code editor to test out your code edits. After you finalize your code, you can copy the body and styling of the code to Shopify.

 

Let me know if this helps! If you need help customizing your code, I highly recommend reaching out to a Shopify Expert or ask your question in our Shopify Design forum!

 

Cheers!

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes