Change the width and corner radius of the shopify forms App

Technical Q&A
,

Topic summary

A user wants to customize a Shopify Forms app pop-up by:

Desired changes:

  • Adjust width to display horizontally on desktop and vertically on mobile
  • Remove corner radius to make the pop-up completely square instead of rounded

Proposed solution:
Add custom CSS code to the theme’s base.css or theme.css file that:

  • Sets the pop-up to flex-direction: row with 600px width for desktop
  • Applies border-radius: 0px to create square corners
  • Uses a media query to switch to flex-direction: column with 90% width on mobile devices (max-width: 768px)

Status: Solution provided, awaiting user confirmation on whether the CSS approach resolves the customization needs.

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

Hi! As the title says, I am using a pop-up form from Shopify forms app and I want to do two things mainly: change the width of the pop-up so that it’s horizontal on laptop and vertical on mobile; change the corner radius, so that it’s completely square, not round.

The website URL is salisclub.com

image
image1920×1072 66.6 KB

2

Hey @beatrizferreira

Thanks for posting this to the Shopify Community

You can customize the Shopify Forms pop-up layout and corner radius using custom CSS added to your theme file.

Try adding the following code in your Online Store → Themes → Edit Code → Assets → base.css (or theme.css) file at the bottom:

/* Make popup horizontal on desktop and vertical on mobile */
.shopify-form-popup {
  display: flex;
  flex-direction: row;
  width: 600px !important;
  border-radius: 0px !important; /* Square corners */
}

@media (max-width: 768px) {
  .shopify-form-popup {
    flex-direction: column;
    width: 90% !important;
  }
}

This will make your popup form horizontal on laptops, vertical on mobile, and ensure square corners instead of rounded ones.

Waiting to hear back from you.
If this was helpful, don’t forget to like it and mark it as a solution.

Thanks

3

Hi @ThemeGoal,

Thank you for the help. Unfortunately it didn’t change anything, in terms of width AND border radius.

4

If the CSS didn’t work, it’s likely because the Shopify Forms app uses an iframe, which means your theme’s CSS can’t directly override its styles.

To fix this, you’ll need to use Custom CSS inside the Shopify Forms app editor itself:

  1. Go to Marketing → Forms → select your pop-up form.

  2. Under Design → Custom CSS, paste the code below:

/* Make popup horizontal on desktop and vertical on mobile */
.shopify-form-popup {
  display: flex !important;
  flex-direction: row !important;
  width: 600px !important;
  border-radius: 0px !important;
}

@media (max-width: 768px) {
  .shopify-form-popup {
    flex-direction: column !important;
    width: 90% !important;
  }
}

If your form doesn’t have a “Custom CSS” section, you can target the pop-up using iframe CSS injection or create a custom pop-up block directly in your theme for more control.

5

That doesn’t exist, at least not for me

9

Hey @beatrizferreira :waving_hand:
I had the same issue with the Shopify Forms pop-up recently, by default, it uses rounded corners and a fixed width that doesn’t look great across all devices.

Here’s what worked for me:

:one: Go to Online Store → Themes → Edit code
:two: Open your base.css (or theme.css) file and add this at the very bottom:

/* Make popup square corners */
.shopify-form-popup__container {
  border-radius: 0 !important;
}

/* Make popup wider on desktop and auto on mobile */
@media (min-width: 992px) {
  .shopify-form-popup__container {
    width: 800px !important;
    max-width: 90%;
  }
}

@media (max-width: 991px) {
  .shopify-form-popup__container {
    width: 90% !important;
  }
}

That should make the pop-up horizontal and wide on desktop, but stacked vertically on mobile, with completely square corners.

I had to do this for my own store’s discount pop-up, looks much cleaner now and fits the brand better.

Are you using it just for newsletter signups or also for first-order discount pop-ups?

10

Hi @brookscreatives! Thanks for help, however nothing has changed. This is supposed to be a newsletter sign up pop up

11

Hi beatrizferreira,

You can customize the Shopify Forms popup using a little CSS — this will let you control the width and corner radius on both desktop and mobile.

:puzzle_piece: Steps:

  1. Go to Online Store → Themes → Edit code

  2. Open your base.css (or theme.css) file

  3. Add this code at the very bottom:

/* Shopify Forms popup custom styles */
.shopify-form-popup {
  border-radius: 0 !important; /* Makes corners square */
}

/* Desktop: horizontal layout */
@media (min-width: 768px) {
  .shopify-form-popup {
    width: 800px !important;
    max-width: 90%;
  }
}

/* Mobile: vertical layout */
@media (max-width: 767px) {
  .shopify-form-popup {
    width: 95% !important;
    max-width: 400px;
  }
}

:white_check_mark: This will:

  • Make the popup square (no rounded corners)

  • Keep it wide and horizontal on desktop

  • Adjust it vertically for mobile devices

If your popup doesn’t respond, inspect it in Chrome → right-click → “Inspect Element” → and check the exact class name (it might differ slightly by theme). You can then replace .shopify-form-popup with that class.

Hope this helps!
If you ever need help customizing Shopify popups or themes, I provide professional and friendly services at affordable rates. :smiling_face_with_three_hearts:
– Hammad | Shopify Developer

12

Got it :+1: thanks for clarifying!

In that case, the issue might be that your theme is using a slightly different container class name for the Shopify Forms pop-up.

Try this updated version instead, it targets all popup containers more reliably:

/* Square corners */
[data-shopify-form-popup] .shopify-section {
  border-radius: 0 !important;
}

/* Adjust width for desktop and mobile */
@media (min-width: 992px) {
  [data-shopify-form-popup] .shopify-section {
    width: 800px !important;
    max-width: 90%;
  }
}

@media (max-width: 991px) {
  [data-shopify-form-popup] .shopify-section {
    width: 90% !important;
  }
}

Add it near the bottom of your base.css, then clear cache or check in incognito, you should see the corners go square and width adjust on reload.

I had something similar happen on my end when I was customizing my newsletter popup, Shopify sometimes wraps forms differently depending on the theme version.

And if you are still finding it difficult, you can send me your email so we can discuss more there and share ideas together. If that is okay by you.

13

Looks like you’ve resorted to using theme built-in newsletter form…

It is possible to change styles of forms created with Shopify Forms app, but it should be done in a special way because of the way form is added to your page.
Directly adding CSS rules would not work.

If you want to try it again, add it to your store again or add your Forms form to a draft theme and share a preview link to that theme.
I will be able to give you the working code.