Popup Customization

Enhance the user experience by customizing the warning popup that appears when a limit isn't met. Popup customization offers a simple yet powerful way to make the warning popup match your store's branding.

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

Table of Contents

Overview
Color Customization
Custom CSS
Real-time Preview

Overview

With Popup Customization, you can configure:

Background Color
Font Color
Button Color
Button Text Color
Custom CSS
Fonts

Color Customization

Background Color

Pick a color to set as the background for the popup.

Font Color

Choose the color of the text displayed in the popup.

Button Color

Select the color for the button in the popup.

Button Text Color

Customize the color of the text displayed on the button.

Custom CSS

For those who want more granular control, a "Custom CSS" text box is available. Use the following IDs for specific styling:

#mincart-popup-container
#mincart-title
#mincart-limit-list
#mincart-button

CSS Example:

#mincart-popup-container {
  border-radius: 5px;
}

#mincart-title {
  font-size: 50px;
}

#mincart-limit-list {
  font-size: 20px;
}

#mincart-button {
  font-size: 16px;
}

To adjust the size of the pop up you can add:

#mincart-popup-container {
  max-width: 500px;
}

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";  
    }

Click Save to apply the changes.

Note: Replace "My_Font" with the name of a font that is supported by your theme. If you're unsure about supported fonts, refer to your theme's documentation.

Real-time Preview

See the changes you make in real-time with the preview section. This ensures that what you see is what you'll get before you save and implement the changes.

Updated on: 29/01/2025