Dawn Theme - Collapsible tab with unique content in each product page.

[hitdifferent205]

Hi there,   
I need help with setting up a unique collapsible tab for each product as shown in the demo store. The demo store for Dawn Theme uses a collapsible tab that comes with the theme to show the 'Dimension' of the product. I want to show product dimension and fabrication for my product and these are different to each product. The only customization I see is to add Collapsible Tab in the Default Product Page. Can anyone suggest a way around or a fix? I don't want to use any extra apps just for this if possible. 

I tried to reach Shopify Support and they said this was out of their developer's scope, and I should hire a Shopify expert to do this, which is ridiculous.

 

[King-Kang · Accepted solution]

Hi @hitdifferent205 

First you will need to create Metafields, that will let you fill with the information you want for each product individually.

In your admin page go to Settings, then Metafields, Products, Add definition.

Give it a name, like "Material", then hit Select content type, and choose Text (I think that's what you are looking for), and select Multi-line text.

Hit Save.

Now, in your, admin page select Products, enter in any product, scroll down to the bottom, and you will see the Metafield you've created, now you can enter the information you want.

Now to have it displayed in the product page of your store, you will need to follow the next instructions:

Go to you admin page and in your active theme hit Customize, select Products, Default Product, in your Product Information hit Add block, select Collapsible tab, and in Tab content at your right, hit Insert dynamic source, select "Material", hit insert and save.

Hope it works, it worked for me.

[VuongTuanAnh]

Thank you, it works perfectly!

[VuongTuanAnh]

By the way, do you know how to set the collapsible tap for some specific products only? I have some products that need an instruction tab, the others don't. How can I manage it?

[King-Kang]

Hi @VuongTuanAnh ,

Go to you admin page and in your active theme hit Customize, select Products, + Create Template.

[VuongTuanAnh]

Thanks, @King-Kang , Can you be more specific? I have created a new template but can't find where to assign the template to the specific products I need

[King-Kang]

When you create your product, at your right side you can select the page template.

There is a tab called Online store, where you can assign a template from your current theme (the one selected will be Default product, you only need to select the one you have created and hit save) to define how the product is displayed.

The tab is right below the TAGS tab.

[VuongTuanAnh]

Thank you @King-Kang, I did it! You are awesome! ❤️

[Ana_Buendia]

Hi @King-Kang. Thanks for your instructions. By the way, I have created a new template and added specific products to the templete, but the collapsible tab is still showing on all products. I have some products that need a size chart tab, the others don't. Could you help me? Thanks in advaced

[LLM_LF]

@King-Kang, your instructions were extremely helpful and seemed to be working until the metafields I created didn't show up when I went to Insert dynamic source. I have Icon theme and am wondering if that theme doesn't support collapsible tabs, though the theme developer's site says the product pages have tab content - maybe it just doesn't support individualized content? Thought it was worth a try to see if you knew. Thanks!

[LLM_LF]

I confirmed with the Icon theme developer that Icon does not support unique tabbed copy.

[LiLi-5]

This is extremely helpful, thank you so much! 

[DebraJM]

Thank you so much!! Awesome help in easy to understand format.

[shopten26]

@King-Kang I tried to follow your steps but it's still changing the description on all of my pages. Do you know where I could be going wrong?

[King-Kang]

Hello @shopten26 ,

Please try to follow the steps I provided again, I suspect its because you changed right it in the Customize.

[bondbeyondbox]

You were right. Thank you so much! Do you happen to know how to reduce the size of featured products image on home page?

[qubeetrays]

I have been looking so long for a solution. Thanks so much for this! Fantastic work

[bondbeyondbox]

Hi! I also have dawn 2.0 theme and followed your wonderful instructions. I added the metafields and filled them in and saved them, but when I click insert dynamic source it only finds the default ones, not the ones I added. Can you please help? 🙂

[King-Kang]

Hello @bondbeyondbox ,

Thank you for the words.

Make sure you hit insert dynamic source from the tab content.

[Dakota00]

But it does not accept html code…. I need to add table with size for shoes and foe t-shirts. Is any one know how to fix it? 

[AntAuraandHonor]

Hi KingKang, 

Massive thanks for sharing this info!

I'm having trouble with getting a file metafield. Specifically it's an image.png

I can create it okay. And then it's there at the bottom of the product page, along with the other metafields. 

But then when I go to add it to a collapsible tab it just won't show the file metafields that have the images.

Any help greatly appreciated. 

[Geenaak]

Did you find an answer to this? I have the smae issue too where some of my metafields dont show up on the product page!

[adorna]

Hi,

What needs to be done if I want a specific information to be displayed on all product pages?

Is there a single setting where I can toggle on the tab for all product pages, instead of having to manually edit each product?

thanks in advance.

[King-Kang]

Hello, @adorna 

Just follow the steps I gave to @VuongTuanAnh , in the page 1 of this post, and the problem will be solved.

[saltandseaweed]

Hi, you instructions were laid out perfectly - step by step and understandable - thank you! However, I'm updating my current Retina theme to 6.0 which works on the 2.0 Shopify platform. In my current version, my products pages have 3 tabs but in the upgrade only the tab heading are showing not the information text.  I added metafields as per your instructions, however there is no block names "collapsible" in the selection of my current or new version.  Not sure where to find it or how to activate it.  I'd appreciate your help - thank you!

[meo_me]

Hi @adorna I had same problem.

i added the meta field options in the settings, however the dynamic resources are not showing the updated metafield in the product pages.

need help

[komfibaby]

Thank you, this is great. I have been trying to do this but with an image (file). When I'm trying to add it to my product page in the theme, it is not in the list of metafields I have created. Am I missing something?

[Enrico_Maggiolo]

Hi @King-Kang and thanks for your guide.

I follow all steps but when I try to add a dynamic source I can't find my metafield...

What is going wrong?

[soygisely]

Hi, King-Kang, what about tabs exclusive for one particular product and not for all of them?

I've edited the default tabs as materials, dimension and etc and can´t find a way to edit each version differently. Can you help me?

Thanks in advance.

[Daniel181]

Thanks this work great to differentiate but if I want to hide information on some products that I don't want to be shown, how should I do it?unfortunately if I deactivate it, they all deactivate

[kmbvox]

Never has anyone offered such a perfect solution so simply and easy to follow! Thank you 😁👍

[rjauthor]

I don't see a link for Metafields under Settings in the Dawn theme??

[onceupon]

Is this possible to place different images before the heading of each accodion title?

[KimmyBee]

Thank you so much, your instrictions were so easy to follow. 

[digilyze]

Thank you for teaching this. Had been searching for it since long. Worked perfectly 🙂

[TheBlueStuff]

For those struggling to find the "insert dynamic source" button. Its the small icon that looks like a stack of 3 plates, next to the "Row Contents" text. Its called "Connect Dynamic source". See this video for a visual guide https://youtu.be/VghcPn3AzYs?si=ktPkzNtENs6E8P4A&t=380 

[afbossbae]

I am looking for someone to design my store  can I see more of example you have

[shopten26]

@afbossbae me?

[RachelHSS]

I'm having a similar problem, trying to embed a variable link in the collapsible tabs from metafields. The collapsible tabs product block seems to only allow text metafields (at least in the theme I'm using). Even though I can enter a link in the rich text box. When I try to put the link in a text metafield, I can't get it to display correctly. I can alternatively add a "link" block to the page which allows me to insert a URL metafield, but can not figure out how to put the link block into the collapsible tab. I feel like there must be a pretty easy solution, but I know nothing about JSON.

Any help would be greatly appreciated! I'm on Symmetry theme by Clean Canvas.