Shopify themes, liquid, logos, and UX
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
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
These are all Metafields an contain different contents per product
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
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
Solved! Go to the solution
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,
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,
THANK YOU SOOOOO MUCH. It works flawless.
Is there a way to add zoom functionality to this image to open modal window with a bigger version of itself?
Where do you actually add this custom liquid block code?
On the product page, along with the other product details.
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!
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.
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.