Need a list of buttons connected to Product metafields

[Zowne]

Hi,

I make products which are compatible with prams/strollers people have. If someone asks me to link them to my bottle holder, I can link them to the bottle holder, but I have 5 separate listings for the bottle holder based on which pram/stroller it is compatible with. I want to have a list of buttons/tabs across the top of my product page which are connected to dynamic product metafields (for both their text and their link), so that the user can select their pram and be taken to the bottle holder compatible with their pram.

Does anyone have any ideas how this can be done? Can I use the Custom Liquid/HTML sections to generate 4 or 5 buttons which accept dynamic links and text from metafields?

I'm using the Galerria theme based on the Dawn theme.

My domain is daloda.com.au

[Sonya_2025]

Hi @Zowne 

Welcome to shopify comminity.

Create a custom section with metafields is a great idea to achieve your needs. It requires strong skills of liquid.

But I have a simple idea. using featured collection bind to your bottle holder.  Like below:

Hope this helps.  Feel free to contact if any further assistance needed.

[PaulMartin]

Hi Zowne,

I don't have an answer yet since I don't quite understand what you meant by

---

I want to have a list of buttons/tabs across the top of my product page which are connected to dynamic product metafields (for both their text and their link), so that the user can select their pram and be taken to the bottle holder compatible with their pram.

---

From what I understand, your store sells accessories for prams. There are different types of prams (currently UppaBabyCruzV2 and UppaBabyVistaV2) and in each pram, there are accessories such as bottle holder, phone holder, and others. Then, these accessories are the product themselves, while the prams are collections - displayed in the homepage for navigation.

I understand that you want to have links or buttons or a way to help navigate the customer, but I don't understand why this is in the product page when the product is already filtered to what pram it belongs.

Are there instances where, after you've sent them a link to the bottle holder of the pram they have, the customer realized that they actually have a different pram?

Then since they don't know how to navigate. You want to have a series of buttons at the top of the product page to help them navigate to the actual pram they have and eventually, the bottle holder made exactly for their pram. Is this what you meant?

[Zowne]

Hi Paul,

Yes sorry, I should have been more specific. I'm using targetted advertising on social media. So when advertising with a video of the bottle holder, i then need to choose where to link the person if they click the ad. Currently I am linking them to the website homepage and getting high bounce rates. I want to link them directly to the product which they saw the ad for, but I dont know which pram they have and so cant link them to the correct version of the bottle holder. So my fix was to link them to one of the product pages from the ad, and then at the very top of the product page, have a little horizontal list of buttons to select their pram (which are all controlled in their text and link by product metafields) and be taken to the correct product page.

If you have any better ideas for this, please feel free to send me suggestions.

Thanks for your help

[PaulMartin]

Ah! I get it now! Thank you so much for explaining it.

Your idea is a good idea, but currently I don't quite have a structure on how to implement it. I'll need some time to think, can I come back to you after I come up with an idea to implement this?

[Zowne]

Sounds good. Eagerly awaiting your ideas

This could be an easy solution if my theme offered a section of just buttons. Because I can tie the button text and links to the metafields and that would work. But each section only seems to offer one button whereas I need 4 or 5.

[PaulMartin · Accepted solution]

Hi Zowne,

Got it. Your idea can work, but you'll definitely need a custom section coded up since your theme does not offer it out of the box. 

As for my idea, my idea is to create a metafield that links to the other bottle holders. Like so:

Then after we've done the linking of the cup holder to the other cup holders, we'll have a custom section that will take all those connections and creates buttons automatically based on how many cup holders it is being linked to. Just like so:

The image above is a recreation of the product page (for this image, product page of the Cupholder for Pram type A) with the custom section I talked about earlier. Each of those rectangles above the product title are buttons that links to the other cup holders connected via the product metafield from earlier. And since there are 5 cup holders being connected to the Cupholder for Pram Type A, there are also 5 buttons.

The final outcome would not look like scribbles hahaha or not arranged just like that, but that's my idea of how to implement it. Let me know what you think and if you'd like me to do that for you, sure thing! I can do it for you, no charge. Just let me know.

However, if you'd like to give your idea a shot, that can work also but you'll definitely need to code a custom section. If you'd like me to do the coding, I can do it for you - just let me know. Just a heads up, I don't expect any payment for this, I just want to help.

[Zowne]

Paul, this sounds like a fantastic idea, and exactly what I am after. If you are offering to help set this up, I would happily accept!

[Zowne]

How do I get in contact with you Paul? Is thre somewhere easier for us to chat?

[PaulMartin]

Awesome, glad to hear that.

I'll definitely assist you in setting this up. And for you to contact me, you can find my email or WhatsApp at this link.

If the link doesn't work, let me know so that I'll be able to give you another way to contact me.