Slideshow pauses when mouse hovers over it

Slideshow pauses when mouse hovers over it

darkcloud367
Excursionist
24 1 8

My slideshow has clickable content and since it takes up the entire screen, your mouse will always be hovering over the image, meaning the slideshow never gets to play. I would like to disable the pause on mouse hover feature but not sure what code I would need to edit to do it.

 

Dawn theme

site: elitepokemon.nl

password: opendewebsite!

Replies 7 (7)

BSS-Commerce
Shopify Partner
3477 463 538

Hi @darkcloud367 ,

 

Your code indeed contains a segment that causes the slideshow to pause when hovered over.

Here's the solution, but since I can't access your code, I will guide you on how to do it.

After my examination, I found that your slideshow is being controlled by JavaScript code.

 

Step 1: Go to the "Themes" section in Shopify and select "Edit Code"

Then, within the files with the ".js" extension in your theme (you should start by checking the "theme.js" file).

 

view (97).png

 

Step 2: Use Ctrl + F to search for segments of code with "mouseover," "mouseleave," or "focusIn." At that point, try removing those lines of code, or search for functions with a "stop" logic and remove the "stop" function.

Example in my code , i remove all 4 line . You can try remove each line or all line

I hope this helps you achieve your goal. @darkcloud367 

 

view - 2023-08-10T132813.002.png

 

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via [email protected]


BSS Commerce - Full-service eCommerce Agency
darkcloud367
Excursionist
24 1 8

I couldnt find your code in the JS line or theme file. I did found these codes, do I need to edit these? Screenshot 2023-06-06 094042.pngScreenshot 2023-08-10 232955.png

BSS-Commerce
Shopify Partner
3477 463 538

Here I am providing an example on the Dawn theme, but you might be using a different theme. In Shopify, each theme has completely different code, so since I don't know what theme you are using, it's difficult to know where the slideshow handling code is located in your code. The two images below don't seem to be the code snippet for handling this mouse-over behavior.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via [email protected]


BSS Commerce - Full-service eCommerce Agency
Rssell401
Visitor
2 0 1

I'm having the same problem. 

 

I'm using Dawn theme but my slides are not clickable. 

 

They just freeze on hover. Given they take up most of the screen - this is a bad look. 

 

I'm trying to follow these instructions - but like @darkcloud367  said - there is no "theme.js" file. 

 

There is a theme.liquid file but it does not contain "mouseover," "mouseleave," or "focusIn.".

 

Unsure why I have to dig into a .js file for a simple slideshow configuration... Compared to Wix - Shopify is very limited from a design standpoint. I shouldn't have to pay $250 for a different "theme" which maybe just as perplexing as dawn...

Rssell401
Visitor
2 0 1

@darkcloud367 

@BSS-Commerce 

 

Since I was having the same issue (my slideshow would pause on hover) I reached out to Shopify support chat. I was eventually told I should hire a “Shopify Expert” for this “customization”. Apparently not having a slideshow pause on hover is a customization. Chat agent then ended the chat.

 

Wtf?!

 

Read for yourself. I had already spent a half hour trying to solve what should be a simple setting so I am read kinda grumpy. Nothing against the support agent. He tried at least – just didn’t know the product.

 

16:10 System: An agent has joined the chat

16:10 User Connection Message: User has connected

16:10 Mankirat (Support Advisor): Hi, this is Mank, your Shopify Support Advisor!

16:11 R: This is what I want to do:

16:11 Mankirat (Support Advisor): I understand that you're having some difficulties with the theme.js file.

16:11 R: [[[link to this post]]]

16:11 R: There is no theme.js file

16:11 Mankirat (Support Advisor): Rest assured, I'm here to help you get this sorted out.

16:12 Mankirat (Support Advisor): I see.

16:13 Mankirat (Support Advisor): Could you please share more about what you're trying to achieve?

16:13 Mankirat (Support Advisor): ccccccvdhvldhjrtnbkkibbrvurvkdgcieugnvbeuhkg

16:14 R: read this please.

16:14 R: [[[link to this post]]]

16:14 Mankirat (Support Advisor): Sure! I am checking on this right now. Please give me 2-3 minutes to do so.

16:15 R: my slides do not have clickable content - but I am having the same issue. I do not want the slides to pause on hover.

16:19 Mankirat (Support Advisor): Thank you for your patience.

16:19 R: Please tell me what .js file I need to edit and what to remove the pause on slide hover

16:21 R: I am supposed to deliver a proposal to a client today who uses Shopify. Having this pause on slide hover kinda ruins my proposal.

16:21 Mankirat (Support Advisor): I would request your to look for index.js, main.js, vendor.js, etc. The slideshow functionality might be contained in one of these files.

16:22 R: ok let me check. Any idea what to search for in these files?

16:24 Mankirat (Support Advisor): I have checked and see that index.js is in Templates folder.

16:26 User Connection Message: User has disconnected

16:26 User Connection Message: User has connected

16:26 R: I'm looking at index.json. What should I change?

16:29 User Connection Message: User has disconnected

16:29 User Connection Message: User has connected

16:29 Mankirat (Support Advisor): I apologize for the confusion. If you're using the Dawn theme, the JavaScript file you're looking for might not be named theme.js. Instead, you might find the relevant code in a different file.

16:31 R: Ok. the article I sent is centric on the Dawn theme. What file should i be looking for?

16:31 Mankirat (Support Advisor): I am checking this for you.

