How can I enable second image hover on mobile product cards?

[agori]

Hi! I want the product cards to show their second image on hover, I have checked the option and it works on desktop, but it doesn't work on mobile... I need it to work on mobile too. Any help please?

Here's the store https://agori-jewellery.com/

I'm using Dawn 7.0.1

[yamilaregueira]

Hi, EBOOST! 

Thanks in advance for helping out and all your coding knowledge 🙂 🙂 🙂

I have the Dawn theme and was able to set up the hover function on the mobile version, but in order for the photos to show, I need to touch and slide each one of them. Could you please help me make the second photos display automatically as I scroll up/down? 

Thanks a lot!

Yamila

[EBOOST]

Hi,

Do you mean you would like to slide images auto after about time?

[yamilaregueira]

Hi!

What I mean is that now, if I scroll down, nothing happens unless I touch the card images. And if I touch them briefly, the product landing page will open up. In order for the second photos to show on the product card, I need to touch and hold/slide for a moment, and someone who's not aware of that function won't be able to see them.

I'd like for the second photos to automatically show as I scroll down (not sure if that's what you meant). Is that possible to set up?

Thanks a lot again!

[EBOOST]

Hi,

May you try to code below for Dawn theme:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Add code below to end of file

body .card-wrapper .media.media--hover-effect:hover>img+img,
body .card-wrapper:focus .media.media--hover-effect>img+img,
body .card-wrapper:hover .media.media--hover-effect>img+img {
    opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
}
body .card-wrapper .media.media--hover-effect:hover>img:first-child:not(:only-child), 
body .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
    opacity: 0;
}
@media(max-width: 749px){
  .card--standard > .card__content .card__information {
    position: relative;
  }
  .card--standard .card__inner .card__media + .card__content {
    display: none;
  }
}

[yamilaregueira]

Hi again!

Thanks a lot for the option, but we tried it and it still works the same way than before. The second photos don't show up unless we tap and slide on each one of them.

If there's anything else we can try, we'd be absolutely thankful. Our website is laregueira.shop 

Thanks again for everything!

[EBOOST]

Hi,

Did you add code above to your theme? I checked your site but I didn't see any code that has been added.

I checked this file. https://laregueira.shop/cdn/shop/t/14/assets/base.css?v=117828829876360325261702319193

[MeatHands]

Hi EBOOST, I've been looking for the answer to this everywhere. Could you please help me out? I am using the Pipeline theme and our url is shop.jackknifemotors.com

[EBOOST]

Hi,

Because this is an theme that is not free. So I can't help to check. So I only can suggest for you code below:

1. Go to Store Online-> theme -> edit code
2. Layout/theme.liquid
3. Add code below to end of file and before </body> tag

<style>
@media(max-width: 749px){
	.product-grid-item .product-grid-item__container  > a {
		pointer-events: none;
	}
	.product-grid-item:hover .product-grid-item__container .product-grid-item__images product-grid-item-image:nth-child(2){
		opacity: 1;
	    visibility: visible;
	    transition-delay: 0s;
	}
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	if($ ('.product-grid-item__container template').length > 0){
		$(".product-grid-item__container template").each( function() {
		  $(this).replaceWith("<div>" + $(this).html() + "</div>");
		}); 
	}
})
</script>

[MeatHands]

Hi again,

Ok, that worked, but there are just a couple of minor issues. First, when you let go, it stays on the second image instead of switching back to the first like on desktop. The second issue is, if you hold your finger on the product for more than a second it highlights the image, instead of pulling up a product preview after about 2 seconds like previous. I have attached a screenshot of what is happening as well as what our backend looks like. 

Please let me know if it would be helpful to see anything else, and thank you so much for your help!

[Kuramoha]

Hello I'm using impact theme version 4.3.4 and I want to implement this mobile hover image transition I've tried most of solutions above but they did not work can you provide any tips for me  https://www.boujisphere.com/ this is my website link

[EBOOST]

Hi,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Assets/theme.css
3. Add code below to end of file

body .product-card--show-secondary-media .product-card__figure:hover .product-card__image--primary {
    opacity: 0;
}

body .product-card--show-secondary-media .product-card__figure:hover .product-card__image--secondary {
    opacity: 1;
    display: block;
}
@media(max-width: 749px){
  body .product-card--show-secondary-media .product-card__figure > a{
    transition: all 1s;
    pointer-events: none;
  }
}

