We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Page jump when clicking variants, code help.

Solved

Page jump when clicking variants, code help.

Alfie7766
Tourist
5 1 0

My stores product page was custom coded so I need help figuring out the code behind this is causing the issue. My store is mycrystalvessel.com on the product page only on desktop, if you select one of the variants which you have to scroll down to see the page jumps down. The further down the variant the further down the page jumps, this doesn't happen with variant options at the top. Any idea what in the code is causing this issue?

Thanks.

 

Accepted Solution (1)

Alfie7766
Tourist
5 1 0

This is an accepted solution.

I changed the input from a label to a div, as on desktop the screen tries to have the selected label in frame, so by turning it into a div and adjusting the css to style it has been solved.

View solution in original post

Replies 4 (4)

Guleria
Shopify Partner
4299 825 1189

Hello @Alfie7766 ,

 

Not sure for the exact issue but if you want to fix it. 

Edit this section JS and event prevent the click so this thing will not happen. 

 

Regards
Guleria 

 

 

- Elevate Your Store with Expert Shopify Services. Email: guleriathakur43@gmail.com - Need a quick fix or a tailored customization? I’ve got you covered.
- Looking to enhance your pages? Try GEMPAGES- a powerful drag & drop page builder.
- Let’s make your store stand out. Get in touch today!
- My Apps: Productify Groups – Smart product grouping made easy.

tim
Shopify Partner
4812 598 1733

This seem to be a CSS-related issue.

Go to this section settings in Cusomizer and paste this into "Custom CSS" setting:

input[name=Intentions] {
  display: none;
}
If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Alfie7766
Tourist
5 1 0

This is an accepted solution.

I changed the input from a label to a div, as on desktop the screen tries to have the selected label in frame, so by turning it into a div and adjusting the css to style it has been solved.

PaulNewton
Shopify Partner
8031 687 1647

Hi @Alfie7766 👋 Careful with that, you can be undermining both the usability and accessibility of your website.

Labels allow clicking the labels area to make a selection and helps the blind or low motion individuals navigate a website.

 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org