Can I add custom links to products pages? Or in the product description sections?

Store Design
1

Hi,

I would like to offer some audio ‘Taster’, packs (small amount of samples for promotion) download links for each of the products on my website.

What would the best way to go about this?

thanks

scott

2

Hi @Gen-Audio ,

You can just refer to the following code:

fetch('https://cdn.shopify.com/s/files/1/0518/1269/6219/files/sample-3s.mp3')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'sample-3s.mp3';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

You just need to add mp3 file at settings > file, then add event and code at product description, it will work fine.

Hope it helps!

3

I really appreciate your reply but where would this code go?
I was thinking of putting the taster audio samples in a zip file too not just an mp3

thanks :folded_hands:

4

Hi @Gen-Audio ,

Please follow the steps below:

  • Step 1: Upload audio at Settings > Files, then copy its link.

  • Step 2: Go to product description and add following code. Please click ‘show editor’ before adding code:

Screenshot.png
Screenshot.png780×295 14.9 KB

Code:
  • Step 3: Go to Assets > global.js and paste this at the bottom of the file:
class AudioComponent extends HTMLElement {
  constructor() {
    super();
    
    this.addEventListener('click', () => {
      const url = this.dataset.url;
      fetch(url)
      .then(resp => resp.blob())
      .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        // the filename you want
        a.download = 'sample-3s.mp3';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        alert('your file has downloaded!');
      })
      .catch(() => alert('oh no!'));            
    });
  }
}
customElements.define('audio-component', AudioComponent);

Hope it is clear to you.

5

That’s great thanks :folded_hands:

will give this a shot tomorrow

regards

6

@LitCommerce

Hi,

I have tried to do this but don’t understand how to point towards a .zip file. The zip file will contain a few samples from each product.

This part: a.download = ‘sample-3s.mp3’;

How would I replace this to download the .zip file?

As the .zip file download link is added to the first part of code for example:

download taster pack

Thanks for your help

7

Hi @Gen-Audio ,

With zip file, you still follow the same steps as above.

Code: a.download = ‘sample-3s.mp3’

it just renames the download file, you just need to change it to .zip, ex: a.download = ‘sample-audio.zip’

Hope it helps!

8

@LitCommerce

Thanks again. This makes sense now. Really appreciate your help

Regards

Scott

9

Hi @Gen-Audio ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.