16:31 Mankirat (Support Advisor): In general, you should be looking at JavaScript files, which have the .js extension. In the Dawn theme, these files are usually named main.js or index.js and are located in the assets directory.

16:32 Mankirat (Support Advisor): Once you've opened the correct file, look for the code that controls the slideshow. This might be under a comment like // Slideshow or // Carousel. You're looking for a line of code that says something like pauseOnHover: true and you want to change it to pauseOnHover: false.

16:34 R: There is no index.js or main.js under assets.

16:35 R: There is index.json under templates which I mentioned before.

16:37 Mankirat (Support Advisor): In the Dawn theme, the JavaScript files are organized in a different way. The JavaScript for the slideshow functionality is likely contained within the base.js file located in the assets directory.

16:38 R: You just said.. "you should be looking at JavaScript files, which have the .js extension. In the Dawn theme, these files are usually named main.js or index.js and are located in the assets directory."

16:38 R: Lets try to find base.js

16:40 Mankirat (Support Advisor): The Dawn theme has undergone several updates, and different versions of the theme may have different file structures.

16:40 R: there is a base.css. no java....

16:40 R: Dawn 12.0.0

16:42 Mankirat (Support Advisor): I see, let me coordinate with the theme support team for the issue.

16:45 Mankirat (Support Advisor): I have reached out to our theme support team regarding your issue.

16:50 R: This should be a simple configuration.. What do you mean? Are they going to join the chat?

16:51 R: Dawn is your most basic theme and a slideshow is a pretty basic element. How is this so complicated?

16:52 Mankirat (Support Advisor): I understand your concern, R.

16:52 Mankirat (Support Advisor): I am currently coordinating with our theme support team from my end. As a support advisor, I am not allowed to provide coding advice, which is why I have reached out to them.

16:53 Mankirat (Support Advisor): They won't join the chat, I have messaged them form my end and currently waiting for their response.

16:58 Mankirat (Support Advisor): This is taking a bit longer than expected. If it's more convenient for you, I can certainly send a follow-up email with the information from our theme support team once I receive it.

16:59 R: .... no we are going to sort this out now.

16:59 Mankirat (Support Advisor): Sure! I have messaged the team and currently waiting for their response.

17:04 R: Again. I am supposed to deliver a proposal to a client today who currently uses Shopify...

17:05 R: I use Wix.

17:06 Mankirat (Support Advisor): I'm doing my best to get you the information you need as quickly as possible. I appreciate your patience while we wait for a response from the theme support team.

17:09 Mankirat (Support Advisor): sincerely apologize for the delay, R. The queue for our theme support team is a bit longer than usual at the moment.

17:09 Mankirat (Support Advisor): I understand the urgency and I'm doing my best to get a response as quickly as possible.

17:14 Mankirat (Support Advisor): I don't mean to rush you and I just want to make sure we are still connected?

17:14 R: Yes

17:15 Mankirat (Support Advisor): Thank you very much for staying connected.

17:16 Mankirat (Support Advisor): I have received a response from our theme support team. Given that the instructions you're trying to follow came from an external source, they recommend that the next step you take is to coordinate with the person who posted the instructions in the forum page.

17:17 Mankirat (Support Advisor): This is because this is considered a custom code-related customization, which we are unable to assist with.

17:17 Mankirat (Support Advisor): I understand this might not be the answer you were hoping for, and I apologize for any inconvenience this may cause.

17:17 R: WHAT??? This is your product......

17:18 R: It is not custom coded. It is FROM YOU

17:19 Mankirat (Support Advisor): I understand your frustration, R. The issue here is that the solution you're trying to implement was posted by a third party on a community forum, not by Shopify.

17:19 Mankirat (Support Advisor): While the Dawn theme is indeed a Shopify product, the specific customization you're trying to implement (disabling the pause on hover for the slideshow) is not a built-in feature of the theme and requires custom coding.

17:20 R: That's insane.

17:20 Mankirat (Support Advisor): The original post you're referring to also mentions that they couldn't find the theme.js file, which suggests that they were also dealing with a customized version of the theme or a different theme structure.

17:21 R: Look. FOrget the link. Ask your code person if there is anyway not to have pause on hover.

17:23 R: It is a VERY SIMPLE change.

17:24 Mankirat (Support Advisor): I understand that this is a challenging situation. As a support advisor, I'm not allowed to provide coding advice.

17:24 Mankirat (Support Advisor): I would recommend hiring a Shopify expert who can help you with this customization.

17:24 Mankirat (Support Advisor): Shopify experts have extensive experience with our themes and can provide the coding assistance you need.

17:24 R: Ok. Connect me to them...................................

17:25 R: Again I'm using Dawn 12.0.0 - your basic theme with no mods...

17:25 R: All I want to do is not have the slideshow pause on hover.

17:26 Mankirat (Support Advisor): You can hire a Shopfy Expert from here.

17:27 System: Chat ended by agent

MCOFA
Excursionist
30 0 12

Yeah - I don't know who designs some of these features that are missing common sense features or settings. They are probably in cahoots with the apps or "experts" who will charge for such things (that should be just there, common sense features).

The images are so large, the mouse is always on pausing the show. lol. true. sad it is not a checkbox edit.

Sedura
Visitor
2 0 0

The fix can be found here :https://community.shopify.com/c/shopify-design/slideshow-pauses-when-mouse-hovers-over-it/m-p/234034...

 

You need to go to global.js and follow the steps below.