Adding Dynamic URL's/Files to Product Description Tabs or Accordions

Solved

Adding Dynamic URL's/Files to Product Description Tabs or Accordions

Nous333
Explorer
70 1 29

Alright, so in true Shopify fashion, we now have customizable metafields right in the Shopify Admin....BUT, in the 'Product' metafields we are given the option of using URL and FILE metafield types and they DON'T EVEN WORK on PRODUCT pages!

 

Seriously Shopify?  Why?  Why even do it?  Why even give us the option?  That's about as bad as putting up the 'Collection' metafields and having them grayed out with a 'coming soon' message.  If you can't do something right just don't do it.  

 

Anyways, is there anyway to make Dynamic URL's or Files work in the custom product description metafields?  I'm thinking it might be possible to just hack the code a bit but I haven't been able to figure it out.. I really need to be able to display specific URL's for each product, and simply putting them in the actual product description won't work because customers seem to completely overlook them.  So I need to have a nice big heading using Tabs/Accordions where they can find the URL's.   

 

Any help appreciated, thank you!

Accepted Solution (1)
Nous333
Explorer
70 1 29

This is an accepted solution.


@Lucypink7 wrote:

Did you ever find a solution? I'm about to embark on the same quest...


If you want the URL in an accordion, you can use this code I ended up making. 

If you don't want it in an accordion, you'll have to figure out how to make it work for your purposes. Just remove the stuff about the accordion and replace with whatever you want to use. 

 

{% unless product.metafields.my_fields.ACCORDION_HEADER == blank %}
<div class="accordion__wrapper">
<button class="accordion__title"
data-accordion-trigger="{{ animation_anchor }}"
aria-controls="{{ animation_anchor }}"
aria-haspopup="true"
aria-expanded="false"><font size="2">
{{product.metafields.my_fields.ACCORDION_HEADER }}
</font></button>
<div class="accordion__body" data-accordion-body id="{{ animation_anchor }}">
<div class="accordion__grid__wrapper">
{% unless product.metafields.my_fields.URL_1.value == blank %}
<u><a target="_blank" rel="noopener noreferrer" href="{{ product.metafields.my_fields.URL_1.value }}">{{ product.metafields.my_fields.URL_1_TITLE.value }}</a></u><br>
{% endunless %}
{% unless product.metafields.my_fields.URL_2.value == blank %}
<u><a target="_blank" rel="noopener noreferrer" href ="{{ product.metafields.my_fields.URL_2.value }}">{{ product.metafields.my_fields.URL_2_TITLE.value }}</a></u><br>
{% endunless %}
{% unless product.metafields.my_fields.URL_3.value == blank %}
<u><a target="_blank" rel="noopener noreferrer" href ="{{ product.metafields.my_fields.URL_3.value }}">{{ product.metafields.my_fields.URL_3_TITLE.value }}</a></u><br>
{% endunless %}
{% unless product.metafields.my_fields.URL_4.value == blank %}
<u><a target="_blank" rel="noopener noreferrer" href ="{{ product.metafields.my_fields.URL_4.value }}">{{ product.metafields.my_fields.URL_4_TITLE.value }}</a></u><br>
{% endunless %}
{% unless product.metafields.my_fields.URL_5.value == blank %}
<u><a target="_blank" rel="noopener noreferrer" href ="{{ product.metafields.my_fields.URL_5.value }}">{{ product.metafields.my_fields.URL_5_TITLE.value }}</a></u><br>
{% endunless %}
{% unless product.metafields.my_fields.URL_6.value == blank %}
<u><a target="_blank" rel="noopener noreferrer" href ="{{ product.metafields.my_fields.URL_6.value }}">{{ product.metafields.my_fields.URL_6_TITLE.value }}</a></u><br>
{% endunless %}
</div>
</div>
</div>
{% endunless %}

 

