Shopify themes, liquid, logos, and UX
Hey i just build my shopify store but i want a different product image on the collection page than on the product page. Does anybody know how to do this? Would appreciate it!
Link:https://e8aaa0-3.myshopify.com/
password:mohwhi
Solved! Go to the solution
This is an accepted solution.
Go to your Online store > Themes > Edit code > open card-product.liquid, find this line of code (line 59 to 78)
<img
srcset="
{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"
src="{{ card_product.featured_media | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ card_product.featured_media.alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}
loading="lazy"
{% endunless %}
width="{{ card_product.featured_media.width }}"
height="{{ card_product.featured_media.height }}"
>
Replace with this code
<img
srcset="
{%- if card_product.media[2].width >= 165 -%}{{ card_product.media[2] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[2].width >= 360 -%}{{ card_product.media[2] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[2].width >= 533 -%}{{ card_product.media[2] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[2].width >= 720 -%}{{ card_product.media[2] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[2].width >= 940 -%}{{ card_product.media[2] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[2].width >= 1066 -%}{{ card_product.media[2] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[2] | image_url }} {{ card_product.media[2].width }}w
"
src="{{ card_product.media[2] | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ card_product.media[2].alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}
loading="lazy"
{% endunless %}
width="{{ card_product.media[2].width }}"
height="{{ card_product.media[2].height }}"
>
It will show 3rd image of your product as a thumbnail image. Because it has the option to show 2nd image of the product when hovering, I changed the default to 3rd image.
You can make another image appears by changing all values in this code card_product.media[2]
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is an accepted solution.
Go to your Online store > Themes > Edit code > open card-product.liquid, find this line of code (line 59 to 78)
<img
srcset="
{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"
src="{{ card_product.featured_media | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ card_product.featured_media.alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}
loading="lazy"
{% endunless %}
width="{{ card_product.featured_media.width }}"
height="{{ card_product.featured_media.height }}"
>
Replace with this code
<img
srcset="
{%- if card_product.media[2].width >= 165 -%}{{ card_product.media[2] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[2].width >= 360 -%}{{ card_product.media[2] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[2].width >= 533 -%}{{ card_product.media[2] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[2].width >= 720 -%}{{ card_product.media[2] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[2].width >= 940 -%}{{ card_product.media[2] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[2].width >= 1066 -%}{{ card_product.media[2] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[2] | image_url }} {{ card_product.media[2].width }}w
"
src="{{ card_product.media[2] | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ card_product.media[2].alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}
loading="lazy"
{% endunless %}
width="{{ card_product.media[2].width }}"
height="{{ card_product.media[2].height }}"
>
It will show 3rd image of your product as a thumbnail image. Because it has the option to show 2nd image of the product when hovering, I changed the default to 3rd image.
You can make another image appears by changing all values in this code card_product.media[2]
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hey thank you very much! but can i change that it shows the 3rd? I would like it to be the 4th.
Kind regards
Daan
Please find all this type of element card_product.media[2], change 2 to 3 to appear 4th image
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
thanks!!
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi, I'm using the Pipeline 7.2.2 theme. I'm trying to figure out how to use clean product photos on the collection pages but when you click through to the actual product page, the first photo displayed is a lifestyle photo with a model wearing the product like this brand below Polène.
Do you know how to do this?
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025