This feature is available on all Goodshuffle Pro Plans.
On certain Squarespace sites, the wishlist heart icon (the one inside item cards and the floating wishlist trigger in the corner of the page) can appear correctly on desktop but be invisible on mobile. You'll typically see the colored button container and the count badge, but no heart inside.
Before applying any CSS, FIRST check the version of the Website Integration in the customer's site header. Older versions (such as 0.5.2 or 0.5.3) are known to cause heart icon rendering issues on mobile, and updating to the latest version often fixes the problem on its own without any CSS changes.
How to check and update the version:
In Squarespace, go to Website > Pages > Website Tools > Code Injection.
Look at the
<script>tags in the Header section. The version number appears in the URL after@goodshuffle/wc@(for example,@goodshuffle/[email protected]).If the version is older (e.g., 0.5.2, 0.5.3), replace the script tags with the latest version from our Squarespace Setup developer documentation.
Click Save, then have the customer hard-refresh their site on mobile to see if the issue is resolved.
If updating the version fixes it, you're done. If the heart icon is still missing or not centered after updating, continue with the CSS fix below.
Why This Happens
If updating the version doesn't resolve it, the issue is likely caused by a CSS rule somewhere on the site (often left over from a previous customization, like a "Change heart to Add to Wishlist text button" snippet, or applied by the theme) that hides or zeroes out the icon's dimensions specifically at mobile breakpoints. The button stays visible, but the heart inside it gets hidden.
⚠️ Important: Customize the Heart Color Before Using This Snippet
The snippet below uses fill: #ffffff (white) as the heart color in two places. This will likely NOT match your client's brand. A white heart looks great on a dark or colored button background, but if the client's button is light-colored, white will be invisible.
Before sharing this snippet with a customer:
Check what color their wishlist button background is
Replace BOTH instances of
#ffffffin the snippet below with a hex color that contrasts well against that buttonIf unsure, ask the client what color they want the heart to be
Common choices: #ffffff (white) for dark buttons, #000000 (black) for light buttons, or any hex color matching their brand accent.
The Fix: Force the Heart Icon Visible and Centered
Edit the Custom CSS of your Squarespace site by choosing Design > Custom CSS. Paste the following snippet at the bottom of any existing CSS:
Remember to replace #ffffff with the appropriate heart color for the client's design (see callout above).
/* Floating wishlist heart (bottom-right corner) */
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__trigger gspro-icon,
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__trigger svg {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 24px !important;
height: 24px !important;
}
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__trigger use {
fill: #ffffff !important; /* ← Replace with the client's preferred heart color */
}
/* Item card heart icon — fix display, fill, AND centering */
gspro-item-card .gspro-o-card__add button.gspro-o-button,
gspro-item-card .gspro-o-card__add .gspro-o-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
padding: 0 !important;
}
gspro-item-card .gspro-o-card__add gspro-icon,
gspro-item-card .gspro-o-card__add svg {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
line-height: 1 !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
.gspro-c-item-card__add use {
fill: #ffffff !important; /* ← Replace with the client's preferred heart color */
}
/* Mobile-specific override to defeat any breakpoint rules */
@media (max-width: 768px) {
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__trigger gspro-icon,
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__trigger svg {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 24px !important;
height: 24px !important;
}
gspro-item-card .gspro-o-card__add button.gspro-o-button,
gspro-item-card .gspro-o-card__add .gspro-o-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
padding: 0 !important;
}
gspro-item-card .gspro-o-card__add gspro-icon,
gspro-item-card .gspro-o-card__add svg {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
line-height: 1 !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
}
Click Save, then hard-refresh your mobile browser (or test in an incognito window) to see the change.
What This Snippet Does
Forces the heart SVG to render on both the floating wishlist trigger and the item cards by overriding any rule that hides or shrinks the icon.
Fills the heart with the chosen color so it's visible against the button background. Make sure to replace
#ffffffwith a color that contrasts with the client's button background.Centers the heart inside the item card button using flexbox. This is important because the default button styling can leave the icon anchored to the bottom or side of the button.
Repeats the rules inside a mobile media query to win against any conflicting mobile-specific CSS that might be in the customer's site.
Need Additional Support?
Click the blue chat bubble in the bottom-right corner of your screen to message our support team—we're happy to help!