How can I customize the FAQ page of the Shella theme?

[sauicaen]

Hi,

My question will be about the customization of the FAQ page of the "Shella" theme. The FAQ page in its normal form is very basic providing only the opportunity to write questions and answers below with the feature of showing them as closed or opened. There is no possibility of forming sections under different subject titles and arranging the questions accordingly as well as no possibility of creating sidebar navigation that will take the visitor directly to the needed subject title/section and accordingly the questions.

I wonder if anyone has done before these customizations with the Shella theme or knows how to do it exactly without messing up with the code?

PS: To have a more concrete idea, this is an example of what I mean; https://leiacollection.com/pages/shipping-returns

Thanks

[Andrew]

Hi @sauicaen,

Hyde here from Shopify.

As Shella is a third-party theme you'd really do well to contact the developers directly, as they are the best authority to advise you on how to achieve the customization you want.

Alternatively, however, you could check in with Shopify Experts. They are a team of third-party developers who can make custom changes to your store on a contracted basis. They may be able to develop a custom solution for your theme or may have access to an already existing integration that I'm unaware of. As with all Expert contracts, requirements and prices are agreed upon before any work commences, so you can always check in with a few different Experts to ensure you're getting what you want for a competitive price.

I hope this helps!

All the best, Hyde.

[sauicaen]

Hi Hyde,

Thanks for your interest, I actually had written here upon the feedback of the theme developers. I had just wanted to try my chance here before going for the Shopify Experts.

Best,  

[UmairA]

Hey there @sauicaen,

This task requires some solid understanding of Shopify theme coding. You probably don't wanna messup your FAQ page. You can message me if you need my help. 

[girlmeetschic]

Hey there,

How did you even get the left side bar..Table of Contents if you will?

Thanks

[SDPE]

Hi, 

For Shella Theme, the code to use freely on your pages or blogs the 'accordion' function, you must use the following code:

<!-- REMEMBER TO USE IN THE PAGES AS HTML CODE AND NOT SIMPLE TEXT--> 

<!-- Here you call for the 'accordion' function--> 
<div class="faqs border-top" data-js-accordion="all">

<!-- Here you will write what te BUTTON NAME will be. All inside the H2 Header-->     
  <h2 class="faqs__head h5 d-flex align-items-center py-10 mb-0 cursor-pointer" data-js-accordion-button="">
       <span class="mr-15">BUTTON TITLE</span> 

<!-- Here is where you configure with a svg file the arrow image of the BUTTON-->      
<i class="faqs__cross ml-auto"><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-190" viewbox="0 0 24 24"><path d="M7.718 15.966a.65.65 0 0 1-.176-.449c0-.169.059-.318.176-.449l3.32-3.301-3.32-3.301a.65.65 0 0 1-.176-.449c0-.169.059-.318.176-.449a.65.65 0 0 1 .449-.176c.169 0 .318.059.449.176l3.301 3.32 3.301-3.32a.65.65 0 0 1 .449-.176c.169 0 .318.059.449.176.117.131.176.28.176.449a.65.65 0 0 1-.176.449l-3.32 3.301 3.32 3.301c.117.131.176.28.176.449a.65.65 0 0 1-.176.449.846.846 0 0 1-.215.127.596.596 0 0 1-.468 0 .846.846 0 0 1-.215-.127l-3.301-3.32-3.301 3.32a.846.846 0 0 1-.215.127.596.596 0 0 1-.468 0 .813.813 0 0 1-.215-.127z"></path></svg></i> </h2>

<!-- Here you will write CONTENT of the open state--> 
  <div class="d-none" data-js-accordion-content="">
   <div class="rte pt-10 pb-30">HERE YOU FILL UP YOUR CONTENT, WITH FREE THEXT BULLETED LISTS, IMAGES, ETC.
</div>
  </div>
  </div>

I hope it works for you.