We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

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? Contact Me
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications

View solution in original post

Replies 8 (8)

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? Contact Me
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
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
3 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.

Spacio
Tourist
3 0 3

Hello Suman!

I cannot make this custom liquid inherit the same settings as the rest of the collapsible rows, I don't know if in my theme the classes are named differently. I'm using this theme, could you help me make it work, please?

 

Thank you!

Screenshot 2024-09-09 at 18.45.14 copy.jpg

somi5
Visitor
2 0 1

Hello, an error occurred during runtime, as shown below:
Liquid error (sections/main-product line 9): Could not find asset snippets/icon-caret.liquid
What should I do to modify it? Please help. Thank you.

20250325204819.png

Mujaida
Tourist
25 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.