Watch our quick tutorial on Popup Customizations & General Translations HERE.

Customizing the Warning Pop-Up Banner for Your Store

This document outlines the steps to customize the warning pop-up banner in your app, including how to adjust the text, styling, and animations. Follow the instructions below to make these changes for your pop-up.

1. Adjusting the Pop-Up Container

To customize the pop-up container itself, we can adjust its visual appearance, positioning, background image, and animations.

CSS Code for Customizing the Pop-Up Container:

#mincart-popup-container {
  z-index: 2147483650; /* Ensures the pop-up appears above other elements */
  animation: fadeIn 0.0s ease-in-out; /* Adds a fade-in animation (set to 0s to disable delay) */
  border-radius: 25px; /* Rounds the corners of the pop-up */
  background-image: url('https://cdn.shopify.com/s/files/1/0820/2023/7620/files/alice-pasqual-xdD-x2Y2SPI-unsplash.jpg?v=1741706445'); /* Custom image URL */
  background-size: cover; /* Ensures the image covers the entire container */
  background-position: center center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
}

Explanation:

z-index: Ensures the pop-up appears above other page elements.
animation: Controls how the pop-up fades in (set to 0s here to remove the fade duration).
border-radius: Adds rounded corners to the pop-up container.
background-image: Sets a custom image as the background of the pop-up.
background-size: Ensures the image fills the entire container.
background-position: Keeps the image centered.
background-repeat: Prevents the image from repeating.

2. Customizing the Fade-In Animation

If you'd like to modify the fade-in effect, you can tweak the @keyframes used for the animation:

CSS Code for Fade-In Animation:

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

Explanation:

The animation starts with the pop-up being partially transparent ( opacity: 0) and slightly smaller ( scale(0.95)), then fades in and grows to its normal size ( opacity: 1, scale(1)).

3. Customizing the Button Inside the Pop-Up

You can adjust the appearance of the button inside the pop-up to make it more attractive, including rounding the corners and changing the background on hover.

CSS Code for Button Customization:

#mincart-popup-container .popup-button {
  background-color: #007bff; /* Blue background color */
  color: white; /* White text */
  padding: 10px 20px; /* Adds padding around the text */
  border: none; /* Removes the border */
  border-radius: 8px; /* Rounds the corners of the button */
  cursor: pointer; /* Adds a pointer cursor on hover */
  transition: background-color 0.3s ease; /* Adds a smooth transition for hover effect */
}

#mincart-popup-container .popup-button:hover {
  background-color: #0056b3; /* Darker blue background on hover */
}

Explanation:

border-radius: Adds rounded corners to the button.

transition: Smoothens the background color change when hovering.

4. Customizing Text in the Pop-Up

If you need to adjust the text within the pop-up, such as the title or message, you can modify the styles for specific elements.

CSS Code for Customizing Text:

#mincart-title {
  font-size: 24px; /* Sets the font size for the title */
  color: red; /* Sets the text color */
  margin-bottom: 10px; /* Adds space below the title */
  border-radius: 8px; /* Rounds the corners of the title background */
  background-color: #f2f2f2; /* Light background to highlight the title */
  padding: 10px; /* Adds padding around the title */
}

#mincart-popup-container p {
  font-size: 16px; /* Sets the font size for the message */
  color: #666; /* Sets a gray color for the message text */
}

Explanation:

font-size: Adjusts the text size for both the title and message.

background-color and border-radius: Adds a background and rounding effect to the title for a more appealing look.

5. Adjusting Warning Pop-Up Specific Styles

If you need to apply specific styles to a warning pop-up (such as a duplicate checkout warning), you can target specific elements using class selectors.

CSS Code for Customizing Warning Message:

.mincart-checkout-duplicate:not([disabled]) {
  background-color: red; /* Sets a red background for the warning */
  color: black; /* Black text for high contrast */
}

Explanation:

This class targets the warning pop-up related to a duplicate checkout and styles it with a red background and black text for visibility.

6. Fonts

In MinCart, you can adjust the fonts used in your warning pop-up. However, there are some limitations:

You need to know which fonts your current theme supports.

You cannot use a random font in the custom CSS field.

Because there are many different themes, we are unable to assist with determining which fonts your theme supports. However, we can provide guidance on how to make these adjustments.

Steps to Adjust Fonts:

Go to the Pop-up Customization tab in MinCart.

Add the following code to the Custom CSS field:

#my_element_id {  
  font-family: "My_Font";  
}

Replace "My_Font" with the font you'd like to use, ensuring it's supported by your theme.

7. Additional Customization Tips

Font Customization: You can adjust the font family, size, and weight to match your brand's design.

Example:

#mincart-popup-container {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: 600; /* Semi-bold font weight */
}

Spacing and Layout: Modify padding, margin, and line-height to control the space inside and around the pop-up.

Example:

#mincart-popup-container {
  padding: 20px;
  margin: 15px auto;
  line-height: 1.6;
}

Results:

Copy Code and paste in the CSS Custom Container.

/* Pop-Up Container Styling */
#mincart-popup-container {
z-index: 2147483650; /* Ensures the pop-up appears above other elements */
animation: fadeIn 0.0s ease-in-out; /* Fade-in animation (disabled duration if needed) */
border-radius: 25px; /* Rounds the corners of the pop-up */
background-image: url('https://cdn.shopify.com/s/files/1/0820/2023/7620/files/de-an-sun-FeGYwJtfX9Y-unsplash.jpg?v=1743798433'); /* Custom background image */
background-size: cover; /* Ensures the image covers the entire container */
background-position: center center; /* Centers the image */
background-repeat: no-repeat; /* Prevents the image from repeating */
font-family: 'Arial', sans-serif; /* Font family */
font-size: 16px;
font-weight: 600; /* Semi-bold font weight */
padding: 20px;
margin: 15px auto;
line-height: 1.6;
}

/* Fade-In Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}

/* Button Styling */
#mincart-popup-container .popup-button {
background-color: transparent;
color: white; /* White text */
padding: 10px 20px; /* Padding around the text */
border: none; /* Removes border */
border-radius: 25px; /* Rounds corners */
cursor: pointer; /* Pointer on hover */
transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Removed hover effect */
#mincart-popup-container .popup-button:hover {
background-color: transparent;
}

/* NEW: Specific Button Styling */
#mincart-button {
background-color: transparent; /* Transparent background */
color: white; /* White text */
padding: 10px 20px; /* Spacing inside the button */
border: 2px solid white; /* White border */
border-radius: 12px; /* Rounded corners */
font-size: 16px; /* Text size */
font-weight: bold; /* Bold text */
cursor: pointer; /* Pointer on hover */
transition: all 0.3s ease-in-out; /* Smooth transition */
}

/* Text Styling */
#mincart-title {
font-size: 100px; /* Title size */
color: white; /* Title color */
margin-bottom: 10px; /* Space below title */
border-radius: 8px; /* Rounded title */
background-color: transparent; /* Light background */
padding: 10px;
}

#mincart-popup-container p {
font-size: 16px;
color: #666;
}

/* Duplicate Checkout Warning Styling */
.mincart-checkout-duplicate:not([disabled]) {
background-color: red; /* Red warning background */
color: black; /* High contrast text */
}

/* Example of font customization for specific element */
#my_element_id {
font-family: "My_Font"; /* Replace with your theme-supported font */
}

Updated on: 04/04/2025