How can I add hover product images to my Boundless theme site?

Store Design
1

Hi there,

This is my site - https://doubleupldn.com/

I would like to add a feature so that when customers hover over products, the image shows the other product images in order to show our product variation. Please let me know how I can do this. I am using Boundless theme, however the code is edited as there were other features I wished to change.

Thanks.

1 Like
2

Hi, waiting to hear your solution.

Kindly

3

@acorleone

can you try this code Product Hover

4

I have followed this and tried but it is not working.

1 Like
5

@acorleone

oh sorry for that issue can you add this code and share your store url so i will check and guide you

6

It is now Live - https://doubleupldn.com/

7

Hopefully the solution is quick as I need to update my store asap. Thanks!

1 Like
8

@acorleone

can you please add code and let me know

9

what is best way to share code?

10

and what section of site code do you require? thanks

11

yes you have share code here or any way

12

{% render 'pagefly-head' %}

{% if settings.favicon %}

{% endif %} {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}

{% if page_description %}

{% endif %}

{% include ‘social-meta-tags’ %}

{{ ‘theme.scss.css’ | asset_url | stylesheet_tag }}

{% if request.page_type contains ‘customers/’ %}

{% endif %}

{{ content_for_header }}

{{ 'general.search.submit' | t }}
{{ 'general.search.close_search' | t }}
{% section 'sidebar-menu' %}
{{ 'cart.general.close_cart' | t }}
{% section 'announcement-bar' %}
{% section 'header' %}
{%- unless request.page_type == 'product' or request.page_type == 'search' or request.page_type == 'index' -%} {% include 'action-bar' %} {%- endunless -%}

{%- if request.page_type == ‘search’ and search.performed -%}

{{ 'general.search.results_with_count' | t: count: search.results_count, term: search.terms }}
{%- endif -%}
{{ content_for_layout }}

{% section ‘footer’ %}

{% comment %}
Enable ajax cart drawer
{% endcomment %}
{% if settings.cart_type == ‘drawer’ %}

{% endif %}

  • {{ 'general.accessibility.refresh_page' | t }}
  • {{ 'general.accessibility.selection_help' | t }}
13

oh sorry i need product gird item code

14
{% if product.featured_image.src== blank %}
{{ product.featured_image.alt | escape }} {{ product.images.last.alt | escape }}
{% else %} {{ product.featured_image.alt | escape }}
{% assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %} {{ product.featured_image.alt | escape }}
{% endif %}

{% assign variant = product.selected_or_first_available_variant %}

{% if vendor_enable %}

{{ product.vendor }}

{% endif %}

{{ product.title }}

{% comment %} You can show a leading 'from' or 'up to' by checking 'product.price_varies' if your variants have different prices. {% endcomment %} {% if product.compare_at_price > product.price %} {{ 'products.general.regular_price' | t }} {{ product.compare_at_price | money_without_trailing_zeros }} {{ 'products.general.now_price_html' | t: price: price }} {%- if variant.available and variant.unit_price_measurement -%} {% include 'product-unit-price', variant: variant %} {%- endif -%} {% else %} {% if product.price_varies %} {{ 'products.general.from_text_html' | t: price: price }} {% else %} {% if product.compare_at_price > product.price %} {{ 'products.general.sale_price' | t }} {% else %} {{ 'products.general.regular_price' | t }} {% endif %} {{ product.price | money_without_trailing_zeros }} {%- if variant.available and variant.unit_price_measurement -%} {% include 'product-unit-price', variant: variant %} {%- endif -%} {% endif %} {% endif %}

{% comment %}
Check if the product is sold out.
{% endcomment %}
{% unless product.available %}

{{ 'products.product.sold_out' | t }}

{% endunless %}

{% comment %}
If on sale, add a badge
{% endcomment %}
{% if product.compare_at_price > product.price %}
{% assign sale_text_length = ‘products.product.on_sale’ | t | size %}

{{ ‘products.product.on_sale’ | t }}

{% endif %}

1 Like
15

@acorleone

can you please update this code


{% if product.featured_image.src== blank %}

{% else %}

{% assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{% endif %}

{% assign variant = product.selected_or_first_available_variant %}

{% if vendor_enable %}

{{ product.vendor }}

{% endif %}

{{ product.title }}

{% comment %}
You can show a leading 'from' or 'up to' by checking 'product.price_varies'
if your variants have different prices.
{% endcomment %}
{% if product.compare_at_price > product.price %}
{{ 'products.general.regular_price' | t }}
~~{{ product.compare_at_price | money_without_trailing_zeros }}~~
{{ 'products.general.now_price_html' | t: price: price }}
{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant %}
{%- endif -%}
{% else %}
{% if product.price_varies %}
{{ 'products.general.from_text_html' | t: price: price }}
{% else %}
{% if product.compare_at_price > product.price %}
{{ 'products.general.sale_price' | t }}
{% else %}
{{ 'products.general.regular_price' | t }}
{% endif %}
{{ product.price | money_without_trailing_zeros }}
{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant %}
{%- endif -%}
{% endif %}
{% endif %}

{% comment %}
Check if the product is sold out.
{% endcomment %}
{% unless product.available %}

{{ 'products.product.sold_out' | t }}

{% endunless %}

{% comment %}
If on sale, add a badge
{% endcomment %}
{% if product.compare_at_price > product.price %}
{% assign sale_text_length = 'products.product.on_sale' | t | size %}

{{ 'products.product.on_sale' | t }}

{% endif %}
16

Thanks but I tried this and it doesn’t work. I’ve had to revert to original code now. The icons with your code all moved to the side, and the hover didn’t work, it just shows price and product name when hovered over.

17

@acorleone

oh sorry for that issue its possible to more customization code

18

Thanks for your effort. Do you have any other ideas that might work? Thank you