Fixing Your Shopify Pitch Theme's Quick Add Variant Pop-up Layout

Hey everyone! As a Shopify expert who spends a lot of time diving into the community forums, I often come across those little design quirks that can really frustrate store owners. You know, the ones that seem small but make a big difference to your customer experience. Recently, I saw a really helpful discussion pop up regarding a layout issue with the "Quick Add" variant picker in the popular Pitch theme, and I knew it was something worth sharing with all of you.

It’s a classic example of how a simple CSS tweak, shared by a helpful community member, can solve a seemingly complex problem and smooth out your site’s user interface. Let's dive into what happened and how you can apply this fix if you're using the Pitch theme.

The "Quick Add" Pop-up Predicament

The original post, from a store owner named tallowbar, described a common problem: when customers clicked the "Quick Add" button on a product card, the variant picker pop-up appeared, but its content wasn't quite right. Instead of filling the modal box nicely, it was left-aligned and felt a bit squished. It just didn't look polished or professional.

Here's a look at what tallowbar was seeing initially:

As you can see, that's not ideal. It leaves a lot of empty space and doesn't make for a smooth shopping experience. The first step, as always in these situations, was for a Shopify developer to ask for the store URL to inspect the live site, which tallowbar promptly provided.

The First Attempt: Good, But Not Perfect

A community member named Maximus3 quickly jumped in with a CSS snippet to try and fix the padding and alignment. This is where the beauty of community support really shines! Maximus3 suggested adding this custom CSS:

.quick-add-modal__content {
  padding: 20px 50px !important;
}

After applying this, tallowbar reported back that it had definitely improved the look. The content was better aligned, but a new issue popped up: an unnecessary scrollbar appeared on the right side of the pop-up. This is a common side effect when playing with fixed heights or paddings without considering how the content will fit.

Here's what that looked like:

Nobody wants a scrollbar on a small pop-up if it's not absolutely necessary, right? It makes the modal feel cramped and less user-friendly.

The Winning Solution: A Refined CSS Snippet

Not to be deterred, Maximus3 came back with an even better, more comprehensive solution that addressed both the layout and the scrollbar issue. This is the code that finally made tallowbar exclaim, "thank you so much it worked!"

Here's the CSS you'll want to use:

.quick-add-modal__content {
  padding: 50px !important;
  height: fit-content !important;
}
.quick-add-modal__content .product-details .group-block {
  padding-top: 0px;
  width: 100%;
}

Let's break down what this code does:

• .quick-add-modal__content: This targets the main container of the pop-up content.
• padding: 50px !important;: This sets an even 50px padding all around the content inside the modal. The !important tag ensures this rule overrides any conflicting styles from the theme.
• height: fit-content !important;: This is the magic touch for the scrollbar! It tells the content container to only be as tall as its content requires, effectively removing the unnecessary scrollbar that appeared with the previous attempt.
• .quick-add-modal__content .product-details .group-block: This targets a specific inner block within the quick add modal, likely containing the product details or variant options.
• padding-top: 0px;: Removes any top padding on this inner block, helping to optimize vertical space.
• width: 100%;: Ensures this inner block spans the full width available within its parent container, making the content truly fill the pop-up horizontally.

And here’s the satisfying result, a perfectly aligned and sized quick add pop-up:

How to Implement This Custom CSS in Your Shopify Pitch Theme

Ready to apply this fix to your own store? Here's how you can add this custom CSS:

1. Log in to your Shopify admin.
2. Navigate to Online Store > Themes.
3. Find your Pitch theme (it should be your current published theme). Click on Actions > Edit code.
4. In the left-hand sidebar, look for a file named theme.scss.liquid or base.css, or similar CSS file under the "Assets" folder. If your theme has a dedicated "Custom CSS" section in the theme editor, that's an even easier place to put it.
5. Alternatively, and often safer: Go back to Online Store > Themes, click Customize on your Pitch theme.
6. In the theme editor, click on Theme settings (the gear icon usually in the bottom left).
7. Scroll down until you find a section titled "Custom CSS" or "Advanced CSS". This is the ideal place to paste custom code as it isolates it from theme updates and makes it easy to manage.
8. Paste the following code into the Custom CSS box:

   .quick-add-modal__content {
     padding: 50px !important;
     height: fit-content !important;
   }
   .quick-add-modal__content .product-details .group-block {
     padding-top: 0px;
     width: 100%;
   }
   

9. Click Save in the top right corner.
10. Clear your browser cache (Ctrl+F5 or Cmd+R) and check your live store to see the changes! Test the "Quick Add" button on a product card to ensure the variant pop-up now looks perfect.

It's always a good idea to test these changes in a duplicate theme first, just in case something unexpected happens, although custom CSS in the dedicated section is usually quite safe.

This whole interaction really highlights the power of the Shopify community. What started as a small visual glitch became a quick, effective solution thanks to someone willing to share their expertise. These little refinements are what make a big difference in how professional and user-friendly your Shopify store feels to your customers. Keep an eye out for these kinds of simple CSS fixes – they're often the key to polishing up your theme without needing a full-blown developer.