Adding custom image assets per product - metafields or another better way?

Highlighted
Tourist
39 0 3

Hey All, 
 

On each product page we have 2-3 unique icons that we want to display next to some sort of benefit. These differ by product. IE

* Benefit 1
! Benefit 2
& Benefit 3

Each icon is an svg file. Initially, I thought using metafields would be the best way to accomplish it, but it looks like you can't use liquid url filters to load the shopify image urls like so: 

<ul class="product-benefits-list">
	{% assign benefit-1 = product.metafields.benefit_1 %}
	{% assign benefit-2 = product.metafields.benefit_2 %}
	{% assign benefit-3 = product.metafields.benefit_3 %}
	<li><img src="{{ benefit-1['icon'] }}" alt=""><span>{{ benefit-1['description'] }}</span></li>
	<li><img src="{{ benefit-2['icon'] }}" alt=""><span>{{ benefit-2['description'] }}</span></li>
	<li><img src="{{ benefit-3['icon'] }}" alt=""><span>{{ benefit-3['description'] }}</span></li>
</ul>

In this case an example of an icon metafield value is {{ 'icons_pill.svg' | asset_url }}

Does anyone have suggestions on how to best accomplish this? A little new to shopify development so any suggestions would be appreciated!

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
228 0 37

Hi, Phil!
 
Anders from the Social Care Team here. Thanks for reaching out today!

Admittedly, while my Liquid knowledge is a bit thin, we actually do have a handy guide which goes through the process of creating and adding SVG Icons through Liquid. You can find that HERE and it is apart of our larger Liquid Tutorials page. 

Best of luck with the work!

Anders3 | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
39 0 3

Hi Anders, 

Thanks for the reply!

I actually have no troulbe including and getting the SVGs themselves to display correctly, I'm just curious as to the best way to include custom images that are specific to a product, but are not "product images" uploaded via the product page in the shopify UI. 

I'd like to have different icons show up for each product, but don't want to upload them as product images because they don't belong in the carousel etc. 

The metafield approach would seem to work, but it looks like you can't use liquid tags as the value of a metafield and expect them to be processed / render. 

Does that make sense? 

0 Likes
Highlighted
New Member
4 0 0

Hello,
I know this post is 3 years old but I really want to know if you ever found a way to do this. Actually, I'm searching for the same thing for my client.
We need additional photos aside from the product pictures. I've been looking into this for 3 days now but I have no luck with this.
Last night I came across your post and I realized this is exactly what I'm looking for but unfortunately, nobody replied to your query.
I will appreciate it so much if you know how to do this and help me out with this.

Thank you so much.

0 Likes
Highlighted
Tourist
7 0 2

So I'm the OP, but stumbled upon this post again today trying to do the same thing for a different client. 

Originally, I just uploaded these images to a different cdn, and then created a new image_url metafield for each. I'm looking into how to do this in a better way now and will let you know if I find a better solution. 

 

1 Like
Highlighted
Excursionist
13 1 0

OP, any luck with this?

0 Likes
Highlighted
Tourist
7 0 2

Ended up figuring out the metafields approach which is a bit tedious, but works just fine.

As an example, let's say you wanted to display a different image some place on your product template for each product.

First, I need to add a custom image file that I want to render for each product page to my assets folder. I'd recommend using a naming convention. For this project, it was: extended-description_{product-slug}.jpg.

Now I have images sitting in Shopify which are accessible through asset_urls like normal. 

  • extended-description_product-1.jpg
  • extended-description_product-2.jpg
  • extended-description_product-3.jpg

Second, you need to create a metafield at the product level for each product where you might want to display this image. I've been using Metafields Guru (free shopify app) and it works great. You'll need to specify a key, namespace, and value type. 

In my case, this image was going to go in an extended description section where I displayed a lifestyle image and some text. So I used extended-description as the namespace and image as the key. That way later I can access these values like so in liquid:

product.metafields.extended-description.image
product.metafields.extended-description.text

 

Once created, it would look something like this in metafields guru: 

Dr. Vim's ~ Customers ~ Shopify 2020-08-12 14-38-59.jpg

 

Now, it's time to put the metafields to work in the template. In my case, my product template is `product-template.liquid` Because you have those metafields all set and the images uploaded, you can access them like so (an example from my template):'

 

{% assign extended-description = product.metafields.extended-description %}
<div class="product__extended-description-text">
    <p>{{ extended-description.text }}</p>
</div>

<div class="product__extended-description-image">
    <img src="{{ extended-description.image | asset_url }}" alt="{{ product.title }}" />
</div>

 

The assign bit isn't necessary, but is nice to keep your variables a bit shorter. 

1 Like
Excursionist
13 1 0

Thanks OP for sharing! I'm so close to solving this issue.

I went through your step, but I get a broken image tag:
file:///cdn.shopify.com/s/files/1/0043/4018/7247/t/13/assets/extended-description_product-2.jpg%3F31...

When you image is actually here:
https://cdn.shopify.com/s/files/1/0043/4018/7247/files/extended-description_product-2.jpg?v=15972648...

Any idea why this happens?

0 Likes
Highlighted
Tourist
7 0 2

@torasaki mind sharing your code snippet? 

0 Likes
Highlighted
Excursionist
13 1 0

Here it is, I followed your code exactly.

{% assign extended-description = product.metafields.extended-description %}
<div class="product__extended-description-text">
      <p>{{ extended-description.text }}</p>
</div>

<div class="product__extended-description-image">
      <img src="{{ extended-description.image | asset_url }}" alt="{{ product.title }}" />
</div>

 

0 Likes