Drop down menu on product page

ZaDu
Explorer
69 0 22

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

 

0 Likes

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.

⚡️ Get our [Shopify Themes]: Lightning-fast, Eye-catching, Highly converting, SEO-optimized, Minimal.
⚡️ Struggling with CODE? Need a developer to help you with your theme modifications? [Get a free quote]
0 Likes
ZaDu
Explorer
69 0 22

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

0 Likes

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!!!

⚡️ Get our [Shopify Themes]: Lightning-fast, Eye-catching, Highly converting, SEO-optimized, Minimal.
⚡️ Struggling with CODE? Need a developer to help you with your theme modifications? [Get a free quote]
0 Likes
ZaDu
Explorer
69 0 22

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. 

Screen Shot 2021-03-04 at 12.17.17 pm.png

0 Likes
ZaDu
Explorer
69 0 22

???

0 Likes