New Shopify Certification now available: Liquid Storefronts for Theme Developers

Different file download for each variant using metafields.

2 0 0

I have free downloadable PDFs set up as a product with a button that downloads the file using a product file metafield rather than through the ordering process.


I have the download available in multiple languages and I want to use a variant dropdown menu to select the language.


How do I make the target file change depending on which variant has been selected?  

Replies 2 (2)
Shopify Partner
5931 537 1241

If you need teh below customization created for you then contact me directly by mail for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.


If currently selecting a variant reloads the page does the correct file download?


If so the simplest method is in a custom-lliquid or custom-html section/block to create javascript to just reload the page when the variant changes.

Plenty of posts about that for various themes on the forums refresh reload page variant changes insert themename


Alternatively have different products for different languages and just make the select dropdown send them to the relevant page.


Most themes have javascript event like variantChange or some such or you can listen to the underlying hidden select if it exists for your theme.

Example starting code of functions set for the .single-option-selector element, untested

Using jquery library if that's also in the theme

$('.single-option-selector').on('change', function(){ /*yourlogichere*/ })

only javascript

function yourbusinesslogicfunctionname (){
/* logic when the variant changes */
function variant_change_listener(elementSelector, callback){
 const selector = elementSelector;
 const emitting_element = document.querySelector(selector);

 emitting_element.addEventListener('change', function(){
  callback ? callback() : console.log("variant changed, but no callback function");
// either call listening function directly in flow of document or set it to run after document ready

variant_change_listener('.single-option-selector', yourbusinesslogicfunctionname );


Though some like the latest Dawn theme and it's offshoots use a pubsub event model.

i.e. something like the following keeping in mind metafield data is not part of the ajax json api so the metafields stuff needs to be already in the html or you have to fetch it using the section rendering api

<span id="ELEMENT-ID"></span>
<script type="text/javascript">
    const element = document.getElementByID("#ELEMENT-ID")
    updateElementSubscriber = subscribe("variant-change", (e)=>{
        element.innerHTML =





Save time & money ,Ask Questions The Smart Way

Confused? Busy? Get the solution you need

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

Answers powered by coffee Buy Paul a Coffee for more answers or donate to

2 0 0

I have used this to create a link to download a pdf on the product page.


<a class="button" href="{{ }}">DOWNLOAD FREE PDF</a>


I thought it would be as simple as creating a variant metafield and adding each file to the  metafield than using the same code with the variant metafield.

<a class="button" href="{{ variant.metafields.my_fields.language.value.url }}">DOWNLOAD FREE PDF</a>


I am quite new to using metafields.