How to create a dropdown in text of product page? (Studio Theme)

Store Design
, ,
1

Hi,

I am looking for a possibility to create dropdowns in the text of my products. For example like Google’s “People also ask”:

Bildschirmfoto 2023-12-12 um 11.21.13.png
Bildschirmfoto 2023-12-12 um 11.21.13.png726×302 17.2 KB

Basically I want to show only headings first (“Paper”, “Printing and delivery”, “Sizes”) and only show the text if someone clicks on the headline. https://www.kanal-100.com/products/wandbild-bagni-nirvana

Could someone help me please?

2

Hi @Kanal100 , to create an accordion style for your product details, where only headings are initially visible and the text is shown upon clicking, you’ll need to modify your product page template with JavaScript and CSS. Here’s a basic approach:

  1. Structure Your HTML/Liquid:

    • Wrap each section (heading and corresponding text) in a container.
    • Give each heading an onclick event handler to toggle the visibility of the text.

  2. Add Javascript:

    • Write a function to toggle the display of the text when the heading is clicked.

  3. CSS for Initial State:

    • Use CSS to initially hide the text sections.

This setup will create an interactive accordion effect on your product page, enhancing the user experience. Remember to backup your theme before making changes, and consider seeking help from a developer if you’re not familiar with coding.

3

Hi @Kanal100

It’s a simple collapsible content section where you put heading and relavent content to description block.

Don’t know which theme you are using but this comes even in DAWN theme which is free.

Please refer to the below video to make that section dynamic using metafield.

Hope this will helps..

4

Thanks! This solution worked for me. I’m using Dawn theme. :slightly_smiling_face: