This topic has 7 replies, 3 voices, and was last updated 1 years, 7 months ago ago by NelsonTsai
Hello,
The default slider arrows for product navigation is not clear on mobile phone. It is thin black style.
I changed the background color, but no effects on Google Pixel 4XL chrome.
Is there any methods I can adjust the style of Arrow, especially make it visually prominent on mobile phone?
Thank you.
Hello @NelsonTsai,
In order to make the Arrow style more visually prominent on mobile phones, we recommend that you copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS. After doing so, please clear your browser cache and check back to your site. The result should look like the image provided at the following link: https://postimg.cc/FdZrYsZg.
@media(max-width: 767px){
.arrows-hovered>.swiper-container .swiper-custom-right, .arrows-hovered>.swiper-container .swiper-custom-left {
background-color: #000 !important;
color: #fff !important;
}
}
Please note that you can change the color code in the CSS as per your requirements.
Best Regards,
8Theme’s Team
Hello,
The CSS you provided works for single product gallery images.
What I needed is for product images from woo’s product query loop.
Sorry not explaining clear in my 1st post.
Thank you.
Hello @NelsonTsai,
Thank you for the reply.
We kindly request that you provide us with a URL to the page on your website that contains woo’s product query loop, as well as a screenshot and the mentioned arrow.
You can use screenshot tools such as Lightshot or Gyazo and share the links here. Alternatively, you can use a file-sharing service such as WeTransfer https://wetransfer.com/.
Thank you for your cooperation and we look forward to hearing from you soon.
Kind Regards,
8theme team
Hello,
I compiled the URLs with cellphone’s screenshot to a PDF posted in private area.
BR,
Hello @NelsonTsai,
Thank you for the reply.
Please change the code https://prnt.sc/EnTZr1mR9zXG to:
@media(max-width: 767px){
.arrows-hovered>.swiper-container .swiper-custom-right, .arrows-hovered>.swiper-container .swiper-custom-left,
.hover-effect-slider .sm-arrow:before, .swiper-custom-left:before, .swiper-custom-right:before {
background-color: #000 !important;
color: #fff !important;
padding: 10px;
}
}
Kind Regards,
8theme team
Hello,
Just tested, and worked well.
Thank you.
Tagged: clear design, product navi, slider arrows, templates, user friendly, woocommerce, wordpress
The issue related to '‘How to make “Slider Arrows” for product navi more clear’' has been successfully resolved, and the topic is now closed for further responses