Shopify Royce Theme: Fix Mismatched Buttons & Empty Cart Drawer Issues

Hey there, fellow store owners! Navigating theme customizations on Shopify can sometimes feel like a treasure hunt, especially when you run into those head-scratching issues that just don't seem to have an obvious fix. Recently, a really insightful discussion popped up in the Shopify Community about the Royce premium theme, tackling a couple of common but tricky product page problems: mismatched Add to Cart and Buy Now button widths, and the infamous 'empty cart drawer' bug. If you're using Royce, or even another theme, chances are you've bumped into something similar.

It's a classic scenario: you've got your product page looking great, but then you notice these little glitches that can really impact your customer's experience. Let's dive into what the community experts had to say and how we can get these issues sorted, drawing from some fantastic advice shared by folks like One-Sun1995, waisal.riyan, Hardeep, and DanielBrooks8807.

The Case of the Mismatched Buttons

First up, let's talk about those buttons. Our original poster, siva_fds, pointed out that their "Add to Cart" CTA wasn't matching the "Buy Now" button's width. This is super common, and here's why:

The Add to Cart button is typically rendered by your theme's code.
The Buy Now button (also known as a dynamic checkout button) is a Shopify-rendered element, often placed within its own wrapper with its own default styling.

Because these are handled by different parts of the system, they often end up looking a bit different unless you explicitly tell them to match. The good news is, this is usually a straightforward CSS fix!

How to Harmonize Your Product Buttons

To get both buttons looking uniform, you'll want to apply some custom CSS. DanielBrooks8807 and One-Sun1995 offered similar, effective solutions. Here's what you can do:

Duplicate Your Theme: Always, always start by duplicating your live theme. This gives you a safe sandbox to test changes without affecting your live store.
Access Custom CSS: In your Shopify admin, go to Online Store > Themes. Find your duplicate theme, click Customize. Then, look for Theme settings > Custom CSS (or a similar option, depending on your theme version).
Add the CSS Code: Paste the following CSS snippet into the custom CSS area. This code targets both the theme's submit button and Shopify's dynamic checkout button wrapper, ensuring they both take up the full available width.
```
.product-form__buttons,
.shopify-payment-button {
  width: 100%;
  max-width: 100%;
}
.product-form__submit,
.shopify-payment-button__button {
  width: 100%;
}
```
Pro Tip: If this doesn't quite work, use your browser's 'Inspect' tool (right-click on the button > Inspect Element) to find the exact class names your Royce theme uses for its 'Add to Cart' button and its parent container. You might need to adjust .product-form__submit or .product-form__buttons if your theme uses slightly different selectors.
Test Thoroughly: Check your product pages on both desktop and mobile devices. Sometimes a fixed width that looks great on desktop can throw things off on smaller screens.

The Elusive Empty Cart Drawer

Now, onto the trickier problem: the cart drawer that opens but is mysteriously empty after adding a product. Siva_fds's video clearly showed the drawer opening, then only displaying a '1' (or just being blank) instead of the actual product. This is incredibly frustrating for customers and can definitely hurt conversions. The community discussion highlighted that this isn't just one problem, but often a symptom of several underlying issues.

Diagnosing the Empty Cart Drawer

Before jumping into code, it's crucial to diagnose the root cause. Here's a step-by-step approach recommended by DanielBrooks8807 and One-Sun1995:

Verify the Product is Actually Added: After clicking "Add to Cart," immediately open a new tab and go directly to your store's /cart page.

If the item IS on the /cart page: Great! Shopify successfully added the product. This means the problem isn't with adding the item, but with how your cart drawer refreshes or renders its content. This is where app conflicts or theme JavaScript issues often come into play.
If the item is NOT on the /cart page: This indicates a deeper problem with the add-to-cart functionality itself. Try adding a simple product without any custom options or app-related fields. If it still fails, you might have a core theme JavaScript issue or a very aggressive app conflict.

Check for JavaScript Errors: While on your product page, open your browser's Developer Tools (usually F12 or right-click > Inspect, then go to the 'Console' tab). Add a product again and watch for any red error messages in the console. A single JavaScript error can halt subsequent scripts, preventing the drawer from updating.
App Conflict Investigation: Many times, an app (especially those dealing with bundles, subscriptions, or upsells) can inject its own add-to-cart logic or interfere with the theme's cart update.

On your duplicate theme, try disabling app blocks one by one (or even entire apps if you can) and retesting after each disable. This can help pinpoint the culprit.

