Change Product Images (Switching Views) On A Collection Page By Clicking Provided Options

Technical Q&A
1

Hi

I’ve posted this question before and been working it then have a question.

----------This is a question I posted before---------------

I’m looking for the way to change images on collection pages by clicking options.

These are the examples.

Images change by clicking “product view” or “outfit view” on the top right.

https://www.alexanderwang.com/us-en/women-shirts

Images change by clicking “Product” or “Outfit” on “View” on the top right.

https://www.endclothing.com/gb/latest-products/new-this-week

Is there a specific JS for this function?

The link is here

https://community.shopify.com/c/shopify-design/change-product-images-switching-views-on-a-collection-page-by/td-p/1679669

What I’m trying is setting a 3 models on a same product and also 3 tabs (petite, medium and tall) on a collection page. When a viewer clicks one of the tabs, the models (product image on the collection) change.

First, I set 9 images (3 images for each model) and try to show main image for petite, 4th image for medium and 7th image for tall.

This is a default code for showing main image

{%- if product_card_product.featured_media -%}
{%- if variant_img != blank -%}
{% if settings.quick_shop_type == ‘2’ %}
<img {% render ‘lazyload’,preview_img: product_card_product.featured_media, class: true %} />
{% else %}
<img {% render ‘lazyload’,preview_img: variant_img, class: true %} />
{% endif %}
{%- else -%}
<img {% render ‘lazyload’,preview_img: product_card_product.featured_media, class: true %} />

{%- endif -%}
{%- if product_card_product.media[1] != nil and settings.show_image_swap -%}
{% if has_video != blank and settings.enable_hover_video_product_items %}
{{ has_video[0] | video_tag: muted: true, loop: true, image_size: ‘50x’ }}
{% else %}
<img {% render ‘lazyload’,preview_img: product_card_product.media[1], class: true %} />
{% endif %}
{%- endif -%}
{% if settings.enable_lazyload %}{% endif %}
{%- if loading and settings.show_image_loading -%}

{{ settings.image_loading_text }}
{%- endif -%} {%- else -%} {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %} {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%}

I added assets for medium and tall

For medium

{%- if product_card_product.media[3] -%}
{%- if variant_img != blank -%}
{% if settings.quick_shop_type == ‘2’ %}
<img {% render ‘lazyload’,preview_img: product_card_product.media[3], class: true %} />
{% else %}
<img {% render ‘lazyload’,preview_img: variant_img, class: true %} />
{% endif %}
{%- else -%}
<img {% render ‘lazyload’,preview_img: product_card_product.media[3], class: true %} />
{%- endif -%}
{%- if product_card_product.media[4] != nil and settings.show_image_swap -%}
{% if has_video != blank and settings.enable_hover_video_product_items %}
{{ has_video[0] | video_tag: muted: true, loop: true, image_size: ‘50x’ }}
{% else %}
<img {% render ‘lazyload’,preview_img: product_card_product.media[4], class: true %} />
{% endif %}
{%- endif -%}
{% if settings.enable_lazyload %}{% endif %}
{%- if loading and settings.show_image_loading -%}

{{ settings.image_loading_text }}
{%- endif -%} {%- else -%} {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %} {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%}

For tall

{%- if product_card_product.media[6] -%}
{%- if variant_img != blank -%}
{% if settings.quick_shop_type == ‘2’ %}
<img {% render ‘lazyload’,preview_img: product_card_product.media[6], class: true %} />
{% else %}
<img {% render ‘lazyload’,preview_img: variant_img, class: true %} />
{% endif %}
{%- else -%}
<img {% render ‘lazyload’,preview_img: product_card_product.media[6], class: true %} />
{%- endif -%}
{%- if product_card_product.media[7] != nil and settings.show_image_swap -%}
{% if has_video != blank and settings.enable_hover_video_product_items %}
{{ has_video[0] | video_tag: muted: true, loop: true, image_size: ‘50x’ }}
{% else %}
<img {% render ‘lazyload’,preview_img: product_card_product.media[7], class: true %} />
{% endif %}
{%- endif -%}
{% if settings.enable_lazyload %}{% endif %}
{%- if loading and settings.show_image_loading -%}

{{ settings.image_loading_text }}
{%- endif -%} {%- else -%} {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %} {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%}

With the codes above, I can show product cards with different models. Now I need to show/hide each models when the tabs are clicked.

I’m trying with this method

https://www.quanzhanketang.com/howto/howto_js_tabs.html

I set 3 tabs

Petite | 5'3" or below
Medium | 5'4" to 5'7"
Tall | 5'8" or above

Also I added this JS

The issue is if there 2 products on a collection, each product shows like

  • content here
  • content here

    • but for some reason, the second one is with display:none; although the first product is with display:blocked as I expect.

    I guess the issue I’m facing is related to “loop” but I’m not sure what to do at this moment so I need your help.

    I will tip you if you help me.

    Thank you.

    2

    Hello @hirot

    This needs some code tweaks. I can help you with your setup. Let me know if you are interested. You can mail me your query and store URL.

    3

    Hi @hirot

    It’s painful to image how the store work with a piece of code.

    you can DM me if you don’t wanna show your url here

    4

    I don’t think the code I wrote looks clean but I made it.

    Tab Buttons

    Petite
    Medium
    Tall

    JS

    CSS

    .petite{display:none;}
    .medium{display:none;}
    .tall{display:none;}
    .active {display:block;}

    Also with the contents I already wrote above, now I can show different models by clicking the tabs.

    Thank you.

    5

    Hi there, I was wondering if you have managed to do this? I was hoping to do exactly the same on my site. Any advice hugely appreciated!

    1 Like