Quick Add button is clipped and unresponsive for products with partially out-of-stock variants

[Wii]

Hello, I would like to report a reproducible bug affecting Shopify’s free official themes.

On a collection page, when Quick add is enabled and a product has multiple variants—with at least one variant out of stock and another still available—the Add button is partially cut off along the right edge of the product image. In some cases, the button also does not respond correctly or open the variant selector.

The issue is especially noticeable when the Out of stock collection filter is applied, but it can also occur without using the filter.

I reproduced the issue:

• On my active Horizon theme
• On a fresh, unmodified copy of the Dwell theme
• With Quick add enabled
• On several products with partially out-of-stock variants

Disabling Quick add removes the issue, but it also removes the feature from all products.

Example product: Arabesque – Baies Oranges (Grandes)

Steps to reproduce:

1. Enable Quick add in the theme settings.
2. Open a collection page.
3. Apply the Out of stock availability filter.
4. Find a product with multiple variants, where some variants are out of stock and at least one remains available.
5. The Add button appears cut off and may not open the variant selector correctly.

Could you please investigate this issue and forward it to the Shopify themes development team?

[Maximus3]

I have tried with multiple products with some in and some out of stock options. Did exactly as you told, on both Horizon and Dwell. Unable to see any problems. Both on desktop and on mobile. Maybe you have an app conflict because I cannot replicate your issue.

When you post an issue, make sure you include the website link and screenshots. More often than not, it is usually something other than a problem with the theme.

[Ellie-BOGOS]

Hey @Wii

The fact that you reproduced this on a fresh, unmodified Dwell install is actually the strongest evidence you have - it rules out app conflicts and custom code. So you’re on the right track.

One thing that might help you get this fixed faster: the Shopify Community forum here isn’t where the themes dev team picks up bug reports.

You’ll want to repost this on the Shopify Developer Community Forums under “Online Store and Theme Development.” That’s where Horizon/Dwell bugs like the oversized caret icon in Quick Add modals and the variant slug URL issue were reported and actually got patched.

Please include your store URL, a screen recording, and the browser/OS - their team tends to move on well-documented reports.

Online Store and Theme Development

Hope it helps!
Ellie from BOGOS: Free Gift Bundle Upsell team

[Moeed]

Hey @Wii

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[FoysalAhmed]

To get the best support, share your store link or record issues using Loom.com and share here. I will try to provide you a video guideline to profer solution

[Steve_TopNewYork]

Hey @Wii ,

Thanks for providing such detailed reproduction steps.

Before concluding that this is a theme level issue, would you be able to share your store URL (or a theme preview link if you prefer) along with the Horizon and Dwell theme versions you tested? That would allow others in the community to try reproducing the behavior under the same conditions.

Since you’ve mentioned that the issue also occurs on a fresh, unmodified copy of an official Shopify theme and disappears when Quick add is disabled, it does sound like it could be related to the shared Quick Add functionality rather than store specific customizations. Verifying it on a live example would help confirm that and provide stronger evidence if it needs to be escalated to the Shopify Themes development team.

Thank You !

[ai-theme-code-editor]

HI @Wii

I really appreciate that you shared clear reproduction steps and confirmed the issue on both your live store and a fresh copy of the Dwell theme. Since you’ve been able to reproduce it on an unmodified Shopify theme, it does sound like this may be a theme-related bug rather than something specific to your store.

I’d recommend also submitting this to Shopify Support with your reproduction steps, the affected theme versions, and any screenshots or screen recordings. That gives the Themes team the information they need to reproduce the issue and determine whether a fix is required in a future theme update. In the meantime, disabling Quick add is a reasonable temporary workaround, although I understand it isn’t ideal if you want to keep that funcionality available.

[Ploqo]

Confirmed, this is a Horizon/Dwell bug,

I reproduced it on a clean Horizon store.

• That “Add” button renders with no icon (the variant is unavailable), so it collapses to a ~4px sliver clipped at the right edge of the image.
• It also carries the disabled attribute, so it does not respond to clicks.
• The “Choose options” button is hidden, so it never opens the variant picker.

Fix. Online Store > Themes > Edit code > snippets/quick-add.liquid. Change the button logic so any multi-variant product always uses “Choose options”:

assign quick_add_button = 'choose'
if product.variants_count == 1
  assign quick_add_button = 'add'
endif

Single-variant products still get the compact Add button.

[Maximus3]

Fascinating…

Still cannot reproduce anything yall are talking about.

This is hover on product card:

This is hover on icon:

This is click Choose:

This is choosing an in-stock option:

And this is the code block in quick-add.liquid (unmodified):

I’m curious how you got your issue. Because I cannot do it lol. It’s perfectly fine for me.

[Ploqo]

That second condition in the or. Get a product with only one option and select it (by applying the availability filter out of stock) in the collection

[Maximus3]

Nope. I even tried it with latest updated theme, still doesn’t have any problem. I even made a new product that has only 1 option like you said.

I even gave it 0 inventory:

Nothing shows any issues whatsoever. In stock, out of stock filters. No issues. I even updated to the newest version. No issues.

For the newest version, this is the code block:

[Priyasha]

Hey,

To help narrow this down, it’s worth checking whether it’s the theme itself or one of your apps causing it. The quickest way : duplicate your theme, then preview that copy in an incognito window. If the button still gets clipped there, it points to the theme. If it looks fine, an app is likely injecting styles or scripts onto the collection page.

Since another person couldn’t reproduce it on a clean Dwell theme, an app conflict is a strong possibility. Adding your store’s URL and a screenshot of the clipped button would make it much easier for others (and Shopify’s team) to confirm what’s happening.

If it does turn out to be the theme on a specific screen size, it’s usually a small CSS overflow issue on the product card that can be patched. Hope this helps!

[Wii]

As you can see, in the first picture, which is in a new Dwell theme, the second product and the third have variants, and the button is showing truncated. The same is happening for the third product in the second picture.

[Maximus3]

Can you turn quick add back on?

[Wii]

I’ve create an issue in the Shopify Developer Community Forum, hopefully they will find the issue.

[Wii]

Already tried many times and it’s still the same bug.

[SealSubs-Roan]

Hi there @Wii
This seems like an actual theme level issue seeing as you replicated it on both Horizon and a stock Dwell install. The fact that disabling Quick add fixes the issue is an interesting clue. I’d note the affected product, browser, viewport size, the theme versions, and a short video of the behavior. As a temporary workaround you can disable Quick add/enable the collection card settings whilst testing. Also run a comparison when the Out of stock filter is ON and OFF to see if you can identify the offender.