Shopify themes, liquid, logos, and UX
I have added a few metafields to the image and I am trying to access it on product.liquid. Currently, I am just logging it. I wanted to know if there is a way to access it on the liquid page. What is the syntax?
You can refer this article from Shopify https://help.shopify.com/en/manual/products/metafields#show-metafields-in-the-storefront
Hi Frank,
I can access product metafields in the liquid but not the image metafields.
https://help.shopify.com/en/api/reference/products/product-image#metafield
Can you give me a sample product URL (has metafields)?
Did you ever resolve this?
I am also trying to assign and access image metafields for use in my storefront/theme code.
If I understand correctly, you are not trying to access product metafields. Rather, you are trying to access metafields associated with individual images. Those images may be associated with products.
Metafield referencing a single image
You can access a metafield of type image using the following syntax :
product.metafields.my_metafield_of_type_image
It returns a media object which has properties such as id, media_type, alt...
Other image properties are available under :
product.metafields.my_metafield_of_type_image.preview_image
You'll get an image object which has properties such as src.
Metafield with multiple images
If your metafield accepts multiple images, use the value property to fetch them all:
{% assign medias = product.metafields.my_metafield_with_multiple_images.value %}
{% assign mediaCount = medias.count %}
{% for media in medias %}
{{ media.id }}
{% endfor %}
Related:
If you're accessing product.images, omit the value property :
{% assign medias = product.images %}
{% assign mediaCount = medias.count %}
{% for media in medias %}
{{ media.id }}
{% endfor %}
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024