So you will first make a product metafield for the accordion header if you are using the accordion.  This will allow you to use a unique header for each product page.  (ie: photos, documents, files... whatever descriptor you need to use for your URL's)

Then you need to make product metafields for the URL's themselves, and if you want to be neat about it you can also make a 'URL Title' product metafield for each URL. If you don't do this the URL's just show up as a regular link:

( https://www.thethingsshopifymakesusdo.com )

and this can look kind of sloppy in my opinion.  

The best thing to do is estimate the number of URL's you will need on each product page and add an extra metafield or two just so you have them available. 

So:

Accordion Header - single line text metafield

URL 1 - url metafield 

URL 1 Title - single line text metafield 

URL 2 - url metafield 

URL 2 - single line text metafield 

...and so on.  MAKE SURE you create these in a somewhat practical order, because the geniuses at Shopify don't allow you to rearrange them on the product page afterwards... You don't want to create URL 1 then URL 2, 3, 4 etc. and then create URL 1 Title, URL 2 Title etc.  because then you will eventually have to navigate to a different page on the product page to enter all the titles if you have a lot of metafields and you'll probably forget which title belongs to which URL.  (I only know because I made this mistake)


This is coded so if you don't have any of these metafield values filled in on a specific product page, nothing shows up.  Even if you don't have the accordion header filled in, no accordion will show up.  So it's nice and clean. 

I have this code pasted into a custom "Liquid" section that I have placed under the product description.  But you can put it wherever.  If you need any help making it work for you let me know and I'll help you out if I can.  Unfortunate that Shopify doesn't think these things through and forces store owners to become professional coders to make the platform they pay for work. 

View solution in original post

Replies 11 (11)

PaulNewton
Shopify Partner
7096 630 1484

@Nous333 wrote:

Alright, so in true Shopify fashion, we now have customizable metafields right in the Shopify Admin....BUT, in the 'Product' metafields we are given the option of using URL and FILE metafield types and they DON'T EVEN WORK on PRODUCT pages!


What are you trying to do and what is it doing and what errors are there?

 


@Nous333 wrote:

Anyways, is there anyway to make Dynamic URL's or Files work in the custom product description metafields? 

 


Your trying to put a metafield inside another metafields content from the admin?

That will  not work.

 

You need to get the values of each metafield in liquid in the theme and use logic on them to combine them how you want.

 

To put the values of one object into the values of another object you need to have logic like replacing a keyword string.

Strings like '<!-- split -->' , '[[PRODUCTURL]]', 'learn more' , etc etc

Contact [email protected] for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


Nous333
Explorer
70 1 29

No, I'm not trying to put a metafield inside another metafield.  

 

Within Shopify Theme editor (I'm using Pipeline) on the Product pages you can include dynamic metafields.  But if I make a URL or File metafield, these do not show up in my theme editor so I cannot add them to the product pages.  In fact... the only place I have found I can add a URL metafield to is rich text sections.  This doesn't help me because you can only place a rich text section at the very bottom or very top of a page... just wouldn't look right and my customers would still probably not notice the URLs.  

 

I want to be able to add a Dynamic URL Metafield to an accordion tab.  The product description has multiple fields where dynamic content can be inserted... it makes zero sense that a dynamic URL can't be placed in one of these fields... if other dynamic content can be placed there why not a URL?  I'm wondering if there is a way to edit the code of this description section to allow for links to be active within the dynamic content.  This way I could just use multi line text metafields and any URLS contained in the text would be active links on the front end.  

SpotterJ
Shopify Partner
67 1 17

you can use a filter that spits out a URL

Learning something new every day
Nous333
Explorer
70 1 29

Yeah if you were really here to help and not plug your Youtube channel, you would have told me and everyone else where to find the solution within your 16 minute video. 

Lucypink7
Tourist
5 0 1

Did you ever find a solution? I'm about to embark on the same quest...

Nous333
Explorer
70 1 29

This is an accepted solution.


@Lucypink7 wrote:

Did you ever find a solution? I'm about to embark on the same quest...


If you want the URL in an accordion, you can use this code I ended up making. 

If you don't want it in an accordion, you'll have to figure out how to make it work for your purposes. Just remove the stuff about the accordion and replace with whatever you want to use. 

 

{% unless product.metafields.my_fields.ACCORDION_HEADER == blank %}
<div class="accordion__wrapper">
<button class="accordion__title"
data-accordion-trigger="{{ animation_anchor }}"
aria-controls="{{ animation_anchor }}"
aria-haspopup="true"
aria-expanded="false"><font size="2">
{{product.metafields.my_fields.ACCORDION_HEADER }}
</font></button>
<div class="accordion__body" data-accordion-body id="{{ animation_anchor }}">
<div class="accordion__grid__wrapper">
{% unless product.metafields.my_fields.URL_1.value == blank %}
<u><a target="_blank" rel="noopener noreferrer" href="{{ product.metafields.my_fields.URL_1.value }}">{{ product.metafields.my_fields.URL_1_TITLE.value }}</a></u><br>
{% endunless %}
{% unless product.metafields.my_fields.URL_2.value == blank %}
<u><a target="_blank" rel="noopener noreferrer" href ="{{ product.metafields.my_fields.URL_2.value }}">{{ product.metafields.my_fields.URL_2_TITLE.value }}</a></u><br>
{% endunless %}
{% unless product.metafields.my_fields.URL_3.value == blank %}
<u><a target="_blank" rel="noopener noreferrer" href ="{{ product.metafields.my_fields.URL_3.value }}">{{ product.metafields.my_fields.URL_3_TITLE.value }}</a></u><br>
{% endunless %}
{% unless product.metafields.my_fields.URL_4.value == blank %}
<u><a target="_blank" rel="noopener noreferrer" href ="{{ product.metafields.my_fields.URL_4.value }}">{{ product.metafields.my_fields.URL_4_TITLE.value }}</a></u><br>
{% endunless %}
{% unless product.metafields.my_fields.URL_5.value == blank %}
<u><a target="_blank" rel="noopener noreferrer" href ="{{ product.metafields.my_fields.URL_5.value }}">{{ product.metafields.my_fields.URL_5_TITLE.value }}</a></u><br>
{% endunless %}
{% unless product.metafields.my_fields.URL_6.value == blank %}
<u><a target="_blank" rel="noopener noreferrer" href ="{{ product.metafields.my_fields.URL_6.value }}">{{ product.metafields.my_fields.URL_6_TITLE.value }}</a></u><br>
{% endunless %}
</div>
</div>
</div>
{% endunless %}

 

So you will first make a product metafield for the accordion header if you are using the accordion.  This will allow you to use a unique header for each product page.  (ie: photos, documents, files... whatever descriptor you need to use for your URL's)

Then you need to make product metafields for the URL's themselves, and if you want to be neat about it you can also make a 'URL Title' product metafield for each URL. If you don't do this the URL's just show up as a regular link:

( https://www.thethingsshopifymakesusdo.com )

and this can look kind of sloppy in my opinion.  

The best thing to do is estimate the number of URL's you will need on each product page and add an extra metafield or two just so you have them available. 

So:

Accordion Header - single line text metafield

URL 1 - url metafield 

URL 1 Title - single line text metafield 

URL 2 - url metafield 

URL 2 - single line text metafield 

...and so on.  MAKE SURE you create these in a somewhat practical order, because the geniuses at Shopify don't allow you to rearrange them on the product page afterwards... You don't want to create URL 1 then URL 2, 3, 4 etc. and then create URL 1 Title, URL 2 Title etc.  because then you will eventually have to navigate to a different page on the product page to enter all the titles if you have a lot of metafields and you'll probably forget which title belongs to which URL.  (I only know because I made this mistake)


This is coded so if you don't have any of these metafield values filled in on a specific product page, nothing shows up.  Even if you don't have the accordion header filled in, no accordion will show up.  So it's nice and clean. 

I have this code pasted into a custom "Liquid" section that I have placed under the product description.  But you can put it wherever.  If you need any help making it work for you let me know and I'll help you out if I can.  Unfortunate that Shopify doesn't think these things through and forces store owners to become professional coders to make the platform they pay for work. 

Lucypink7
Tourist
5 0 1

Ahhh this is an incredible write-up. Thank you. Will dive into your response after work and will let you know how I get on. 

JoshuaRouillard
Tourist
12 1 2

How would I go about implementing this? I'm here with the same issue and thank god you answered this yesterday and not a year ago.

Nous333
Explorer
70 1 29

@JoshuaRouillard wrote:

How would I go about implementing this? I'm here with the same issue and thank god you answered this yesterday and not a year ago.


I laid it all out pretty clearly.  If you want to use an accordion all you have to do is decide where you want it and paste the code.  If you don't want to use an accordion you are going to have to do some extra work.  

smargolis
Excursionist
12 0 11

Hello! Thank you so much for your reponse thus far. 

In the photo attatched, I am trying to hyperlink the link shown in the photo within the "read more here" text. Is this possible? Thanks! shopifyissue-hyperlink.png

Nous333
Explorer
70 1 29

If that is a regular accordion that is built in to your Shopify theme, then it isn't possible.  You have to follow the steps laid out above, using that method it is possible.