Adding Image inside collapsible row on Product Page with if logic

Solved

Adding Image inside collapsible row on Product Page with if logic

Marco90
Visitor
2 0 0

Hi Team,

 

i'm fairly new to Shopify and i have a problem which i can't seem to solve and its driving me nuts, hopefully somebod can help me 😉

I already made some collapsible rows on my product page with Basic Text

 

1.png

 

These are all Metafields an contain different contents per product

 

2.png

 

But what I now need is one more collapsible row with an custom image (not Product image) inside BUT the row should not be shown if theres no image (different products will have different images, some will have no image)

 

So I already added a new definiton with only images allowed

3.png

 

4.png

 

How do i get this inside a row and how to hide the row if theres no image attached?

I am so lost at this point, help would be greatly appreciated.

 

Thanks in advance

Marco

Accepted Solution (1)

SumanSaurabh
Shopify Partner
69 26 27

This is an accepted solution.

Hi @Marco90 

 

You can add a 'Custom Liquid' block with the code given below. Make sure to replace namespace and key with your own metafield definition. The namespace and key in below code is custom.myimage and used at two places.

{%- if product.metafields.custom.myimage -%}
  <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
    <details id="Details-{{ block.id }}-{{ section.id }}">
      <summary>
        <div class="summary__title">
          {% render 'icon-accordion', icon: 'check_mark' %}
          <h2 class="h4 accordion__title inline-richtext">Collapsible Row Title</h2>
        </div>
        {% render 'icon-caret' %}
      </summary>
      <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
        {{ product.metafields.custom.myimage | image_url: width: 1200 | image_tag: widths: '300, 600, 900, 1200' }}
      </div>
    </details>
  </div>
{%- endif -%}

 

Best regards,

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 6 (6)

SumanSaurabh
Shopify Partner
69 26 27

This is an accepted solution.

Hi @Marco90 

 

You can add a 'Custom Liquid' block with the code given below. Make sure to replace namespace and key with your own metafield definition. The namespace and key in below code is custom.myimage and used at two places.

{%- if product.metafields.custom.myimage -%}
  <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
    <details id="Details-{{ block.id }}-{{ section.id }}">
      <summary>
        <div class="summary__title">
          {% render 'icon-accordion', icon: 'check_mark' %}
          <h2 class="h4 accordion__title inline-richtext">Collapsible Row Title</h2>
        </div>
        {% render 'icon-caret' %}
      </summary>
      <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
        {{ product.metafields.custom.myimage | image_url: width: 1200 | image_tag: widths: '300, 600, 900, 1200' }}
      </div>
    </details>
  </div>
{%- endif -%}

 

Best regards,

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️
Marco90
Visitor
2 0 0

THANK YOU SOOOOO MUCH. It works flawless.

LIYAShop
Excursionist
30 2 2

Is there a way to add zoom functionality to this image to open modal window with a bigger version of itself?

FluffyMeatball
Visitor
2 0 0

Where do you actually add this custom liquid block code?

LIYAShop
Excursionist
30 2 2

On the product page, along with the other product details.

Mujaida
Tourist
24 0 1

Hi Marco, 

I want to add custom image using metafield can you please give details about how to add the images only in metafield. Please give step by step reference.