Preselected variant image

Last updated: Feb 21, 2019

Deep-linking can be used to pre-select a specific variant on a product page. In order to load the image of a deep-linked product, the product.selected_or_first_available_variant.featured_image Liquid attribute must be referenced. This example demonstrates how this object can be used on a product page.

Add the code example where you would like to output a product's featured image on a product page.
The default filter is used to select the product's featured_image if a variant image does not exist.

{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

<a href="{{ featured_image | img_url: '1024x' }}">
  <img src="{{ featured_image | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
</a>

Please note: We have intentionally limited CSS and JavaScript, and removed translation strings in order to keep these examples compatible with any theme. Any CSS we have included is for accessibility or rendering purposes.