Shopify themes, liquid, logos, and UX
I am trying to display photos of prepared orders (bouquets) on order status pages. The photos would be uploaded by the store staff during order fulfillment. Customers could then view these photos on the order status page.
It should be possible to set this up using order metafields. I have created an order metafield order.metafields.custom.order_pic, which is a list of images (files):
I have uploaded two images to this metafield for a test order. And, added the following liquid block to Settings -> Checkout -> Order status page:
<script>
{% if order.metafields["custom"]["order_pic"] != blank %}
var msg = '<h2 class="heading-2">Photos of your prepared bouquet(s)</h2><p> </p> <div>';
{% for item in order.metafields.custom.order_pic%}
msg = msg + '<img src="{{item | img_url}}">';
{% endfor %}
msg = msg + '</div>';
{% endif %}
Shopify.Checkout.OrderStatus.addContentBox(msg);
</script>
However, when I display order status page for that order, I see "No Image" gif instead of the images that I uploaded to the order:
Also, if I change the liquid code line above from
msg = msg + '<img src="{{item | img_url}}">';
to
msg = msg + '{{item}}';
so, it displays the content of the metafield value (i.e., not using a liquid filter img_url to get the image url), I get gid url printed (e.g., "gid://shopify/MediaImage/11111111111"):
Am I supposed to use a different liquid filter to get the metafield's image url, when displaying metafield values inside checkout's liquid block?
Any help with this is much appreciated! Thank you in advance!
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