Taming Unwanted Size Options: A Shopify Collection Page Fix

Hey there, fellow store owners! Ever found yourself scratching your head, wondering why certain elements are showing up on your Shopify store that you just don't want? It's a surprisingly common scenario, and it recently popped up in the community forums with a store owner, @coralseasw from CoralSea Swimwear, trying to figure out how to remove those pesky size options (S/M/L buttons) from their collection pages.

It sounds simple on the surface, right? Just a click of a button to hide something. But as the thread unfolded, it became a fantastic case study on how different factors — your theme, your apps, and even custom code — can all play a role in what appears on your storefront. Let's dive into what we learned and how you can tackle similar issues.

The Problem: Unwanted Size Variants on Product Cards

CoralSea Swimwear, using the popular Dawn theme, noticed that their collection pages were displaying S/M/L size buttons right on the product cards, like this:

They'd already checked the obvious — the "Quick Add" feature was turned off. This is a common first step, as many themes have built-in options for quick variant selection. Here's what that setting typically looks like:

So, if it's not the quick add, what else could it be? This is where the community really shined, offering several troubleshooting paths.

Solutions from the Community: A Step-by-Step Approach

1. Check Your Theme Settings (Again!)

@rshrivastava63 initially suggested checking the theme customizer for broader settings. Even if "Quick Add" is off, other options might be at play.

• Go to Online Store → Themes → Customize.
• Navigate to your Collection template.
• Look for settings like "Show product options" or "Show color swatches." If you find "Show product options," try turning it off.

It's worth noting, as @Maximus3 pointed out, that newer versions of the Dawn theme generally don't display size or color options on the product card by default. So, if you're on an older theme version, a simple theme update might resolve this automatically without any custom code. Always a good idea to keep your theme updated!

2. Investigate Third-Party Apps

This was the ultimate culprit for CoralSea Swimwear! @Dan-From-Ryviu, after looking at the store, quickly identified the element as coming from a third-party application, specifically the "Globo app."

Many apps that enhance product variants, swatches, or quick view features will inject their own code into your theme. Sometimes, these features are enabled by default or in a way that overrides your theme's native settings. Your best bet here is:

1. Check the App's Dashboard: Log into the app's settings within your Shopify admin. Look for options to disable variant display on collection pages, product cards, or quick view modals. This is usually the cleanest solution.
2. Use Custom CSS as a Workaround: If the app doesn't offer a direct setting to disable it, you can often hide the element using custom CSS. Dan provided the exact snippet that worked for CoralSea Swimwear:

   .swatches-globo--list { display: none !important; }

   To add this CSS:

   1. Go to Online Store → Themes → Customize.
   2. Click the Theme settings (usually a gear icon or brush icon) in the bottom-left sidebar.
   3. Select Custom CSS (or a similar option like "Advanced CSS").
   4. Paste the code snippet into the field and Save.

   This CSS targets the specific class name (`.swatches-globo--list`) that the Globo app was using to display the swatches and simply tells your browser not to show it. The `!important` tag ensures it overrides other styles.

   3. Dive into Your Theme's Code (If No App is Identified)

   If you've ruled out apps and theme settings, the variant picker might be embedded directly in your theme's Liquid code, possibly from a past customization. @rshrivastava63 provided excellent guidance for this scenario:

   1. Go to Online Store → Themes.
   2. Click Actions → Edit code for your current theme.
   3. Navigate to the Snippets folder and look for `card-product.liquid`. This file often controls how individual product cards are displayed on collection pages.
   4. Search within `card-product.liquid` for lines that render product variant pickers. You might find something like:

      {% render 'card-product-variant-picker', product: card_product %}

      or

      {% render 'product-variant-picker', product: card_product %}

   5. To remove these, you can either delete the line or, more safely, comment it out. Commenting out code means the browser ignores it, but you can easily uncomment it later if needed. Use Liquid's comment tags like this:

      {% comment %}
      {% render 'card-product-variant-picker', product: card_product %}
      {% endcomment %}

   6. Save your changes.

   Always remember to duplicate your theme before making any code edits! This creates a backup you can revert to if something goes wrong.

   Wrapping It Up

   What started as a simple request from CoralSea Swimwear turned into a great lesson for all of us. When you encounter an unexpected element on your Shopify store, approach it systematically:

   • Start with Theme Customizer settings: Check all relevant options for collections and product cards.
   • Consider your theme version: An update might solve it.
   • Investigate your apps: They're often the source of injected features. Look for app settings or use targeted custom CSS.
   • Only then, dive into the code: If all else fails, a careful look at your theme's Liquid files might reveal the culprit.

   This structured approach will save you headaches and help you pinpoint exactly where those rogue elements are coming from. Happy customizing!