Shopify themes, liquid, logos, and UX
Hi, would really appreciate some help with this – been trying to follow some threads on this topic but to no avail.
I would like to have the second image of each product revealed on hover. Am using Debut theme.
Thanks very much!
My site is www.curiouslah.com
Solved! Go to the solution
This is an accepted solution.
Thanks for update code
also, please add the below code.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.grid-view-item__title {
margin-top: 20px;
}
.grid-view-item__vendor, .price__vendor {
display: none;
}
Hello,
Welcome to the Shopify community!
and Thanks for your Good question.
Hi, thanks for the link - I tried following some of the suggestions there but it didn't work.
Then I used this: https://www.youtube.com/watch?v=9uxSrOxxZpY which did work, but now there are some issues..
Code used for Reveal Module in theme.scss.liquid :
/* ===============================================
// Reveal module
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}
@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}
}
@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
}
Code used in product-card-grid.liquid :
{% unless grid_image_width %}
{%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
<a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
{% if product.images.size > 1 %}
<img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">
{% endif %}
<div class="h4 grid-view-item__title">{{ product.title }}</div>
{% if section.settings.show_vendor %}
<div class="grid-view-item__vendor">{{ product.vendor }}</div>
{% endif %}
<div class="grid-view-item__meta">
{% include 'product-price', variant: product %}
</div>
</a>
</div>
The issues are: (see www.curiouslah.com home page for reference)
1) No padding/spacing between the product images and product titles, that was with the original code
2) For products with a vendor, the vendor name is shown twice
Any ideas how to fix this? Thank you!
Thanks for store details
sorry but I can see this code do you have added?
Sorry, I changed it back to the original code again just now.
Have switched the code to the one mentioned above, so you can see the issues with the padding and vendor title.
Thanks!
This is an accepted solution.
Thanks for update code
also, please add the below code.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.grid-view-item__title {
margin-top: 20px;
}
.grid-view-item__vendor, .price__vendor {
display: none;
}
Thank you very much! This worked!
Thanks for update and your compliment.
Hi, what do I do if I want to reveal the second image as well but I do not have a theme.scss.liquid?
I can only see theme.css.liquid or theme.scss
Thank you!
Thanks
can you please try this
Sure, thank you!
Hi Ketan Kumar,
I tried the link and the steps do not work for me... is there a reason why
HEllo, @Twooogirlsco
It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me
noted. how much do you charge for this hover?
i have send PM
Hello,
I've just tried so many different ways from YT tutorials and have just done your way and I'm still getting the images stacked on each other...
website link - p/w: couture123
I'm not sure if there is an app blocking the feature?
Please help, thank you
All good I have resolved this issue now. Would love to know how to make my image on my landing page zoom when hovered. It is just a 'Text Columns with Images' image, not a product image. Would love some more interaction with it if possible please.
yes please show me issue
I popped my website details above if you want to have a look there or here is a screenshot - they are stagnent photos and I'd like to either have it zoom in when I hover over them (1st preference) or click on them to purchase and I can remove the buttons (that bit I know how to do haha)
yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
.feature-row__image-wrapper .feature-row__image {
transition: all 0.9s;
}
.feature-row__image-wrapper:hover .feature-row__image {
transform: scale(1.1);
}
Thank you so much, you're incredibly helpful.
I have one last question and then the site is done! 🙂 😉 I really appreciate your help.
My header logo is the same file/image on all pages, however on the product pages it comes up with a blurry background whereas the file is a transparent background. any suggestions pls?
yes please share store url
@KetanKumar Can you please help me? When on my products on mobile, the menu bar is disabled and the logo in the header has a weird box around it - can you please take a look? www.ballooncouture.com.au (from your phone)
Hi @KetanKumar Can you please help me with my Debut theme looks like the three dots from the slider are all the way to the right I am not sure why. Also how can I make the slider button background transparent?
In advance thank you so much for your help!
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hello! I got this working well but is there a way to hide the second image when not hovering? I'm using an image with a transparent background as the first image and this shows what's underneath. Here is an example page https://iamdeadly.com/collections/i-am-sin
Got it working on Debut theme but when a product only has one image it shows a white square with No-Image. How do I change that so it just shows the main image when a product only has one image?
yes please show me issue images
i have check its working fine doesn't issue
Hi! I am also using the Debut theme and would like to have the second image revealed on hover. Is it possible to have the full code displayed and exactly where to add it? Thank you so much!
Thanks for post
yes can you please flow this step
Thank you for your quick reply. However, I followed the directions step by step and it is not working for me. Not sure what I did wrong. Any other advice?
Thanks for it
It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like
Thank you so much! I will be in touch soon.
User | RANK |
---|---|
155 | |
127 | |
80 | |
73 | |
69 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023