Changing Product Images from Carousel to Grid

guido23acuna · February 11, 2022, 2:22am

Hi, im working on a website that needs to change the carousel on the product page to a grid, when i change the design the grid shows up but the variant picker stops working and the grid shows me all the images of the product, it doesnt end the for loop with the variant images.

I need to change the carousel for a grid and that the variant picker changes the images as it does with the carousel.

Here is the product images code:

{%- if product.media.size > 0 -%}
{%- assign show_thumbnails_if_one_media = true -%}

{%- assign selected_media = product.selected_variant.featured_media | default: product.featured_media -%}

{%- for media in product.media -%} {%- assign is_media_group = false -%} {%- assign is_media_filtered = false -%} {%- assign media_alt = media.alt -%}

{%- if media.alt contains ‘#’ -%}
{%- assign is_media_group = true -%}
{%- assign alt_parts = media.alt | split: ‘#’ -%}

{%- comment -%}
If the custom ALT tag contains two parts (for instance “My custom alt # color_blue”) then the first part is actually used
as a custom ALT tag
{%- endcomment -%}

{%- if alt_parts.size == 2 and alt_parts.first != blank -%}
{%- assign media_alt = alt_parts.first | strip -%}
{%- else -%}
{%- assign media_alt = product.title -%}
{%- endif -%}

{%- assign media_group_parts = alt_parts.last | split: ‘_’ -%}

{%- for option in product.options -%}
{%- assign downcase_option = option | downcase -%}
{%- assign downcase_group_option = media_group_parts.first | strip | downcase -%}

{%- if downcase_option == downcase_group_option -%}
{%- assign option_setting = ‘option’ | append: forloop.index -%}
{%- assign option_value = product.selected_or_first_available_variant[option_setting] | downcase -%}

{%- assign downcase_group_value = media_group_parts.last | strip | downcase -%}
{%- assign media_variant_ids = media.variants | map: ‘id’ -%}

{%- if option_value != downcase_group_value -%}
{%- unless media_variant_ids contains product.selected_or_first_available_variant.id -%}
{%- assign is_media_filtered = true -%}
{%- endunless -%}
{%- endif -%}

{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}

{%- case media.media_type -%} {%- when 'image' -%}

{%- capture supported_sizes -%}{%- render 'image-size', sizes: '400,500,600,700,800,900,1000,1100,1200', image: media -%}{%- endcapture -%} {%- assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

${{ media_alt | escape }}$ ${{ media_alt | escape }}$

{%- when ‘model’ -%}

{{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}

{%- when ‘external_video’ -%}

{%- when ‘video’ -%}

{%- endcase -%}

{%- endfor -%}

{%- comment -%}Add the “view in your space” button, which allows to show the product in customer’s environment (if the device supports it){%- endcomment -%}
{%- assign first_3d_model = product.media | where: ‘media_type’, ‘model’ | first -%}

{%- if first_3d_model -%}

{%- render ‘icon’, icon: ‘media-view-in-space’ -%} {{- ‘product.general.view_in_space’ | t -}}

{%- endif -%}

{%- if template != ‘product.quick-view’ and section.settings.enable_image_zoom -%}

{% render ‘icon’, icon: ‘zoom’ %}
{{ ‘product.general.zoom’ | t }}
{{ ‘product.general.zoom_mobile’ | t }}

{%- endif -%}

{%- if show_thumbnails_if_one_media -%}