How to have a separate tab on product page?

How to have a separate tab on product page?

Jj37
Excursionist
38 0 4

I am using the Dawn theme.


On my product page, I would like a 'Care Instructions' section and a 'Product Details' section, that is a separate tab or a drop down, from the rest of the product information displayed to the customer.

 

For example, I would have the 'Product Information' displayed as normal,

Then underneath it would say 'Product Details +' and when you click it, it opens like a drop down to provide some more information such as material, colour, size.

 

Is there a way I can do this? 

Replies 3 (3)

Shadab_dev
Shopify Partner
160 5 18

@Jj37 yes there is a collapsible menu block in the customizer of the product page which will help.

 

If your content is same for all products then that should do it for dropdown and for details you can add a text block as well. But if you have different content for different products you will have to use metafields to show content as per the products.

 

Thanks 

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks

PageFly-Theodor
Shopify Partner
691 86 98

Hi @Jj37 ,
This is Theodore from PageFly - Shopify Page Builder App.

how to add separate "Care Instructions" and "Product Details" sections with a toggle function in your Dawn theme:

 

  • Access your Dawn theme code (Online Store > Themes > Actions > Edit).
  • Edit the product.liquid file in the sections folder.
  • Add HTML structure for the sections with classes
  • Add Javascript code at the bottom of product.liquid to enable toggling
  •  Save the theme and preview your product page.

Best regards,
Theodore | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Vinsinfo
Shopify Partner
352 125 118

@Jj37 Please follow the below steps to add "Product Details" and "Care Instructions" as collapsible row on the product page, when expand each row, it will display its corresponding information. Let me know whether this solution is helpful for you.

 
Step 1: Create a metafield definition:
1. From admin, go to "Settings" -> "Custom data".
2. In the Metafield definitions section, click "Products" like in the below attached screenshot.
Vinsinfo_0-1719300427628.png
3. Click "Add definition" like in the below attached screenshot.
Vinsinfo_1-1719300435417.png
4. Name your metafield definition like "Product details"  Click "Select type" and select the "Rich text" like in the below attached screenshot.
Vinsinfo_3-1719300627387.png
5. Save the metafield.
6. Repeat same steps to create metafield for "Care Instructions".
 
Step 2: Add values to product metafield:
1. From admin, go to "Products".
2. Click a product, at the end of the product page, the created product metafields will be displaying.
3. Click the metafield that you have created in the above steps, enter value for it that you want to display.
Vinsinfo_4-1719301244036.png

 

 

Step 3: Display "Product Details" and "Care Instructions" using Metafields in front end:
1. From shopify admin, navigate to "Online store" -> "Themes" -> "Customize".
2. Choose "Default product" template / respective template for which you want to display price for the products like in the below screenshots.
Vinsinfo_5-1719301314925.png

 

Vinsinfo_6-1719301325274.png
3. Locate "Product Information" section.
Vinsinfo_7-1719301349269.png
4. Below to the product information section, add a section and choose "Collapsible row" from the dropdown like in the below attached screenshot.
Vinsinfo_8-1719301354502.png
5. Drag and move the "Collapsible row" block where you want to display the block within the product information section.
6. Click "Collapsible row" block to edit and add content.
7. Update the heading as "Product details". Click the "Connect dynamic source" icon near the "Row content" field like in the below screenshot.
Vinsinfo_9-1719301382459.png

 

8. Click the "Row content from page" dropdown and select "Product". Check whether you have selected "Product" from the dropdown.
Vinsinfo_10-1719301522359.png

 

9. Search for the created metafield and select it to display.
Vinsinfo_11-1719301533590.png

10. Follow the same steps to add another collapsible row for "Care instructions".

 
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support