Image specifications product metafield in collapsible row

Solved

Image specifications product metafield in collapsible row

TrendBlend
Pathfinder
151 0 18

Hello, I currently have a collapsible row on my product page, showing all specifications of the product, but I want to add a specification image in the same collapsible row underneath the metafield with the specifications IF the specification image EXISTS ONLY. But the problem is when I try to add it to the store, the metafield 'Specificatie Bestand' does not show when I try to add it to the collapsible row. 

Schermafbeelding 2024-07-09 072930.pngSchermafbeelding 2024-07-09 072944.pngSchermafbeelding 2024-07-09 072958.png

Accepted Solution (1)
Sonya_2025
Shopify Partner
198 26 41

This is an accepted solution.

Oh, your tab headline text is "Product specifications", use the below code instead. and see if it is works.

{% if block.settings.heading == "Product Specifications" and product.metafields.custom.specification_image !=blank %} {{ product.metafields.custom.specification_image | image_url: width: 360 | image_tag }} {% endif %}

Feel free to send a DM to me if you need any further assistance

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME

View solution in original post

Replies 8 (8)

Sonya_2025
Shopify Partner
198 26 41

Hi @TrendBlend 

You need to add some customization liquid code in this block to achieve your needs.

If you can find where theme code implement the product spec function, then you can add the image into the code.

Which theme are you using? I can find you a solution if it is a free theme

 

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME
TrendBlend
Pathfinder
151 0 18

Hello @Sonya_2025, im using dawn theme

Sonya_2025
Shopify Partner
198 26 41

ok. which block are you using

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME
Sonya_2025
Shopify Partner
198 26 41

Hi @TrendBlend 

Pls follow below steps to achieve your needs.

1. Open the theme code editor

2.Find main-product.liquid from the section fold.

 

Sonya_2025_0-1720510016312.png

3.Paste the code to the marked place

                      {% if block.settings.heading == "Product Specificaties" and product.metafields.custom.specification_image !=blank %}
                         {{ product.metafields.custom.specification_image | image_url: width: 360 | image_tag }}
                      {% endif %}

Hope this helps.

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME
TrendBlend
Pathfinder
151 0 18

Hello @Sonya_2025 , the image still does not show underneath the collapsible row 'Product specificaties' URL: SlimCharge - Mini Power Bank – TrendBlend

Schermafbeelding 2024-07-09 125208.pngSchermafbeelding 2024-07-09 125154.png

Sonya_2025
Shopify Partner
198 26 41

This is an accepted solution.

Oh, your tab headline text is "Product specifications", use the below code instead. and see if it is works.

{% if block.settings.heading == "Product Specifications" and product.metafields.custom.specification_image !=blank %} {{ product.metafields.custom.specification_image | image_url: width: 360 | image_tag }} {% endif %}

Feel free to send a DM to me if you need any further assistance

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME
TrendBlend
Pathfinder
151 0 18

hello @Sonya_2025 , thank you it is working, is it also possible to center the image?

Sonya_2025
Shopify Partner
198 26 41

Try this code instead to center the image

                      <div style="width:100%; text-align: center">
                      {% if block.settings.heading == "Product Specifications" and product.metafields.custom.specification_image !=blank %}
                         {{ product.metafields.custom.specification_image | image_url: width: 360 | image_tag }}
                      {% endif %}
                      </div>
Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME