How to make first product picture as default?

Solved
Highlighted
Explorer
86 7 14

Hello,

 

How to make the product page to show the first photo as default rather than the variant photo? When I click on the product the first picture that shows up in product page is the variant picture. I want to make the first picture show up first not the variant. I am using Brooklyn theme and it is like that by default.

 

Thank you in advance!

0 Likes
Highlighted
Shopify Partner
2294 117 353

This is an accepted solution.

Always backup a theme  before making customizations by exporting or duplicating

📃 Make sure to document you made this change in case more media types are added to variants and you want to use those features.

For BROOKLYN (VERSION 16.0.9)  in sections/product-template.liquid around line ~16

https://shopify.com/admin/themes/82978603054?key=sections/product-template.liquid&line=16

Find this line

{% assign featured_media = current_variant.featured_media | default: product.featured_media %}

and change to

{% assign featured_media = product.featured_media %}

 

If you prefer product control use either use a tag, or a metafield, as feature flag on individual product|variants or make settings for the theme

{% if product.tags contains "__featured_media_is_product" or product.metafields.theme_flags.featured_media == "product" %}
  {% assign featured_media = product.featured_media %}
{% else %}
  {% assign featured_media = current_variant.featured_media | default: product.featured_media %}
{% endif %}

https://shopify.com/admin/bulk?resource_name=Product&edit=metafields.theme_flags.featured_media%3Ast...

 

Notes:

assigned var feature_media is used with assigned var featured as a boolean to pass into the snippet media.liquid as state to apply a hide CSS class to gallery image

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
1 Like