Shopify themes, liquid, logos, and UX
Hi
When mouse over the image in the collection as illustrated below, an underline appears which runs from left to right, while at the same time alternate product image appears slow-mo.
How can I remove this "running underline" and simultaneously increase the speed of the alternate product image?
Thanks for your attention.
Solved! Go to the solution
This is an accepted solution.
Hi @Marvist,
I have made a copy of your theme and named it Streamline By Peanuts. There I have implemented both changes related to the product slider:
1- Remove the progress bar:
This was accomplished by adding this add the end of Assets/theme.css.liquid:
/*************************************************/
/*** customizations by https://peanutbutter.es ***/
/*************************************************/
/* Hide product slide progresion bar */
.product-slider.slick-initialized:after {
display: none;
}
2- Make the loop through images quicker
By default the time spent on each slide is set to 1050ms (a little above 1 second). I have set this to 750ms (about 3 quarters of the default). Let me know what you think about the current speed.
Hi, please share your store url so I can provide solution
your site is password protected, share the pass here or by PM please
password: aoniye
Hi, seems that each product has a product slider...
I would need access to the code to check how this is done in the Streamline Theme as i am not familiar with this theme's codebase.
would it be ok to request collaborator access to your store?
Hi, yes please.
Ok, before I take a look, I see what the theme does is it loops through all the product images while you place the mouse over a product. So really, on mouse-over it is not the alternative image that appears as you said, but all the images in sequence.
For example, in your CONTOUR SCRUNCH SEAMLESS LEGGINGS - PINK product, when I do mouse-over i get 3 images on a loop:
Is this what you want but quicker? or you only want to show the alternate image (second image) on mouse-over?
https://barberry-fitness-apparel.myshopify.com/
Hi,
I am sorry if I was not clear enough, let me rephrase my question:
Would it be possible to:
1) Make the loop function that runs through added picture images; faster.
&
2) Right now there is an animation of a line that appears from the left side, between the product image and the description of the product. When one holds the mouse of the product the line starts "running" which is a really stressfull feature. Would it be possible to remove this line, so that the picture would still loop (faster) and without this line feature appearing?
Thanks.
Thanks @Marvist for the detailed explanation. I have requested access to take a look.
Removing the line is really easy. Lets see about speeding up the looping on the images
Super!
I have now granted access.
Great, will try to implement a fix sometime tomorrow
Thanks for your help so far. Much appreciated.
If you have time, there is another thing. I have for some time tried to change the code so I can include icons to the announcement bar, without any luck.
I have tried to follow instructions written by another Shopify partner for the debut theme, but the code seems to be very different in Streamline.. I cannot find the section named: "
"announcement-bar__message""
Link to the topic:
https://community.shopify.com/c/Shopify-Design/Theme-Debut-Add-shipping-ICON-to-Announcement-bar/td-...
Is there an easy way to do this in Streamline theme?
This is an accepted solution.
Hi @Marvist,
I have made a copy of your theme and named it Streamline By Peanuts. There I have implemented both changes related to the product slider:
1- Remove the progress bar:
This was accomplished by adding this add the end of Assets/theme.css.liquid:
/*************************************************/
/*** customizations by https://peanutbutter.es ***/
/*************************************************/
/* Hide product slide progresion bar */
.product-slider.slick-initialized:after {
display: none;
}
2- Make the loop through images quicker
By default the time spent on each slide is set to 1050ms (a little above 1 second). I have set this to 750ms (about 3 quarters of the default). Let me know what you think about the current speed.
I can see that the progress bar is gone, and the speed of the loop is now perfect.
Thank you so much.
Nice to hear,
To make live the changes I made, you can either:
- Make live my copy of the theme
- Replace the following files from my copy to the live theme: Assets/theme.min.js and Assets/theme.css.liquid
Good luck with your store!
Thanks again for all the help!
Can you share how to make the images loop faster too 🙂
Hi!
I am trying to hide the black loading bar with your following code at Asset/theme.css.liquid but the bar is still there. Is there any way I can try to fix this issue?
/* Hide product slide progresion bar */
.product-slider.slick-initialized:after {
display: none;
}
Thanks!!
Did you fix this issue ? ...If so how thanks ?
I have a similar issue. I changed the code so the hover only shows the 2nd image, but it constantly loops through the first and second images and I want it to only loop the 2nd image (gif) on hover. Any help is greatly appreciated, thank you! https://video-milkshake.myshopify.com/
Can you share how you did that - where it only flashes between the first two images
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024