Pop Up Customization Guide

This article will guide you through the process of resizing and customizing the pop-up that appears when the quantity or limit has not been reached in your online store.

Step 1: Navigate to your admin panel. Here, you'll find a test that was previously created.

Step 2: Look to the left side of your screen. Here, you'll find the option for pop-up customization. Click on it.

Step 3: Scroll down to the custom CSS section. Below this tutorial, you'll find the custom CSS that you need to paste into this section. Once you've pasted it, you'll notice the pop-up has changed.

#mincart-popup-container {

width: 300px !important;

height: auto !important;

background-color: #000000;

padding: 40px;

border-radius: 20px;

}

#mincart-title {

color: #FEFEFE;

font-size: 36px;

font-weight: bold;

margin-bottom: 20px;

text-align: center;

}

#mincart-limit-list {

list-style: none;

padding-left: 0;

margin-bottom: 20px;

color: #FEFEFE;

font-size: 18px;

line-height: 1.5;

text-align: center;

}

#mincart-button {

background-color: #787878;

border: none;

color: #FFFFFF;

font-size: 16px;

padding: 10px 20px;

border-radius: 8px;

cursor: pointer;

font-family: inherit;

transition: background-color 0.2s ease-in-out;

}

#mincart-button:hover {

background-color: #5a5a5a;

}

Step 4: Now, it's time to customize. You're able to change the width of the pop-up. For example, changing the width to 400 will make it larger, while changing it to 700 will make it significantly larger.

Step 5: You're also able to change the color and padding of the pop-up. For the title part, make the necessary changes.

Step 6: If you decide you don't want a certain color, simply change it.

Step 7: If you want to change the pixel size, make the changes in this section. Feel free to experiment and try different things.

Step 8: Once you're satisfied with your changes, hit save.

Step 9: To see your changes, go to your store and click on add to cart.

Step 10: Here, you'll receive a quantity warning.

Step 11: Click on the warning. You'll see how the pop-up has changed.

Follow these steps exactly to achieve the desired result. If you need further assistance, don't hesitate to reach out. We're always here to help.

Updated on: 02/07/2025