Metafields code adding a gallery

Shopify Discussion
1

I am hoping to use Metafields so I can add a different gallery to all my collections, I have looked at metafields but can’t see the most suitable field for the code, I try JSON but wouldn’t work, any suggestions. I have the gallery setup in an app and can copy the code across it works normally if I add as a custom liquid but not sure how to do it in metafields

3

Hi @sallie1978

Okay, can you send me the design you want? I’ll review it and then provide you with a proper update on how it can be implemented.

Best regards,
Devcoder :laptop:

4

It’s a very general question.

Depends on what you want to show in your gallery.

General answer – “list of metaobject references” – this would allow you to cover any data, but maybe unnecessary complex.

JSON should be fine’ish too, but requires some coding experience to use properly.

“List of product references” can be fine to do stuff similar to “Featured collection” sections.

Do you have this app-based gallery somewhere on your site? – share a link to that page to get better understanding of what you want to accomplish.

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.

6

Hello @sallie1978

For this setup, I would not use JSON unless the gallery app specifically requires JSON. A better approach is usually to create a collection metafield and then output that metafield inside your collection template.

You can try this:

  1. Go to Settings > Custom data > Collections
  2. Click Add definition
  3. Create a metafield like this:

Name: Collection Gallery Code
Namespace and key: custom.gallery_code
Type: Multi-line text

Then go to each collection and paste the gallery embed/code into that metafield.

After that, go to your collection template and add a Custom liquid block where you want the gallery to appear, then use:

{% if collection.metafields.custom.gallery_code != blank %}
  {{ collection.metafields.custom.gallery_code.value }}
{% endif %}

This should allow you to show a different gallery for each collection.

One important thing: if the gallery code contains Liquid code like {% render %}, {% section %}, or app snippet code, Shopify may not process that properly when it is stored inside a metafield. In that case, the better method is to store only the gallery ID or handle in the metafield, then use that value inside your theme code.

Another easier alternative is to use a gallery app that already supports showing different galleries on different collections. Many Shopify merchants use Essential Grid Gallery for this type of setup. Their support team is also very helpful, and if you give them collaborator access to your store, they can help set it up for you.

You can follow the video tutorial or check the step-by-step documentation.

7

Thanks is from Robin Pro app, this is the code

8

You need to use the </> button to paste HTML code, otherwise forum engine will mangle it.
Would be helpful to see it anyway.

Looks like I did not understand your goal properly – are you looking to store HTML code in metafield and output it later?

Than follow the @ajaycodewiz guide above and mark his post as solution for others to find it faster.

But you can also follow the app documentation and embed this HTML into collection description, given that it’s only a short code like this:

<div class="robin-pro" id="cb72c1d9-d362-46eb-8cf7-af0b85307746"></div>