[hanihachache]

Hello,

Thank you for your message.

Please note I do not have " Assets/theme.css" in my coding.

Can you please advise.

Thank you,

Hani Hachache

[EBOOST]

Hi Hani,

With your case.

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Layout/theme.liquid
3. Add code below to end of file and before </body> tag

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $(".productitem--image-link").click(function(e){
        if($(window).width() < 750){
          var checkIshover = false;
          if($(this).hasClass('has-hover')){
            checkIshover = true;
          }
          $(".productitem--image-link").removeClass('has-hover')
          
          if(!checkIshover){
            e.preventDefault();
            $(this).addClass('has-hover')
          }
        }
        
      });
    });
  </script>

[hanihachache]

Hello,

Thank you for your support.

Unfortunately it did not work. I still need to press on the description or
the price to enter the page to buy it.

Can you please support.

Thank you,

Hani Hachache

[EBOOST]

Hi,

Did you add code above? I checked your store (https://www.efcollection.com/). However, I don't see the code.

[hanihachache]

Hello,
Yes, I added it.
My website is www.griffjewelry.com
Thank you

[EBOOST]

Hi,

With this store. Maybe I suggest code below:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $(".card__heading a").click(function(e){
        if($(window).width() < 750){
          var checkIshover = false;
          if($(this).hasClass('has-hover')){
            checkIshover = true;
          }
          $(".card__heading a").removeClass('has-hover')
          
          if(!checkIshover){
            e.preventDefault();
            $(this).addClass('has-hover')
          }
        }
        
      });
    });
    </script>
    <style>
      @media(max-width: 749px){
      .card--standard>.card__content .card__information,.card__content{ position: static!important;}
        }
    
    </style>

Note: When you use this code after you need touch twice times to redirect to product page. the first touch will show the second image. The second touch will go to product page.

[hanihachache]

Hello again.

Thank you for your support.

It is not working properly: I touch one time the first picture, it shows the
second picture and redirect me directly to the product page. All this in one
touch instead of 2 touches.

Please advise.



Thank you,



Hani

[Kuramoha]

Hello again Eboost I made some adjustments to the code and it worek but not exactly as intended You can check my website to see how it works www.boujisphere.com   first I want the the transitions between images to be more smooth and second I do not want the second image to appear when I click a single click . The single click is supposed  to open the product page and the hold or hover touch to show the second image I tried many adjustments but it didn't work ... I hope you can help me + I tried adding some java scripts but I didn't now relly where to add it 

[tamziswimwear]

Hello @EBOOST I appreciate your help and knowledge you share with fellow entrepreneurs! I am using the Sense theme 12:0:0, do you have tips how I can implement it on this theme? Your help is highly appreciated! Kind regards, Casper

[EBOOST]

Hi @tamziswimwear ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Assets/base.css
3. Add code below to end of file

body .card-wrapper:hover .media.media--hover-effect>img+img {
    opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
}
@media(max-width: 989px){
 body  .card--card.card--media>.card__content {
    position: relative;
  }
}

[tamziswimwear]

Hi EBOOST thank you for your response, this didn't seem to work. Any other suggestions?

[EBOOST]

Hi,

could you please share your store url? We will help to check it.

[tamziswimwear]

https://tamziswimwear.com/

[EBOOST]

Hi,

I checked your assest/base.css file. this text "}" is missing. You can refer screenshot below to add.

[Ted69]

Hey EBOOST, 

I'm having issue with "second picture over hover" setting in my website. I'm using Dawn 12 version.
This hover option is turned on in both Collection Grid and Product grid blocks (Desktop).
Collection Grid is working perfectly.
Product Grid not working.
Is it possible to fix it? + enable second picture hover function for mobile too? 

Thank you!
Website milastudio.co

[EBOOST]

Hi @Ted69 ,

You try to go to Go to Store Online-> theme -> Customize -> collection -> check whether this option has been turn on.

[Ted69]

As I mentioned, this function is already turned on.

[EBOOST]

Hi,

Could you please share your code? We need to check your code to find a solution for it. Maybe your code has been customized.

[Ted69]

How can I do that?

[EBOOST]

Could you please share code of sections/main-collection-product-grid.liquid?

