Add hover effect to product images - Minimal Theme

New Member
1 0 0

Hey Dwalin,

 

Thanks for your explanation, very useful :-)

By any chance, do you know how to create a hover like on this website: https://omnipollo.com/

I mean with title, information, price and cart ?

I try different things but result is too bad

Any suggestions ?

 

Cheers

0 Likes
New Member
2 0 1

What a legend it works just fine! Just want to say thank you personally for taking the time to help the community.

0 Likes
Excursionist
15 0 8
You're very welcome Matt! Let me know if I can be of any further help
0 Likes
New Member
5 0 0

Hello!

I am running into trouble editing my code to allow for this effect. I appreciate you listing your code. I tried to copy it to see if I would fix the issue for me, and it is not working. Would you be able to help? Super new to websites and coding so very minimal knowledge. I tried to tutorial and was unsuccessful. Thank you!!

0 Likes
Excursionist
15 0 8
Hi there! Of course, how can I help you?
0 Likes
New Member
5 0 0

Hey!!

Thanks for replying!

I am using the minimal theme and want to add the hover effect to my products. I used the shopify tutorial as well as a couple youtube tutorials with no luck. I also copied your pasted code and it still did not work. Here is my code as is for the product grid item. I started from fresh and deleted all the changes since I was messing up the code.

Thank you for helping!

{% unless current_collection == blank %}
{% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% assign sale_text = 'products.product.sale' | t %}
{% if featured.compare_at_price > featured.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% assign sold_out_text = 'products.product.sold_out' | t %}
{% if featured.available %}
{% assign sold_out = false %}
{% endif %}

{% if featured.title == '' %}
{% comment %}add default state for product block in storefront editor{% endcomment %}
{% capture product_title %}{{ 'home_page.onboarding.product_title' | t }}{% endcapture %}
{% else %}
{% capture product_title %}{{ featured.title | escape }}{% endcapture %}
{% endif %}

<div class="{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
<a href="{{ featured.url | within: collection }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
<span class="grid-link__image grid-link__image--loading{% if section.settings.show_sold_out_circle %} grid-link__image-sold-out{% endif %} grid-link__image--product" data-image-wrapper>
{% if on_sale and section.settings.show_sale_circle %}
<span class="badge badge--sale">
<span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
</span>
{% endif %}
{% if sold_out and section.settings.show_sold_out_circle %}
<span class="badge badge--sold-out">
<span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
</span>
{% endif %}
<span class="grid-link__image-centered">
{% if featured.title != '' %}
{% unless featured.featured_image == blank %}
{% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %}
{%- assign img_url = featured.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% include 'image-style' with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
<div id="{{ wrapper_id }}" class="product__img-wrapper supports-js">
<div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
alt="{{ featured.featured_image.alt | escape }}"
class="product__img lazyload"
data-src="{{ img_url }}"
data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured.featured_image.aspect_ratio }}"
data-sizes="auto"
data-image>
</div>
</div>
{% else %}
<img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img" data-image>
{% endunless %}
<noscript>
<img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
</noscript>
{% else %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</span>
</span>
<p class="grid-link__title">{{ product_title }}</p>
{% if section.settings.vendor_enable %}
<p class="grid-link__title grid-link__vendor">{{ featured.vendor }}</p>
{% endif %}
{% if featured.title != '' %}
<p class="grid-link__meta">
{%- assign price = featured.price | money -%}

{% if on_sale %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="grid-link__sale_price">{{ featured.compare_at_price | money }}</s>
{% endif %}
{% if featured.price_varies %}
{{ 'products.general.from_html' | t: price: price }}
{% else %}
{% if on_sale %}
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{% endif %}
{{ price }}

{%- assign variant = featured.selected_or_first_available_variant -%}
{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
{%- endif -%}
{% endif %}
</p>
{% endif %}
</a>
</div>

0 Likes
Excursionist
15 0 8
Have you also edited the theme.css file?

You should both replace your product grid item code with the one I provided
you with and add some new lines to the theme.css file (you may see them in
the first page of this thread).
0 Likes
New Member
5 0 0

For the theme.css file do I just add your code to the bottom?

For the profuct-grid-item which portion am I replacing? Or am I deleting the entire code?

I have just been replacing this portion but I do not think that is right lol

{% else %}
<img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img" data-image>
{% endunless %}
<noscript>
<img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
</noscript>
{% else %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}

 

0 Likes
Excursionist
15 0 8
That's right, you should add the new code at the end of the them.css file.

Regarding the product grid item, you should just replace ALL the code
inside this div element:



Find it and replace it with my code.

Good luck!

0 Likes
New Member
5 0 0

Great! Thanks!

So I found it replaced it with the code now I am having trouble understanding what needs to be deleted or changed to take away the opacity issue. Tried to go back but I am not understanding the instructions for deleting the class. Here is what I have so far from copying you original edits. Can you point out what I need to delete for the opacity issue? Thanks for your help!

<div class="{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
  <a href="{{ featured.url | within: collection }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
    <span class="grid-link__image grid-link__image--loading{% if section.settings.show_sold_out_circle %} grid-link__image-sold-out{% endif %} grid-link__image--product" data-image-wrapper>
      {% if on_sale and section.settings.show_sale_circle %}
        <span class="badge badge--sale">
          <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
        </span>
      {% endif %}
      {% if sold_out and section.settings.show_sold_out_circle %}
        <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
        </span>
      {% endif %}
     <span class="grid-link__image-centered">
        {% if featured.title != '' %}
          {% unless featured.featured_image == blank %}
            {% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %}
            {% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %}
            {%- assign img_url = featured.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

            {% include 'image-style' with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
        <div id="{{ wrapper_id }}" class="product__img-wrapper supports-js reveal">
     <div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
                 <img id="{{ img_id }}"
			 class="product__img reveal"
			 src="{{ featured.featured_image | img_url: '300x300' }}"
			 data-src="{{ img_url }}"
			 data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
			 data-aspectratio="{{ featured.featured_image.aspect_ratio }}"
			 data-sizes="auto"
			 alt="{{ featured.featured_image.alt | escape }}">
		  <img id="{{ img_id }}"
			 class="product__img hidden"
			 src="{{ product.images.last | img_url: '300x300' }}"
			 data-src="{{ img_url}}"
			 data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
			 data-aspectratio="{{ product.images.last.aspect_ratio }}"
			 data-sizes="auto"
			 alt="{{ product.images.last | escape }}">                          
	</div>
</div>
          {% else %}
            <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img" data-image>
          {% endunless %}
          <noscript>
            <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
          </noscript>
        {% else %}
          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </span>
    </span>
    <p class="grid-link__title">{{ product_title }}</p>
    {% if section.settings.vendor_enable %}
      <p class="grid-link__title grid-link__vendor">{{ featured.vendor }}</p>
    {% endif %}
    {% if featured.title != '' %}
      <p class="grid-link__meta">
        {%- assign price = featured.price | money -%}

        {% if on_sale %}
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        <s class="grid-link__sale_price">{{ featured.compare_at_price | money }}</s>
        {% endif %}
        {% if featured.price_varies %}
          {{ 'products.general.from_html' | t: price: price }}
        {% else %}
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
          {% endif %}
          {{ price }}

          {%- assign variant = featured.selected_or_first_available_variant -%}
          {%- if variant.available and variant.unit_price_measurement -%}
            {% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
          {%- endif -%}
        {% endif %}
      </p>
    {% endif %}
  </a>
</div>

 

0 Likes