How to Remove Vendor Names from Product Listings in Shopify's Charge Theme

By Tony Ng.
December 14th, 2024

How to Remove Vendor Names from Product Listings in Shopify's Charge Theme

Understanding the Problem: Why Remove Vendor Names?

Shopify store owners often seek to remove vendor names from their product listings for various reasons. This tutorial will guide you on how to remove vendor names from the Charge theme collection pages, enhancing visual appeal and maintaining brand consistency without revealing third-party entities.

Reasons for Removal

Brand Identity: Maintaining a cohesive brand image by showcasing only your store’s name instead of those of multiple vendors.
Simplified Shopping Experience: Preventing customers from getting distracted by differing vendor names within a collection.
Privacy Concerns: Keeping your vendor list confidential can be crucial in certain niches to maintain a competitive edge.

Common Issues Related to Vendor Name Display

Outdated Theme Versions: Older themes might not support newer customization features.
Theme Default Settings: These might automatically enable vendor names on product previews.

Step-by-Step Guide to Removing Vendor Names in the Charge Theme

Removing vendor names from product collections might seem daunting, but with these simple steps, you can customize your store efficiently.

Step 1: Accessing Your Theme Code

Navigate to Your Admin Panel: Log in to your Shopify admin dashboard.
Go to Online Store: Click on 'Online Store' in the left menu.
Select Themes: Here, find the theme you want to edit, generally listed as the current theme.
Edit Code: Click 'Actions' next to the theme you wish to modify, and select 'Edit code'.

Step 2: Locating the Correct CSS File

Once you’re in the code editor:

Find Your CSS File: Look for ‘Assets’ in the directory and choose 'base.css', 'style.css', or 'theme.css' based on your theme’s structure.

Step 3: Modifying the CSS to Hide Vendor Names

Add the following code to the bottom of the chosen CSS file:

p.item-vendor {
    display: none;
}

This CSS snippet will ensure that any HTML elements with the class item-vendor are not displayed on collection pages.

Step 4: Saving and Previewing Changes

Save Your Edits: Click 'Save' in the top-right corner of the code editor.
Preview Your Store: Refresh your storefront to see the changes. The vendor names should now be hidden from view.

Troubleshooting Common Issues

Changes Not Appearing: Clear your browser cache or try a different browser to see if the changes appear.
Incorrect Theme File: Ensure you're editing the correct CSS file, as custom themes may use differently named stylesheets.
Syntax Errors: Double-check for typos or incorrect CSS selectors.

Conclusion

Removing vendor names can help maintain a professional and streamlined appearance for your Shopify store, especially when using themes like Charge. By following the steps outlined in this guide, you can easily customize your theme without needing extensive CSS knowledge.