Add photo from metafield at the bottom of the product information section.

[nativesons]

I added a metafield to include a photo on the product page with the hopes of displaying that photo under the product description by connecting a dynamic block. It allows us to connect dynamic text fields from the metafields, however not images. Is there a way to connect an image from the metafields in under the product description in the product information section?

[Liquid_xPert_SJ]

@nativesons 

can you please share the page url OR screenshot for better understanding that what you want to accomplish.

Thanks

[Sweans]

Hi @nativesons,

Here is a step-by-step guide to achieve your goal of displaying a metafield image under the product description in the product information section on

Shopify:

Step 1: Create a Metafield for the Image:
Navigate to Settings > Custom data > Products.

Step 2: Click Add definition and fill out the following details:
Name: Description Image
Select type: File
Validation: Accept only images (png, jpg, etc.)
Save the metafield definition.

Step 3: Upload the desired image to the metafield for each product.

Step 4: Navigate to Online Store > Themes > Actions > Edit code.

Step 5: Find the sections/main-product.liquid file where your product details are rendered and Add a Dynamic Block for the Image in block section

{
"type": "description_image",
"name": "Description Image",
"limit": 1
},

Step 6: Add following code before endcase

{%- when 'description_image' -%}
{% if product.metafields.custom.description_image %}
<div class="description-image">
<img src="{{ product.metafields.custom.description_image | file_url }}" width="auto" height="auto">
</div>
{% endif %}

(screenshot 5)

Step 7: Add custom block to product template after description

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans

[nativesons]

I seem to be having a few troubles with this as there are a few differences in the way that my code is rendered.

First I wanted to double check that I am pasting the Dynamic Block code in the correct section.

 From there I was unable to find any {% endcase %}

I posted it here and it gave me an error stating that the tag "when" was unknown. It appears that our code uses an "if" tag for many things.

 

 If I switch the "when" tag to an "if" it will allow me to save but it doesn't seem to have any effect.

 Thank you for the assistance.

[Sweans]

Sure, I'd be happy to assist. Please insert the following code on line 57, immediately after the for loop:

if block.type == 'flavor_profile'
if product.metafields.custom.flavor_profile
echo '<img src="{{ product.metafields.custom.flavor_profile | img_url }}" width="auto" height="auto">'
endif
endif

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[Dan-From-Ryviu]

Hi @nativesons 

You could try to add your metafield definitions code into this and check 

<img src="your metafield definition code" alt="product.title">