Can I customize the Website Integration icon for Squarespace?

How do I change my Website Integration icon?

Samantha Smith avatar
Written by Samantha Smith
Updated over a week ago

Looking for WordPress? Click Here.

You can use custom CSS to hide our standard heart icon and display one of your choosing. For a complete example and explanation, check out our developer documentation website.

Be sure you have your Icon of choice in an SVG file format. Watch the video above to learn how to get the URL for the SVG file.

Edit the Custom CSS of your Squarespace Site by choosing Design > Custom CSS

Paste the Following snippet into your CSS:

gspro-item-card gspro-icon {
background-image: url("your-url-here");
background-size: cover;
background-repeat: no-repeat;
}

gspro-item-card gspro-icon svg {
display: none;
}

gspro-wishlist .gspro-c-wishlist__trigger gspro-icon {
background-image: url("your-other-url-goes-here");
background-size: cover;
background-repeat: no-repeat;
}

gspro-wishlist .gspro-c-wishlist__trigger gspro-icon svg {
display: none;
}

Remember to replace "your-url-here" and "your-other-url-goes-here" with a URL to your images!

Did this answer your question?