Dynamic product content using Shopify metafields from Online store 2.0

Technical Questions Shopify
1

Hi, I’m really stuck with this one. I’ve made a section that has a structure of image with text. Here’s the product page with that section → Blueberry Cloud Blanket Set (3PCS) – Decor Boss
Here’s the section I’m talking about -

image
image2242×2432 314 KB

Here’s how I want it to look-

image
image1920×2076 161 KB

for all the product pages with dynamic images sources from Product meta fields.

I tried to to use custom code with this query <img src="{{ product.metafields.my_fields.product_image_2 }}" > but it never worked. For some reason, Shopify ain’t rendering the image, and instead of showing me the text as the output.

Then I thought maybe to make it dynamic I might have to add a product box and then add code inside that - yes, it still never worked.

Can someone anticipate whats the issue, as Shopify isn’t rendering the backend image that has been added to the metafield? And what can be done to do so?

Thanks in advance!!

2

Hi @anagh,

I don’t see any Builder content on the page you linked above, can you share the link to the Builder section entry you’re working on?

3

Really sorry for that, here you go →

Also, please have a look at the actual shopify preview page from here - Blueberry Cloud Blanket Set (3PCS) – Decor Boss

4

Hi Anagh! We got a live chat from you, so we are continuing the conversation there. I’ll be sure to post the best answer once we work out the solution!

1 Like
5

Hi Is there a simple answer for this? I also use Metafields from shopify for some extra info about my product. But don’t know how to get the image and text showing through builder? I found a video at the forum, but that was way over my head.

6

Hi @DeTheeplantage! It sounds to me like you just want to pull in the product data and bind it to an element to display on your page. Depending on how your page is laid out, you probably would just want to pull a product box on to the page, and then you can add more components to the product box itself (text elements, image element, etc) .

Once that is pulled onto the page, click the element you want to bind data to, and within the data binding flow you should be able to set to any field within the productInfo. I highly recommend checking out this tutorial: https://www.builder.io/blog/builder-data to see how to set up dynamic data binding

If you still get stuck, feel free to share a builder content page or contact our support team directly and we can take a further look!

7

Hi Tim,

It is almost correct, but you can add product meta fields to a product. So custom fields from the shopify admin.

When I go to the builder data as you suggested, I can see al the standard fields like Titel, tags and images, but not the meta fields of the product.

Thank you!

Anneke

de Theeplantage

Anneke Hulsbosch

+31 (0)6 41 79 20 53

info@detheeplantage.nl

www.detheeplantage.nl

Postadres: Generaal Bothastraat 40, 5642 NM Eindhoven

facebook instagram

8

Hi @DeTheeplantage,

We’ve created a forum post here that goes over the steps for blog pages, but, you can follow these steps for product pages too. Let us know if you have any question!