Wishlist Plus customization

[paigepoutine]

Hello,

I am using the Studio theme in my Shopify store.

I have two issues:

I can’t seem to change the button/icons to my brand colour #4A3728 (brown) instead of black.

As well, I chose icon only and still get a button but no text. I prefer a cleaner on-brand layout. I either get a large Add to Wishlist button in black stacked below the ATC button, or a large empty black button stacked below when icon only is selected. I was sent a link to this article: Customize Wishlist Button on Product Page | Swym Help Center , but I already had this set up and it still didn’t work, and positioning feature doesn’t show up at all.

Any help is appreciated, thank you so much!

I would like this layout in the example below (except the icon in my brown):

[tim_tairli]

Ideally – share a link to your store (and storefront password if it’s password protected).

[rajweb]

Hey @paigepoutine ,

Thank you for sharing the details.

1. Change Button/Icon Color to Brand Colour (#4A3728):

You can update the button and icon color by adding some custom CSS to your theme. Here’s how you can do it:

1. Go to Online Store > Themes > Actions > Edit code.

2. Find the base.css or theme.css file (depending on your setup).

3. Add the following CSS at the bottom of the file:

/* Change Add to Wishlist icon color to brown */
.swym-wishlist-button svg, 
.swym-wishlist-button path {
    fill: #4A3728 !important;
}

/* Change any button text color if needed */
.swym-wishlist-button {
    color: #4A3728 !important;
    border-color: #4A3728 !important;
}

This will force the icon and button elements to use your brand colour.

Fix “Icon Only” Layout Showing Large Empty Button Below Add to Cart:

The issue you are facing usually happens when the theme’s CSS or layout settings don’t properly hide the default button container when using “icon only.” To fix this:

1. In the theme.liquid or product-template.liquid file, you can conditionally hide the text/button when only the icon is enabled.

2. Add this CSS to hide the fallback button when icon-only is selected:

/* Hide empty or fallback buttons when using icon-only */
.swym-wishlist-button--icon-only + .swym-wishlist-button {
    display: none !important;
}

3. Also, ensure that the setting for “icon only” is fully enabled, and any JavaScript controlling fallback visibility is working as expected. If needed, we can adjust the theme files to ensure only the icon is rendered.

If you want me to implement this for you, please feel free to reach out. I’d be happy to help you with the styling and layout adjustments to match your brand perfectly! https://www.rajatweb.dev/

Best Regards,

Rajat

Rajat Kumar - Shopify Expert & Full-Stack Developer

[paigepoutine]

Thank you so much for your help! Unfortunately, this didn’t fix my issue.

[paigepoutine]

Site: https://paigepoutine.com/

Password: rtalya

[tim_tairli]

Try this:

.product-form__buttons {
  display: flex;
  gap: 1rem;
  --my-color: #fa7f51;
}
.product-form__buttons > * {
  margin:0;
}

#swym-atw-button-container {
  margin: 0;
  width: auto;
}

#swym-atw-pdp-button {
  background: transparent;
}

button:hover #swym-atw-pdp-button-icon {
  transform: scale(1.5);
}

#swym-atw-pdp-button-icon {
  stroke: var(--my-color);
  transform: scale(1.25);
}

.atw-button-added #swym-atw-pdp-button-icon {
  fill: var(--my-color);
}

Can go into “Custom CSS” in Section settings.

→

[namphan]

Hi @paigepoutine,

Please go to Customize > Theme settings > Custom CSS and add code:

.atw-button-add {
    background: #4A3728 !important;
}
.atw-button-icon path {
    fill: #FFFFFF !important;
}

[rajweb]

@paigepoutine

Thank you so much for your help! Unfortunately, this didn’t fix my issue.

No Worries at all! If you can invite me to your Shopify store, I’ll be able to assist you and resolve it more effectively.→ https://www.rajatweb.dev/. Thanks!

[paigepoutine]

Omg thank you so much!!!

[tim_tairli]

Looks good, but! There is one thing you need to address immediately:

Something strange is going on around here – looks like Liquid is not processed?

layout/theme.liquid

[paigepoutine]

Ahh, yes, thank you!

[Daniyal_HA]

WishlistSuite’s styling is fully managed via CSS variables and Shopify theme settings. In a 2.0 theme, you can set the wishlist icon colour in one place or override styles without wrestling with default button HTML. Because WishlistSuite’s code is lean, the icon-only mode truly outputs just the heart icon (no extra empty wrapper), preventing the strange blank-button issue above. In short, WishlistSuite avoids the bloated fallback elements and makes colour changes straightforward.