Jump to content

Changing Product Carousel Arrows with Custom Image

Go to solution Solved by tuanphan,

Recommended Posts

Hi there!

I am looking to use custom arrow images on my carousel within each of my product pages on my site (see attached). I can't seem to hide the default arrows and replace them with my images.

Any help? It would be much appreciated!

Stints Arrow_LEFT.png

Stints Arrow_RIGHT.png

Link to comment
  • Replies 6
  • Views 801
  • Created
  • Last Reply

Top Posters In This Topic

You can use this code to Website > Website Tools > Custom CSS. If it doesn't work, please share link to a product, I can check again easier.

button.ProductItem-gallery-next:after, button.ProductItem-gallery-prev:after {
    display: none !important;
}
button.ProductItem-gallery-next {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_04/StintsArrow_RIGHT.thumb.png.2cee83fbaecf030c2d24e60c24363d80.png);
}
button.ProductItem-gallery-prev {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_04/StintsArrow_LEFT.thumb.png.56fc7339c93f372fddaf8e32b259ae5a.png);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/29/2024 at 8:16 PM, stewartcnr said:

Thanks for the reply. I tried the code and sadly it didn't work. Here is a link to a product page that includes the carousel: https://marlin-alligator-mw65.squarespace.com/shop/p/spring-bowl-rltkk-jy5sr-fjw6l-dp8lg-fbmgj-cs6n2-zpp9a-x7c9k-c68b7-p3yb8

I am hoping to have these custom arrows on every product page. Thanks for your support and hope to hear back soon.

Your site is private, you can follow this guide to share correct url.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
On 5/1/2024 at 7:11 PM, stewartcnr said:

Oh my apologies! I have set up a password protected version of the site now and reattached the link here - https://marlin-alligator-mw65.squarespace.com/stints/p/aftersun

Password is - stewartstints23

Thanks again and I hope to hear if you can help me out soon!

Use this new code

button.ProductItem-gallery-next:after, button.ProductItem-gallery-prev:after {
    display: none !important;
}
button.ProductItem-gallery-next, button.ProductItem-gallery-prev {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
button.ProductItem-gallery-next {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_04/StintsArrow_RIGHT.thumb.png.2cee83fbaecf030c2d24e60c24363d80.png);
}
button.ProductItem-gallery-prev {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_04/StintsArrow_LEFT.thumb.png.56fc7339c93f372fddaf8e32b259ae5a.png);
}

image.png.548c85d313032b1ef7d12c4d0269174f.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.