[Ted69]

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{% if section.settings.image_shape == 'blob' %}
  {{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}

{%- if section.settings.enable_quick_add -%}
  {{ 'quick-add.css' | asset_url | stylesheet_tag }}      
{%- endif -%}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}">
  {%- paginate collection.products by section.settings.products_per_page -%}
    {% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
    {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}
      <facet-filters-form class="facets facets-vertical-sort page-width small-hide no-js-hidden">
        <form class="facets-vertical-form" id="FacetSortForm">
          <div class="facet-filters sorting caption">
            <div class="facet-filters__field">
              <h2 class="facet-filters__label caption-large text-body">
                <label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
              </h2>
              <div class="select">
                {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
                <select
                  name="sort_by"
                  class="facet-filters__sort select__select caption-large"
                  id="SortBy"
                  aria-describedby="a11y-refresh-page-message"
                >
                  {%- for option in collection.sort_options -%}
                    <option
                      value="{{ option.value | escape }}"
                      {% if option.value == sort_by %}
                        selected="selected"
                      {% endif %}
                    >
                      {{ option.name | escape }}
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
            </div>
            <noscript>
              <button type="submit" class="facets__button-no-js button button--secondary">
                {{ 'products.facets.sort_button' | t }}
              </button>
            </noscript>
          </div>

          <div class="product-count-vertical light" role="status">
            <h2 class="product-count__text text-body">
              <span id="ProductCountDesktop">
                {%- if collection.results_count -%}
                  {{
                    'templates.search.results_with_count'
                    | t: terms: collection.terms, count: collection.results_count
                  }}
                {%- elsif collection.products_count == collection.all_products_count -%}
                  {{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
                {%- else -%}
                  {{
                    'products.facets.product_count'
                    | t: product_count: collection.products_count, count: collection.all_products_count
                  }}
                {%- endif -%}
              </span>
            </h2>
            {%- render 'loading-spinner' -%}
          </div>
        </form>
      </facet-filters-form>
    {%- endif -%}

    <div class="{% if section.settings.filter_type == 'vertical' %} facets-vertical page-width{% endif %}">
      {{ 'component-facets.css' | asset_url | stylesheet_tag }}
      <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
      {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
        <aside
          aria-labelledby="verticalTitle"
          class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
          id="main-collection-filters"
          data-id="{{ section.id }}"
        >
          {% render 'facets',
            results: collection,
            enable_filtering: section.settings.enable_filtering,
            enable_sorting: section.settings.enable_sorting,
            filter_type: section.settings.filter_type,
            paginate: paginate
          %}
        </aside>
      {%- endif -%}

      <div
        class="product-grid-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
        id="ProductGridContainer"
        {% if settings.animations_reveal_on_scroll %}
          data-cascade
        {% endif %}
      >
        {%- if collection.products.size == 0 -%}
          <div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
            <div class="loading-overlay gradient"></div>
            <div class="title-wrapper center">
              <h2 class="title title--primary">
                {{ 'sections.collection_template.empty' | t -}}
                <br>
                {{
                  'sections.collection_template.use_fewer_filters_html'
                  | t: link: collection.url, class: 'underlined-link link'
                }}
              </h2>
            </div>
          </div>
        {%- else -%}
          <div class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}">
            <div class="loading-overlay gradient"></div>
            <ul
              id="product-grid"
              data-id="{{ section.id }}"
              class="
                grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
                grid--{{ section.settings.columns_desktop }}-col-desktop
              "
            >
              {%- for product in collection.products -%}
                {% assign lazy_load = false %}
                {%- if forloop.index > 2 -%}
                  {%- assign lazy_load = true -%}
                {%- endif -%}
                <li
                  class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                  {% if settings.animations_reveal_on_scroll %}
                    data-cascade
                    style="--animation-order: {{ forloop.index }};"
                  {% endif %}
                >
                  {% render 'card-product',
                    card_product: product,
                    media_aspect_ratio: section.settings.image_ratio,
                    image_shape: section.settings.image_shape,
                    show_secondary_image: section.settings.show_secondary_image,
                    show_vendor: section.settings.show_vendor,
                    show_rating: section.settings.show_rating,
                    lazy_load: lazy_load,
                    show_quick_add: section.settings.enable_quick_add,
                    section_id: section.id
                  %}
                </li>
              {%- endfor -%}
            </ul>

            {%- if paginate.pages > 1 -%}
              {% render 'pagination', paginate: paginate, anchor: '' %}
            {%- endif -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  {%- endpaginate -%}
  {% if section.settings.image_shape == 'arch' %}
    {% render 'mask-arch' %}
  {%- endif -%}
</div>

{% schema %}
{
  "name": "t:sections.main-collection-product-grid.name",
  "class": "section",
  "settings": [
    {
      "type": "range",
      "id": "products_per_page",
      "min": 8,
      "max": 24,
      "step": 4,
      "default": 16,
      "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 4,
      "label": "t:sections.main-collection-product-grid.settings.columns_desktop.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info",
      "default": "background-1"
    },
    {
      "type": "header",
      "content": "t:sections.main-collection-product-grid.settings.header__3.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.main-collection-product-grid.settings.image_ratio.label"
    },
    {
      "type": "select",
      "id": "image_shape",
      "options": [
        {
          "value": "default",
          "label": "t:sections.all.image_shape.options__1.label"
        },
        {
          "value": "arch",
          "label": "t:sections.all.image_shape.options__2.label"
        },
        {
          "value": "blob",
          "label": "t:sections.all.image_shape.options__3.label"
        },
        {
          "value": "chevronleft",
          "label": "t:sections.all.image_shape.options__4.label"
        },
        {
          "value": "chevronright",
          "label": "t:sections.all.image_shape.options__5.label"
        },
        {
          "value": "diamond",
          "label": "t:sections.all.image_shape.options__6.label"
        },
        {
          "value": "parallelogram",
          "label": "t:sections.all.image_shape.options__7.label"
        },
        {
          "value": "round",
          "label": "t:sections.all.image_shape.options__8.label"
        }
      ],
      "default": "default",
      "label": "t:sections.all.image_shape.label",
      "info": "t:sections.all.image_shape.info"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_rating.label",
      "info": "t:sections.main-collection-product-grid.settings.show_rating.info"
    },
    {
      "type": "checkbox",
      "id": "enable_quick_add",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.enable_quick_buy.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-collection-product-grid.settings.header__1.content"
    },
    {
      "type": "checkbox",
      "id": "enable_filtering",
      "default": true,
      "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
      "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
    },
    {
      "type": "select",
      "id": "filter_type",
      "options": [
        {
          "value": "horizontal",
          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
        },
        {
          "value": "vertical",
          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
        },
        {
          "value": "drawer",
          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
        }
      ],
      "default": "horizontal",
      "label": "t:sections.main-collection-product-grid.settings.filter_type.label",
      "info": "t:sections.main-collection-product-grid.settings.filter_type.info"
    },
    {
      "type": "checkbox",
      "id": "enable_sorting",
      "default": true,
      "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-collection-product-grid.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.main-collection-product-grid.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__2.label"
        }
      ]
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}

[EBOOST]

Could you please replace your code with code below after that send a preview link?

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{% if section.settings.image_shape == 'blob' %}
  {{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}

{%- if section.settings.enable_quick_add -%}
  {{ 'quick-add.css' | asset_url | stylesheet_tag }}      
{%- endif -%}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}">
  {%- paginate collection.products by section.settings.products_per_page -%}
    {% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
    {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}
      <facet-filters-form class="facets facets-vertical-sort page-width small-hide no-js-hidden">
        <form class="facets-vertical-form" id="FacetSortForm">
          <div class="facet-filters sorting caption">
            <div class="facet-filters__field">
              <h2 class="facet-filters__label caption-large text-body">
                <label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
              </h2>
              <div class="select">
                {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
                <select
                  name="sort_by"
                  class="facet-filters__sort select__select caption-large"
                  id="SortBy"
                  aria-describedby="a11y-refresh-page-message"
                >
                  {%- for option in collection.sort_options -%}
                    <option
                      value="{{ option.value | escape }}"
                      {% if option.value == sort_by %}
                        selected="selected"
                      {% endif %}
                    >
                      {{ option.name | escape }}
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
            </div>
            <noscript>
              <button type="submit" class="facets__button-no-js button button--secondary">
                {{ 'products.facets.sort_button' | t }}
              </button>
            </noscript>
          </div>

          <div class="product-count-vertical light" role="status">
            <h2 class="product-count__text text-body">
              <span id="ProductCountDesktop">
                {%- if collection.results_count -%}
                  {{
                    'templates.search.results_with_count'
                    | t: terms: collection.terms, count: collection.results_count
                  }}
                {%- elsif collection.products_count == collection.all_products_count -%}
                  {{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
                {%- else -%}
                  {{
                    'products.facets.product_count'
                    | t: product_count: collection.products_count, count: collection.all_products_count
                  }}
                {%- endif -%}
              </span>
            </h2>
            {%- render 'loading-spinner' -%}
          </div>
        </form>
      </facet-filters-form>
    {%- endif -%}

    <div class="{% if section.settings.filter_type == 'vertical' %} facets-vertical page-width{% endif %}">
      {{ 'component-facets.css' | asset_url | stylesheet_tag }}
      <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
      {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
        <aside
          aria-labelledby="verticalTitle"
          class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
          id="main-collection-filters"
          data-id="{{ section.id }}"
        >
          {% render 'facets',
            results: collection,
            enable_filtering: section.settings.enable_filtering,
            enable_sorting: section.settings.enable_sorting,
            filter_type: section.settings.filter_type,
            paginate: paginate
          %}
        </aside>
      {%- endif -%}

      <div
        class="product-grid-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
        id="ProductGridContainer"
        {% if settings.animations_reveal_on_scroll %}
          data-cascade
        {% endif %}
      >
        {%- if collection.products.size == 0 -%}
          <div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
            <div class="loading-overlay gradient"></div>
            <div class="title-wrapper center">
              <h2 class="title title--primary">
                {{ 'sections.collection_template.empty' | t -}}
                <br>
                {{
                  'sections.collection_template.use_fewer_filters_html'
                  | t: link: collection.url, class: 'underlined-link link'
                }}
              </h2>
            </div>
          </div>
        {%- else -%}
          <div class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}">
            <div class="loading-overlay gradient"></div>
            <ul
              id="product-grid"
              data-id="{{ section.id }}"
              data-second-image={{ section.settings.show_secondary_image | json }}
              class="
                grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
                grid--{{ section.settings.columns_desktop }}-col-desktop
              "
            >
              {%- for product in collection.products -%}
                {% assign lazy_load = false %}
                {%- if forloop.index > 2 -%}
                  {%- assign lazy_load = true -%}
                {%- endif -%}
                <li
                  class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                  {% if settings.animations_reveal_on_scroll %}
                    data-cascade
                    style="--animation-order: {{ forloop.index }};"
                  {% endif %}
                >
                  {% render 'card-product',
                    card_product: product,
                    media_aspect_ratio: section.settings.image_ratio,
                    image_shape: section.settings.image_shape,
                    show_secondary_image: section.settings.show_secondary_image,
                    show_vendor: section.settings.show_vendor,
                    show_rating: section.settings.show_rating,
                    lazy_load: lazy_load,
                    show_quick_add: section.settings.enable_quick_add,
                    section_id: section.id
                  %}
                </li>
              {%- endfor -%}
            </ul>

            {%- if paginate.pages > 1 -%}
              {% render 'pagination', paginate: paginate, anchor: '' %}
            {%- endif -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  {%- endpaginate -%}
  {% if section.settings.image_shape == 'arch' %}
    {% render 'mask-arch' %}
  {%- endif -%}
</div>

{% schema %}
{
  "name": "t:sections.main-collection-product-grid.name",
  "class": "section",
  "settings": [
    {
      "type": "range",
      "id": "products_per_page",
      "min": 8,
      "max": 24,
      "step": 4,
      "default": 16,
      "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 4,
      "label": "t:sections.main-collection-product-grid.settings.columns_desktop.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info",
      "default": "background-1"
    },
    {
      "type": "header",
      "content": "t:sections.main-collection-product-grid.settings.header__3.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.main-collection-product-grid.settings.image_ratio.label"
    },
    {
      "type": "select",
      "id": "image_shape",
      "options": [
        {
          "value": "default",
          "label": "t:sections.all.image_shape.options__1.label"
        },
        {
          "value": "arch",
          "label": "t:sections.all.image_shape.options__2.label"
        },
        {
          "value": "blob",
          "label": "t:sections.all.image_shape.options__3.label"
        },
        {
          "value": "chevronleft",
          "label": "t:sections.all.image_shape.options__4.label"
        },
        {
          "value": "chevronright",
          "label": "t:sections.all.image_shape.options__5.label"
        },
        {
          "value": "diamond",
          "label": "t:sections.all.image_shape.options__6.label"
        },
        {
          "value": "parallelogram",
          "label": "t:sections.all.image_shape.options__7.label"
        },
        {
          "value": "round",
          "label": "t:sections.all.image_shape.options__8.label"
        }
      ],
      "default": "default",
      "label": "t:sections.all.image_shape.label",
      "info": "t:sections.all.image_shape.info"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_rating.label",
      "info": "t:sections.main-collection-product-grid.settings.show_rating.info"
    },
    {
      "type": "checkbox",
      "id": "enable_quick_add",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.enable_quick_buy.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-collection-product-grid.settings.header__1.content"
    },
    {
      "type": "checkbox",
      "id": "enable_filtering",
      "default": true,
      "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
      "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
    },
    {
      "type": "select",
      "id": "filter_type",
      "options": [
        {
          "value": "horizontal",
          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
        },
        {
          "value": "vertical",
          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
        },
        {
          "value": "drawer",
          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
        }
      ],
      "default": "horizontal",
      "label": "t:sections.main-collection-product-grid.settings.filter_type.label",
      "info": "t:sections.main-collection-product-grid.settings.filter_type.info"
    },
    {
      "type": "checkbox",
      "id": "enable_sorting",
      "default": true,
      "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-collection-product-grid.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.main-collection-product-grid.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__2.label"
        }
      ]
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}

[Ted69]

Code changed.

Preview link: https://milastudio.co/collections/kaklo-papuosalai

[EBOOST]

Hi,

the Show second image option hasn't been turned on yet.

You need go to customize to turn on it.

[Ted69]

It is turned ON as I said.

[EBOOST]

Hi,

However code is showing is false. So it didn't work. Could you grant a permission to your store?

[Ted69]

Sent collaboration code PM.

[Mymrtbone]

Hey @EBOOST,
I used following code to have a "hover" effect on mobile as well, but it doesn´t revert back, maybe because I use a gif to have a video as the second image. Is there a way to have it revert back after a certain time? I use a free theme, so probably based on DAWN and here is the store: My Store (15dfba-e3.myshopify.com) pw: YesYes  [it's about the chasen at the bottom of the page just as a reference]

.card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
opacity: 0;
}
.card-wrapper:hover .media.media--hover-effect>img+img {
opacity: 1;
transition: transform var(--duration-long) ease;
transform: scale(1.03);
}
.card-wrapper:not( :hover ) .media.media--hover-effect>img:first-child:not(:only-child) {
opacity: 1;
}
.card-wrapper:not( :hover ) .media.media--hover-effect>img+img {
opacity: 0;
transition: transform var(--duration-long) ease;
transform: scale(1);
}

[Kuramoha]

Heelo Again E boost thanks for your assistance but unfortunately the code you provided me earlier didn't work as intended infact it just disaple the product image from being clicked but it didn't  give me the hover affect I wanted ... 

[brokenyolk]

Hi, your information has been extremely helpful! I tried this on my Broadcast theme and it works perfectly on mobile. However, it created an issue on desktop, here is what is happening open my Shopify website with the Broadcast theme on the collection page:
-product photo is image 1
-hover with cursor and image 2 is displayed
-remove cursor and image 1 is displayed
-hover again over the same image and no image is displayed (blank white)

Also important to note that it works perfectly on mobile, this only happens on desktop. This problem only started after I applied the following css code to enable the mobile hover:

body main .double__image .product-item__bg__under, body main .product-item--overlay-text .product-item__bg__under { opacity: 0; display: block!important; visibility: visible!important; } body main .double__image:hover .product-item__bg__under, body main .product-item--overlay-text:hover .product-item__bg__under { opacity: 1; display: block!important; visibility: visible!important; }

[cashmerecasper]

Thank you! It works perfectly! Your help is highly appreciated

[Matej814]

Hello Eboost, I'm sorry but it doesn't work for me on the prestige theme.
Do you have another option please?
Thank you Matej