I have been trying to make my product page show a featured image instead of the first variant image. I can turn off the selected variant button and I can make the featured image show, but instead of just showing the featured image first, it’s replacing the variant image. (so the carousel shows: featured, featured, variant 2, variant 3, etc., but I need: featured, variant 1, variant 2, etc.)
This is what I have in the product-media-gallery.liquid file:
{%- if product.selected_or_first_available_variant.featured_media != null -%}
{%- assign featured_media = product.featured_media -%}
<li
id="Slide-{{ section.id }}-{{ featured_media.id }}{{ id_append }}"
class="product__media-item grid__item slider__slide is-active{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
data-media-id="{{ section.id }}-{{ featured_media.id }}"
>
{%- assign media_position = 1 -%}
{% render 'product-thumbnail',
media: featured_media,
media_count: media_count,
position: media_position,
desktop_layout: section.settings.gallery_layout,
mobile_layout: section.settings.mobile_thumbnails,
loop: section.settings.enable_video_looping,
modal_id: section.id,
xr_button: true,
media_width: media_width,
media_fit: section.settings.media_fit,
constrain_to_viewport: section.settings.constrain_to_viewport,
lazy_load: false
%}
How do I show the featured image and keep the variant images available?
