You can further style the Recent Sales Popup by adding custom CSS using the provided element IDs. These IDs control different parts of the popup, and with them, you can customize the appearance to fit your store’s branding or design.

Available Element IDs:

• Image: #hbrsp-img
• Message: #hbrsp-msg
• “Don’t Show Again” Link: #hbrsp-dontshow

Using these IDs, you can insert custom CSS into the Custom CSS field to personalize the popup.

Examples:

1. Change Font Size of the Message:
   If you want to change the font size of the notification message, use the following code:

   #hbrsp-msg {
       font-size: 16px;
   }

2. Adjust Width for Mobile Devices:
   To ensure the popup looks good on mobile devices, you can adjust its width using a media query. Here’s an example to adjust the width when the screen width is less than 470px:

   @media only screen and (max-width: 470px) {
       .alerthb-user {
           max-width: 300px !important;
       }
   }

Note:

• Always use !important if you want to override default styles.
• Custom CSS is a powerful tool, so use it with caution to avoid affecting the popup’s functionality or layout.