Solved

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

hitdifferent205
Visitor
2 0 0

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.

 

 

Screen Shot 2021-09-16 at 8.40.44 pm.png

 

image.png

Accepted Solution (1)

King-Kang
Trailblazer
148 8 76

This is an 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.

View solution in original post

Replies 36 (36)

King-Kang
Trailblazer
148 8 76

This is an 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
Explorer
50 0 16

Thank you, it works perfectly!

VuongTuanAnh
Explorer
50 0 16

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
Trailblazer
148 8 76

Hi @VuongTuanAnh ,

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


VuongTuanAnh
Explorer
50 0 16

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
Trailblazer
148 8 76

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
Explorer
50 0 16

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

Ana_Buendia
Excursionist
17 0 6

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
Visitor
3 0 0

@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
Visitor
3 0 0

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

LiLi-5
Excursionist
22 0 10

This is extremely helpful, thank you so much! 

DebraJM
Tourist
9 1 1

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

shopten26
Excursionist
33 0 7

@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
Trailblazer
148 8 76

Hello @shopten26 ,

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

bondbeyondbox
New Member
11 0 0

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
Visitor
1 0 1

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

bondbeyondbox
New Member
11 0 0

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
Trailblazer
148 8 76

Hello @bondbeyondbox ,

Thank you for the words.

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

KingKang_0-1636554087611.png

 

Dakota00
Visitor
1 0 1

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
Visitor
1 0 0

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
Shopify Partner
4 0 0

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
Excursionist
37 0 5

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
Trailblazer
148 8 76

Hello, @adorna 

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

saltandseaweed
New Member
4 0 0

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
Excursionist
20 0 12

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
Tourist
4 0 2

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
Shopify Partner
8 0 2

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
Visitor
1 0 1

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
New Member
8 0 0

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
Visitor
2 0 3

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

rjauthor
Visitor
1 0 0

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

onceupon
Excursionist
30 0 3

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

accordion.png

KimmyBee
Visitor
2 0 0

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

afbossbae
Visitor
2 0 0

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

shopten26
Excursionist
33 0 7

@afbossbae me?

RachelHSS
Excursionist
12 0 3

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.