Change Default Product Image To Be The First One At Product Page

Store Design
,

Topic summary

On the e-com.express theme, the default product image set in the editor does not appear first on the product page; a variant image shows instead.

Attempted fix: in product-template.liquid, replaced:

  • current_variant = product.selected_or_first_available_variant
    with:
  • featured_media = product.featured_media

Result: the desired default (featured) image now displays first on all product pages.

Regression: “Buy Now” and “Add to Cart” buttons disappeared after the change.

Context: product.selected_or_first_available_variant typically controls the currently selected variant (used by purchase UI), while product.featured_media refers to the product’s main media item (image/video).

Status: unresolved. The author asks whether additional code is needed to keep the default image first while restoring the purchase buttons. No solutions or follow-ups yet; key question remains how to adjust the template without breaking the cart/checkout UI.

Summarized with AI on January 12. AI used: gpt-5.
1

Hello,

I like to repost this problem because there was a mistake when speaking about the page where the issue happens.

In e-com.express theme I have set the default image by drag and drop editor. However, when a visitor clicks the default product image he/she goes to the product page where the default image is not visible as the first image. There is a variant image instead.

Tried to fix this in the Sections and editing product-template.liquid and changing the first line:

{% assign current_variant = product.selected_or_first_available_variant %}

to this:
{% assign featured_media = product.featured_media %}

This fix worked and changed the default images to be the first ones at every product page.

Unfortunately, after this all the product pages lost Buy Now and Add To Cart buttons.

A piece of additional code somewhere?