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

Store Design
, , , , ,
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!

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!

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