> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://molsoft.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.**
### 


${youtube}[Pop Up Customization Guide](myTvMTSo7vE)




**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.


![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/d/3/4dd3899948d8e000/image_31jwbk.png)


**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.


![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/d/3/4dd3899948d8e000/image_xiweuv.png)


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



![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/d/3/4dd3899948d8e000/image_1q0oa8p.png)


**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**.



![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/d/3/4dd3899948d8e000/image_7071x.png)


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



![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/d/3/4dd3899948d8e000/image_15hs1ty.png)



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




![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/d/3/4dd3899948d8e000/image_2809bn.png)


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



![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/d/3/4dd3899948d8e000/image_11anp2h.png)

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.