Solved

Streamline Theme - Collection Grid/ Collection page - hover effect

Marvist
Excursionist
20 0 3

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. 

Underline left to right.PNG

Accepted Solution (1)
PeanutButter
Shopify Partner
385 67 181

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.

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es

View solution in original post

Replies 23 (23)

PeanutButter
Shopify Partner
385 67 181

Hi, please share your store url so I can provide solution

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Marvist
Excursionist
20 0 3
PeanutButter
Shopify Partner
385 67 181

your site is password protected, share the pass here or by PM please

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Marvist
Excursionist
20 0 3

password: aoniye

PeanutButter
Shopify Partner
385 67 181

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?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Marvist
Excursionist
20 0 3

Hi, yes please.

PeanutButter
Shopify Partner
385 67 181

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/

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Marvist
Excursionist
20 0 3

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. 

 

 

 

PeanutButter
Shopify Partner
385 67 181

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

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Marvist
Excursionist
20 0 3

Super!

I have now granted access. 

PeanutButter
Shopify Partner
385 67 181

Great, will try to implement a fix sometime tomorrow

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Marvist
Excursionist
20 0 3

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?

PeanutButter
Shopify Partner
385 67 181

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.

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Marvist
Excursionist
20 0 3

Hi @PeanutButter 

I can see that the progress bar is gone, and the speed of the loop is now perfect. 

Thank you so much. 

PeanutButter
Shopify Partner
385 67 181

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!

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Marvist
Excursionist
20 0 3

Thanks again for all the help!

locusoccult
New Member
4 0 0

Can you share how to make the images loop faster too 🙂

Campionk
Shopify Partner
37 0 4
In the product-grid file you need to change count = 10 to count = 2. You
also need to change the theme-min.js file and use the search function to
find 1050(this is in milliseconds) so the shorter the number the faster it
is.
coffeedrinker
Visitor
1 0 0

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!!

Campionk
Shopify Partner
37 0 4

@coffeedrinker 
Can you share your site so I can have a look?

teeshirtkings
Visitor
1 0 0

Did you fix this issue ? ...If so how thanks ?

Campionk
Shopify Partner
37 0 4

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/

locusoccult
New Member
4 0 0

Can you share how you did that - where it only flashes between the first two images