Wrapping Shopify Forms section in custom CSS?

[VincentDN]

Hey Shopify-community,

I am currently working on a bespoke series of landing pages which highlight various projects associated with my store. WIP page link added here:

Connect with the Kaiser Cat Collective (2026)

I have most of the page figured out, but I am struggling to get a nice container set up around a Shopify Forms section - embedded via an Apps block

Right now, I am using a plugin for these but that’s a paid plugin that I want to depreciate. Is there a way to get a similar section styling wrapped around a normal Apps block?

Any help would be greatly appreciated!

Regards,
Vincent

[Moeed]

Hey @VincentDN

Honestly, paying a monthly fee just for a popup functionality feels like overkill for most stores. It’s one of those features that shouldn’t require an ongoing subscription.

Many themes actually include built-in popup options, it’s worth double-checking your theme’s settings under Theme Customize > Sections or looking through the theme documentation, as it might already be there.

If your theme doesn’t support it, I’d suggest investing in a one-time custom solution rather than committing to an app fee. A Shopify developer can build you a clean, functional popup to your exact needs, no monthly costs, no app bloat slowing down your store, and you own the code completely.

If you’d like, I’d be happy to help build one for you, just let me know and we can discuss what you’re looking for. In the long run, a custom solution is more cost-effective and gives you full control over how it looks and behaves.

Cheers,
Moeed

[VincentDN]

Thanks Moeed, but going straight for the cold open sell on your services is not exactly the support I am looking for . I have a developer on-staff that I can tap in if I need it, but I prefer doing minor stuff myself so he can focus on the big projects and backend work

[Moeed]

Hey @VincentDN

Not sure if this code would work but worth giving it a try.

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
@media screen and (min-width: 768px) {
div#AT2JqU2ljSXd3SVpGe__forms_inline_GHJEpr {
    text-align: -webkit-center !important;
}
div#AT2JqU2ljSXd3SVpGe__forms_inline_GHJEpr shopify-forms-embed#app-embed {
    background: white !important;
    width: 50% !important;
    padding: 10px !important;
    border-radius: 20px !important;
}
}
</style>

RESULT:

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[Small_Task_Help]

Hi,

Hope this will help

Wrap the app block inside a custom section container

Create or edit a regular section → Add Shopify Forms app block inside that section → Add your container styles to the section itself

Example:

<section class="form-wrapper">
  {% for block in section.blocks %}
    {% if block.type == '@app' %}
      {% render block %}
    {% endif %}
  {% endfor %}
</section>

Then in CSS

.form-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem;
  background: #111;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}

[TheScriptFlow_1]

Hey @VincentDN,

In order to achieve the same layout as you share the screenshot, then you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> theme.css

In the end of theme.css file paste the following code that shared below.

@media only screen and (min-width: 767px) {
._inline_1q1d2_47 {
    background: white !important;
    border-radius: 8px !important;
    padding: 35px 0px !important;
    width: 50% !important;
    margin: 0 auto !important;
}
}
@media only screen and (max-width: 767px) {
   ._inline_1q1d2_47 { 
      width: 100% !important;
    }
._gridItem_1q1d2_172._gridItemContent_1q1d2_257 {
   padding: 15px !important;
 }
}

Results:

[VincentDN]

Oh wow, was not expecting three different ways to achieve this, thank you guys! All of these solutions work correctly as far as I can see, so I will mark them all as working

One final question - is there a way to hide the theme footer and header at the page level? Right now I can’t seem to correctly set the flag to hide header and footer elements on this page. Here is the code I inserted into the theme.liquid

I wonder if it’s an issue with name formatting. Do I use the syntax ‘TemplateName’ or do I need to write out the full ‘filename’ as in Page.TemplateName.json

Full code:

   {% if template.name == 'connect-2026-default.json' or template.name == 'connect-2026-americankingdoms' or template.name == 'connect-2026-thedividedstates' %}

      

    <style>

    /* VINCENT ADDITION: Hide header and footer on Landing-style pages */

    /* Hide the header group */

    .header-group {

    display: none !important;

    }




    /* Hide the footer group */

   .footer-group {

    display: none !important;

    }




    /* Hide the announcement bar */

    .announcement-bar {

    display: none !important;

  }

[VincentDN]

Quick update re: the forms styling - I forgot to check mobile, and it does break there. Probably because the white rectangle goes out of bounds and does not render? Any help would be greatly appreciated!

[Moeed]

Hey @VincentDN

To hide the Header and Footer only for this page add the following code.

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

{% if page.handle == "connect-2026" %}
<style>
header, footer {
    display: none !important;
}
</style>
{% endif %}

RESULT:

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[VincentDN]

Hey Moeed,

Thanks so much, this works swimmingly! The only issue remaining is that the container for the Shopify Forms block breaks on mobile, reverting back to no container

[Moeed]

Okay let’s do this, Remove all the code you have added and just add this final code with the same steps I mentioned above and you’re good to go.

{% if page.handle == "connect-2026" %}
<style>
header, footer {
    display: none !important;
}
div#AT2JqU2ljSXd3SVpGe__forms_inline_GHJEpr {
    text-align: -webkit-center !important;
}
div#AT2JqU2ljSXd3SVpGe__forms_inline_GHJEpr shopify-forms-embed#app-embed {
    background: white !important;
    width: 50% !important;
    padding: 10px !important;
    border-radius: 20px !important;
}
@media screen and (min-width: 768px) {
div#AT2JqU2ljSXd3SVpGe__forms_inline_GHJEpr shopify-forms-embed#app-embed {
    width: 50% !important;
}
}
</style>
{% endif %}

Cheers,
Moeed

[VincentDN]

@Moeed

{% if page.handle == "connect-2026" %}
<style>
header, footer {
    display: none !important;
}
div#AT2JqU2ljSXd3SVpGe__forms_inline_GHJEpr {
    text-align: -webkit-center !important;
}
div#AT2JqU2ljSXd3SVpGe__forms_inline_GHJEpr shopify-forms-embed#app-embed {
    background: white !important;
    width: 50% !important;
    padding: 10px !important;
    border-radius: 20px !important;
}
@media screen and (min-width: 768px) {
div#AT2JqU2ljSXd3SVpGe__forms_inline_GHJEpr shopify-forms-embed#app-embed {
    width: 50% !important;
}
}
</style>
{% endif %}

I think we’ve got it! I did comment out your first 50% line there - I think you accidentally inserted a 50% scaler on desktop as well.

To wrap this up, I am trying to set a fullcover background for these pages, but it’s not rendering for some reason.

(I added page.handle == "connect-with-the-kaiser-cat-collective-2026-unstable", it’s just a more edited branch of the connect-2026 page)

<!-- Set Background Image for /connect landing style pages - DEFAULT -->

{% if page.handle == "connect-2026" or page.handle == "connect-with-the-kaiser-cat-collective-2026-unstable" %}

    <style>

    body {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-image: url('https://cdn.shopify.com/s/files/1/0085/2128/5737/files/KCC_Pass_The_Ammunition_Desktop_Background_-_WEBRES_b4a1b39c-d8f0-4e63-a77d-78be111bdd84.jpg?v=1764070816');

    background-color: #752121;

    }


    </style>

{% endif %}

<!-- Set Background Image for /connect landing style pages - DEFAULT -->