Metafields code adding a gallery

Shopify Discussion
5

About metafields:

I tried putting liquid code, html, and javascript into the metafield’s value - only the html and javascript is rendered:

image
image899×472 55.8 KB

image
image1568×632 78.3 KB

For liquid, the placeholder is printed as it is
image
image1280×516 60.3 KB

So,

  • If your app gives you a plain HTML/JS embed (a <div> + <script>), a metafield works perfectly.
  • If the code contains any Liquid ({% ... %} tags, {{ ... }} objects, or an app snippet/block reference), that part will print as plain text from a metafield instead of running.

What you can do:
Setup for a different gallery per collection (no editing the theme per collection):

  1. Settings > Custom data > Collections > Add definition. Name it Gallery code, type Multi-line text. The key becomes custom.gallery_code.
  2. Open each collection, paste that collection’s embed into the Gallery code field, Save.
  3. In the theme editor, on your Collection template, add one Custom Liquid block/section with just:
{{ collection.metafields.custom.gallery_code.value }}

Now every collection renders its own gallery automatically. Collections with an empty field show nothing, and you do not need to touch the theme again when you add a new collection.

I Tested on a Dawn collection page: pasted an embed into a custom.gallery_code multi-line text metafield and output it on the collection template. The HTML rendered and the embed’s <script> ran normally. When I dropped a Liquid tag ({{ collection.title }}) into the metafield it printed literally instead of executing, which confirms the point above.

If your app code is Liquid: keep it in a Custom Liquid block, but you can still drive it per collection by storing just a small value in the metafield (a gallery ID or handle) and branching on {{ collection.metafields.custom.gallery_code.value }} inside that block. And if the gallery is an app block rather than a plain embed, it may need the app’s own section/block to initialize rather than a raw paste.