How to make quick add pop up curved

Store Design
, , ,

Topic summary

A user seeks help rounding the corners of a quick-add popup modal on their Shopify store.

Solutions Provided:

Two working CSS approaches were offered:

  1. Custom CSS via Theme Settings:

    • Navigate to Customize > Theme settings > Custom CSS
    • Add: .quick-add-modal__content { border-radius: var(--variant-pills-radius) !important; }

  2. Direct Code Edit:

    • Access Online Store > Themes > Edit code
    • Locate base.css file
    • Insert: .quick-add-modal .quick-add-modal__content.global-settings-popup { border-radius: 20px; }

Resolution:
The user confirmed the solutions worked successfully. One responder requested a public URL for better troubleshooting context, though solutions were provided without it.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

I want to make the corners curved on this pop up but not sure how

harshi1_0-1751566472507.png
harshi1_0-1751566472507.png2634×1662 488 KB

2

@harshi1 Others aren’t mind readers, provide inspectable public urls

https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/2254458

3

Hi @harshi1 ,

Please go to Customize > Theme settings > Custom CSS and add code:

.quick-add-modal__content {
        border-radius: var(--variant-pills-radius) !important;
}
1 Like
4

Hello @harshi1

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search base.css

  • Insert the provided CSS code at the end of the file and save the changes.

.quick-add-modal .quick-add-modal__content.global-settings-popup
{
    border-radius: 20px;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.

5

thank you so much this work as well

1 Like
6

Hi @harshi1 ,

It’s my pleasure

1 Like