Change First Image Selected on Product Page to another image

ShopOwner28
Excursionist
15 0 13

Hi there,

 

I'd like the image on my collections page to be different than the product image page. I'd like the product image to be the second or third image in the gallery.

 

I'm using Reformation theme!

 

 

Thanks!

Replies 4 (4)

Arif_Shopidevs
Shopify Partner
133 18 13

"Hello, could you please share your store URL? Additionally, would it be possible for you to share the theme file for the card-product.liquid? Then, we can provide you with the code to adjust in your theme.

If we provide the code for the Dawn theme, would you be able to implement it in your theme? I believe your theme is paid and the code might not be readily available on the web.

Thank you."

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Arif_Shopidevs
Shopify Partner
133 18 13

Here is a sample code i have done for you in dawn theme  card-product.liquid 

{%- if card_product.media[1] != null %}
  <img
    srcset="
      {%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
      {%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
      {%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
      {%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
      {%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
      {%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
      {{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
    "
    src="{{ card_product.media[1] | 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=""
    class="motion-reduce"
    loading="lazy"
    width="{{ card_product.media[1].width }}"
    height="{{ card_product.media[1].height }}"
  >  
{%- else -%}
  <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 }}"
  >
{%- endif -%}

change to bellow code

<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 }}"
  >

This will show the second image. We set fall back so that if any product has no second image it will show the first featured image.
thank you

 

to be  

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

Dawood_Mirza_
Excursionist
79 12 21

Hi ShopOwner28,

It would requires some familiarity with code editing:

1. Identify the Collection Image Code: Examine the Reformation theme code to locate the section that controls how collection images are displayed. This might involve searching for keywords like "collection-image" or "product-grid-item" in the theme files.

2. Modify the Code to Use a Different Image: Once you locate the relevant code section, you can potentially modify it to use the second or third image from the product gallery instead of the main product image. This might involve referencing the product's media list or using a loop to access specific images within the gallery.

Also Some theme provide collections where there is a manual option to select image, Have a look if your theme has such features

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.

PageFly-Noah
Astronaut
1119 201 220

This is Noah from PageFly - Shopify Page Builder App

 

 Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

<style>
.swiper-container .photo-container .photo:nth-child(1){
  display: none !important;
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.