How can I dynamically fetch artist bios on a product page?

Technical Q&A
1

Long story short - I have a store selling the artwork of a variety of artists. On the product page I added a snippet that I created to include an artist bio based on whatever artist did the artwork.

{% include 'artist-info' %}

I’d like to dynamically fetch info for this snippet based on who the artist is. All of my products have “product vendor” set to the artist’s name.

Is there a way I can do something like… if vendor: this.vendor

{{ stored biography }}

I’m willing to save each bio as a seperate HTML file in assets if thats something that makes it easier. Any other suggestions / references are welcome, I just thought the product vendor idea might be the simplest right now.

Thanks in advance.

2

Hey @rkimo ,

I understand that you want to add an artist bio based on whatever artist did the work. You have the artist’s name set as the “product vendor”.

Try this out:

Before you customize your theme:

  • Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

Here’s how to access your theme files:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions > Edit code.
    • The code editor shows a directory of theme files on the left, and a space to view and edit the files on the right.
    • When you click a file in the directory on the left, it opens in the code editor.

Add a new theme file called ‘artist-info.liquid’:

  1. From the Snippets directory, click Add a new snippet.

  2. Enter artist-info.liquid into the box.

  3. Click Create snippet.

  4. Copy/paste this code into the file:

    <script type="text/javascript">
  var artist_info = {
    "Vendor Name #1": "The bio for the artist goes here.",
    "Vendor Name #2": "The bio for the artist goes here.",
    "Vendor Name #3": "The bio for the artist goes here."
  };

  var current_artist = "{{ vendor }}";

  document.addEventListener("DOMContentLoaded", function(event) {
    if (artist_info[current_artist]) {
      $("#artist-info").show();
      $("#artist-info").text(artist_info[current_artist]);
    }
  });
</script>

<p id="artist-info" style="display: none;"></p>

  5. Click Save.

Edit your product page, normally product-template.liquid or product.liquid:

  1. Click product-template.liquid in the Sections directory.

  2. Find the area where you want to add the artist info.

  3. Copy/paste this code to that spot:

    {%- assign vendor = product.vendor -%} {% include 'artist-info' with vendor %}

  4. Click Save.

Add your artist bios:

  1. Click artist-info.liquid in the Snippets directory.

  2. Edit this section of code to add all your vendors and bios:

    var artist_info = {
    "Vendor Name #1": "The bio for the artist goes here.",
    "Vendor Name #2": "The bio for the artist goes here.",
    "Vendor Name #3": "The bio for the artist goes here."
  };

    For example:

    var artist_info = {
    "Hank Williams": "Hank Williams was an American singer-songwriter and musician. Regarded as one of the most significant and influential American singers and songwriters of the 20th century.",
    "Merle Haggard": "Merle Haggard was an American country singer, songwriter, guitarist, and fiddler.",
    "Buck Owens": "Buck Owns was an American musician, singer, songwriter and band leader who had 21 No. 1 hits on the Billboard country music charts with his band the Buckaroos."
  };

  3. Click Save and go test it out!

    • Come back to this file whenever you need to add a new vendor/artist and a bio.

Let me know if this answers your question or if you need further help!

1 Like
3

It works perfectly! Thank you so much

1 Like
4

Oops, one more question - some of my artist bios have separate paragraphs, links, etc. Is there a way to make

var artist_info

an HTML variable instead? Or something I’m able to do a little bit of simple formatting in?

5

Actually I figured it out

changed

$("#artist-info").text(artist_info[current_artist]);

to

$("#artist-info").html(artist_info[current_artist]);

and then just entered an html string as the variable.

Thank you :- )

6

I was just typing my reply when I saw you got this figured out ?

Great job, and good luck to you! Let me know if you need further help or
ever want to chat about your store.

7

For extended content make the vendor an actual collection and use it’s collection.description.

Or use metafields either on the individual products, the collection or the shop itself.

Both options let you serve static pages skipping the frontend rendering.

8

I tried this solution in shopify 2.0 and it didn’t work. instead of using

{% include ‘artist-info’ with vendor %}

I used render instead since include is not supported.

{% render ‘artist-info’ with vendor %}

But still nothing shows. I followed all the steps and don’t seem to see where I went wrong.

9

@sherrylogist Note that Rkimo wanted to “dynamically fetch” the info thus the javascript approach.

Inspect the source of the page and see if the snippet is at least outputting something.

Since this is javascript based also check the console for errors.

If you don’t need or know what “dynamically fetch” is then just render that info directly into the html that is served to the customers browser skipping the javascript parts.

So a more robust render solution is to just use the .description or .content property of actual objects so your not having to hand edit javascript for each artist/vendor.

Such as create an artist /page that has the handle ‘artist-name’ whose content you render with {{ pages[‘artist-name’].content }}

{% artist_name = product.vendor | handle %}
{{ pages[artist_name].content }}
{% comment %}for product.vendor you may need to handelize it first into another variable
https://shopify.dev/api/liquid/filters#handleize {% endcomment %}