Common Fixes & Workarounds for the Empty Drawer

Based on the community's insights, here are a couple of powerful solutions, especially if you've diagnosed an app conflict or a theme-level JavaScript rendering issue:

1. The Foxkit App Conflict Workaround (Specific Solution)

Waisal.riyan identified a specific conflict with the Foxkit app. It seems Foxkit targets [data-cart-count] attributes, which the Royce theme also uses on its cart drawer wrapper. When Foxkit updates the cart count, it inadvertently replaces the entire drawer content with just the count. If you're using Foxkit and seeing this issue, this is likely your fix:

Access theme.liquid: In your duplicate theme, go to Online Store > Themes > Actions > Edit code. Open the layout/theme.liquid file.
Add the Script: Immediately before the closing tag, paste the following JavaScript code:
Test: Thoroughly test adding and removing items, checking the cart count, subtotal, and any free shipping bars to ensure everything updates correctly.

2. General Cart Drawer Recovery Script (Advanced Workaround)

Hardeep provided a more general JavaScript workaround for when the cart drawer content gets replaced with just the quantity number. This script actively observes the cart drawer and attempts to re-fetch and inject the correct HTML if it detects the drawer is showing only a number. This is a robust solution if the Foxkit fix isn't applicable or if you have another, unidentified script causing similar issues.

Access theme.liquid: Again, in your duplicate theme, navigate to Online Store > Themes > Actions > Edit code and open layout/theme.liquid.

Add the Script: You can place this script before the closing tag, or ideally, in a new snippet file (e.g., snippets/cart-drawer-recovery.liquid) and then include it in theme.liquid for better organization.

(() => {
  if (window.cartDrawerRecoveryInitialized) return;
  window.cartDrawerRecoveryInitialized = true;

  let recovering = false;
  let lastAttempt = 0;

  async function recoverCartDrawer() {
    const body = document.querySelector(
      '#cart-drawer-body-content'
    );

    if (!body || recovering) return;

    if (!/^\s*\d+\s*$/.test(body.textContent || '')) {
      return;
    }

    if (Date.now() - lastAttempt < 1500) return;

    recovering = true;
    lastAttempt = Date.now();

    try {
      const resp fetch(
        window.location.pathname + '?secti
        {
          credentials: 'same-origin',
          headers: { Accept: 'text/html' }
        }
      );

      if (!response.ok) {
        throw new Error(`Request failed: ${response.status}`);
      }

      const html = await response.text();
      const parsed = new DOMParser().parseFromString(
        html,
        'text/html'
      );

      const freshBody = parsed.querySelector(
        '#cart-drawer-body-content'
      );

      if (
        !freshBody ||
        !freshBody.querySelector('.cart-content-items') ||
        !freshBody.querySelector('cart-item')
      ) {
        throw new Error('Cart item markup not found.');
      }

      const currentBody = document.querySelector(
        '#cart-drawer-body-content'
      );

      if (
        currentBody &&
        /^\s*\d+\s*$/.test(currentBody.textContent || '')
      ) {
        currentBody.innerHTML = freshBody.innerHTML;
      }
    } catch (error) {
      console.error('Cart drawer recovery failed:', error);
    } finally {
      recovering = false;
    }
  }

  const drawer = document.querySelector('#cart-drawer');

  if (drawer) {
    const observer = new MutationObserver(recoverCartDrawer);

    observer.observe(drawer, {
      childList: true,
      subtree: true,
      characterData: true
    });

    window.cartDrawerRecoveryObserver = observer;
  }
})();

Test: As always, test adding and removing products extensively to ensure the drawer now reliably shows its full content.

It's fascinating how a single problem can have multiple layers, isn't it? The key takeaway from this community discussion is the importance of systematic troubleshooting. Always start with diagnostics, isolate the issue (is it adding, or is it rendering?), and then apply the most targeted solution. And remember, if you're using a premium theme like Royce and a fresh, unedited copy still has these issues, don't hesitate to reach out to the theme developer – that's what they're there for!

Getting these little details right can make a huge difference in your customer's journey. So, take a deep breath, follow these steps, and you'll have your Royce theme product pages running smoothly in no time. If you're just starting your e-commerce journey or looking to switch platforms, remember that a solid foundation is key, and Shopify offers a robust platform to build and grow your business, even with the occasional customization challenge.

Your Royce Theme Product Page: Aligning Buttons and Fixing the Empty Cart Drawer