Popup Notifications Stroke

Store Design
, ,

Topic summary

A user wants to modify the appearance of popup notifications on their Shopify store, specifically adding a stroke/border similar to a reference image they provided.

Solution Provided:

  • Another user shared CSS code to add a border to the cart notification
  • Instructions include: navigating to Online Store > Themes > Edit code, locating the main CSS file (base.css, style.css, or theme.css), and adding the code snippet at the bottom:
div#cart-notification {
  border: 1rem solid grey;
}

Follow-up Question:
The original poster asked if it’s also possible to add rounded edges to the cart notification.

Status: The border styling question appears resolved, but the rounded edges request remains unanswered.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
4

Hi @heartlessoff

Do you mean the line onf the notification box? Like this?

Made4uoRibe_0-1722336521470.png
Made4uoRibe_0-1722336521470.png583×559 13.5 KB

If it is check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
div#cart-notification {
    border: .1rem solid grey;
}
  • And Save.

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

2 Likes