Shopify Customization: Removing Unwanted Size Options from Product Cards (Dawn Theme & Beyond)

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. At Shopping Cart Mover, we specialize in helping merchants navigate these complexities, whether it's a full migration or fine-tuning your existing Shopify setup. If you're considering launching your own e-commerce venture or migrating an existing store, Shopify offers unparalleled flexibility and a robust ecosystem.

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. This meant customers could select a size directly from the collection page without clicking into the product itself. While this can be a useful "Quick Add" feature for some stores, it wasn't what CoralSea Swimwear wanted.

The initial thought was to simply disable the "Quick Add" feature, which they had already done. Yet, the size buttons persisted. This immediately signals that the source of these elements might be more deeply embedded than a simple theme setting.

Why Do Unwanted Elements Appear on Your Shopify Store?

When an element appears on your Shopify store that you can't easily remove through the theme customizer, it typically stems from one of three primary sources:

1. Theme Settings & Structure: Even if a prominent "Quick Add" option is off, other, less obvious settings might control variant display. Older theme versions might also behave differently.
2. Third-Party Apps: Many Shopify apps inject their own code (Liquid, CSS, JavaScript) into your theme to provide additional functionality. Variant swatches, upsell features, and custom product options are common examples. This was a strong lead in CoralSea Swimwear's case, with a "Globo app" being suspected.
3. Custom Code or Manual Edits: If you've previously hired a developer or made manual changes to your theme's Liquid files, these customizations could be responsible.

Step-by-Step Solutions to Remove or Hide Size Options

1. Check Your Theme Customizer Settings (No Code Required)

Always start with the simplest solution. Navigate to your Shopify Admin:

• Go to Online Store > Themes.
• Click Customize next to your live theme.
• In the theme editor, navigate to a Collection page (you might need to select it from the top dropdown, e.g., "Collections > Default collection").
• Look for sections related to "Product grid" or "Product cards."
• Within these settings, search for options like:
  • "Show product options"
  • "Show color swatches"
  • "Enable quick add" (even if you think it's off, double-check)

If you find a relevant setting, toggle it off and save your changes. This is the cleanest solution if available.

2. Inspect Your Theme Code for Variant Pickers (Basic Code Edit)

If theme settings don't work, the next step is to look at your theme's Liquid files. This requires a bit more caution. Always duplicate your theme before making any code changes!

• Go to Online Store > Themes.
• Click Actions > Edit code next to your live theme.
• In the "Snippets" folder, look for files like card-product.liquid or product-card.liquid. These files control how individual product cards are rendered on collection pages.
• Search for lines of code that render variant pickers, such as:

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

  or

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

• If you find such a line, you can comment it out by wrapping it in {% comment %} and {% endcomment %} tags:

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

• Save the file and check your collection page.

3. Identify and Manage Third-Party Apps (The "Globo" Clue)

This was the breakthrough in the forum thread. If the elements don't seem to be part of your theme's default structure, an app is a prime suspect. Many apps, especially those offering custom product options or variant swatches, inject these elements.

• Check App Settings: Go to your Shopify Admin > Apps. Open each app that might be related to product options, variants, or quick add functionality. Look for settings to disable variant display on collection pages or product cards. The "Globo app" was specifically mentioned in the forum, indicating a variant swatch app.
• Use Browser Developer Tools: This is a powerful technique. Right-click on the unwanted size buttons on your live store and select "Inspect" (or "Inspect Element"). This will open your browser's developer console. Look at the HTML structure and the CSS classes associated with the buttons. For CoralSea Swimwear, the class .swatches-globo--list was identified, strongly linking it to a "Globo" app. This step helps confirm the app's involvement and provides the CSS selector needed for the next solution.

4. Use Custom CSS to Hide the Elements (Targeted Hiding)

If you've identified the CSS class (like .swatches-globo--list) and can't disable it via app settings or theme code, custom CSS is an effective way to hide it. This doesn't remove the code, but it makes the element invisible to your customers.

• Go to Online Store > Themes > Customize.
• At the bottom left, click Theme settings (the gear icon).
• Select Custom CSS.
• Add the following code (adjusting the selector if yours is different):

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

• Save your changes. The !important tag ensures your rule overrides any other conflicting styles.

This solution proved successful for CoralSea Swimwear and is often the quickest fix for app-injected elements.

5. Consider Updating Your Theme Version

As noted by @Maximus3 in the thread, newer versions of themes like Dawn often have improved controls or simply don't display certain options by default. If you're using an older theme version and encountering persistent issues, updating to the latest version (after testing on a duplicate theme) can resolve many customization headaches and improve performance and security.

Best Practices for a Clean Shopify Storefront

Maintaining a clean and optimized Shopify store goes beyond just migrations. Here are a few tips:

• Regularly Review Apps: Uninstall any apps you no longer use. They can leave behind code snippets that clutter your theme and potentially slow down your store.
• Backup Your Theme: Always duplicate your theme before making any code edits or installing major apps. This provides a quick rollback option if something goes wrong.
• Test Thoroughly: After any changes, clear your browser cache and test your store on different devices and browsers to ensure everything looks and functions as expected.
• Seek Expert Help: If you're unsure about making code changes or dealing with complex app integrations, don't hesitate to consult Shopify experts.

At Shopping Cart Mover, we understand the intricacies of Shopify customization and development. Whether you're fine-tuning your current store or planning a seamless migration to Shopify, our team is equipped to handle the technical details, ensuring your e-commerce platform perfectly aligns with your business goals.