How can I modify the style of my cart popup notification?

Store Design
, , , , ,

Topic summary

A user seeks to customize their Shopify cart popup notification to match a reference design, requesting specific styling changes including:

Desired modifications:

  • Squared buttons (remove rounded corners)
  • Green (#184F2E) checkout button with white text
  • Larger product title text
  • Light grey border around popup (matching existing site element)
  • Remove drop shadow
  • Adjust ‘Continue shopping’ underline offset to prevent text cutoff
  • Reduce ‘View my cart’ line thickness to match other buttons

Progress made:
One contributor provided CSS code addressing button border-radius, primary button background color, and text color. However, several requirements remain incomplete:

  • Checkout button text still not visible (needs white color)
  • Product title size not increased
  • ‘Continue shopping’ underline still being cut off by text
  • ‘View my cart’ line thickness not adjusted

Another user offered additional CSS for the checkout button background, but the solution remains partial. The discussion is ongoing with the original poster requesting code for the remaining modifications.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Screenshot 2023-12-04 at 21.55.35.png
Screenshot 2023-12-04 at 21.55.35.png2590×1520 285 KB

Hello!

See above, I would like to change the style of this cart popup notification to copy the look of this reference: https://store.emergencemagazine.org/ (see below as well) with the following modifications:

Squared buttons (not rounded)

Replace the blue button (?) with solid green #184F2E and white text ‘Check out’ button

Slightly larger text for the product title

Light grey border line (same as the line below “Welcome to our shop”) around the popup box;

Remove drop shadow

Slightly offset the underline below ‘Continue shopping’ so the line isn’t being cut off by the text

Keeping the same green #184F2E color for everything else

The site is www.plantedjournal.shop

Reference:

Screenshot 2023-12-04 at 21.54.33.png
Screenshot 2023-12-04 at 21.54.33.png2968×1622 459 KB

Any help would be greatly appreciated!

1 Like
2

Hi @antoinelacour

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.button:before, .shopify-payment-button__button--unbranded:before, .shopify-payment-button [role=button]:before, .button:after, .shopify-payment-button__button--unbranded:after  {
    border-radius: 0 !important;
}
.button--primary:after {
    background: #184F2E !important;
}
form#cart-notification-form * {
    color: white !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Hi @Made4uo-Ribe thank you! However it’s still missing a few modifications that I mentioned:

White text for ‘Check out’ button

Slightly larger text for the product title

Slightly offset the underline below ‘Continue shopping’ so the line isn’t being cut off by the text

Also could we reduce the line thickness for ‘View my cart’ to match, for example, the ‘Add to cart’ button on product pages?

4

Hi @Made4uo-Ribe could you also provide code for the remaining modifications?:

Slightly larger text for the product title

White text for ‘Check out’ button (currently text isn’t visible)

Slightly offset the underline below ‘Continue shopping’ so the line isn’t being cut off by the text (0.4rem)

5

Hi @antoinelacour

Paste this code snippet at the bottom of your base.css file:

.cart-notification__links .button--primary {
background: #184F2E !important;
}

Save.

BR