Drop down menu on product page

[ZaDu]

Hello. On my product pages I want the 'features' and 'Specifications' to be drop down menus that the customer can control rather than how they are now. How would I do this?

URL: https://zadulighting.com

[OpenThinking]

Hi there,
Jack from OpenThinking here!

The easiest way that comes to my mind is this:

<details>
<summary>Features</summary>
<main>
<ul>
<li>Remote Controlled</li>
<li>Colour Changeable: 1+ Million Colours</li>
<li>330+ Multicolour Effects</li>
<li>Energy-Saving Technology</li>
<li>Dimmable</li>
<li>High Quality LED</li>
</ul>
</main>
</details>

if you want a more sophisticated way, with animations and more styling, feel free to contact us for a free quote.


let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

[ZaDu]

Do I put that in the theme.css. Also is there a code for the specifications as well. Thanks

[OpenThinking]

Sorry I forgot to mention that.
You need to put the code inside your sections/product-template.liquid inside <div class="product-single__description rte"> tag

like so:

<div class="product-single__description rte">
{{ product.description }}

<details>
<summary>Features</summary>
<main>
<ul>
<li>Remote Controlled</li>
<li>Colour Changeable: 1+ Million Colours</li>
<li>330+ Multicolour Effects</li>
<li>Energy-Saving Technology</li>
<li>Dimmable</li>
<li>High Quality LED</li>
</ul>
</main>
</details>

<details>
<summary>SPECIFICATIONS</summary>
<main>
<ul>
<li>Material: Iron/PC</li>
<li>Power: 100-240v / 20 W / 50hz</li>
<li>Lamp Height: 140cm</li>
<li>Leg Length: 40cm</li>
<li>Weight: 2.80kg</li>
<li>Wire Length: 200cm</li>
</ul>
</main>
</details>
</div>

/!\ before editing your theme's code make sure to back it up first! 

NOTE: this approach will display the same information for all products!!!

[ZaDu]

Hello. sorry it didn't work, it just duplicated what was already there. The screenshot I provided Is pretty much what I want, so when you click the features button and specifications button a menu pops below. Which the customer can click on their own. 

 

[ZaDu]

???