Skip to main content

Remove product badges

Updated March 30, 2026

Hide product image badges, including promo, members-only, and custom badges

Badges appear in the top-right corner of your product images to highlight promotions, membership perks, and custom labels. If you prefer a cleaner look, you can hide them using a built-in theme setting or a CSS snippet.

![Product image with promo available tooltip badge in the top right corner](/img/articles/getting-started/design-my-storefront/how-to-remove-promo-available-tooltip/Screenshot-2024-04-18-at-1.18.54 PM.webp)

![Product image with members-only badge in the top right corner](/img/articles/getting-started/design-my-storefront/how-to-remove-promo-available-tooltip/Screenshot-2024-04-18-at-1.19.20 PM.webp)

Types of badges​

Fourthwall displays several badge types on product images using the .badge CSS class:

  • Promo available. Shows automatically when a product has an active promotion.
  • Members-only. Shows automatically when a product is restricted to members.
  • Custom badges. Badges you create yourself to highlight products with your own labels (for example, "New," "Limited," or "Best Seller").

All badge types render through the same .badge CSS class on your shop.

Badge priority logic​

When a product has both a custom badge and an automatic promo badge, the custom badge takes priority. The automatic promo badge is hidden while a custom badge is active on that product. Once you remove the custom badge, the automatic promo badge reappears if a promotion is still running.

Hide badges using the theme setting​

The simplest way to remove promotion badges is through your theme settings:

  1. Go to Site Design > Style > Product Card.
  2. Check the Hide promotion badges option.
  3. The change saves automatically.

This hides automatic promo and members-only badges without any code. If you also need to hide custom badges or want more control, use the CSS method below.

Hide badges with CSS​

You can remove all badges from your product images by adding a short CSS snippet to your shop's header code.

  1. Go to Site design in your dashboard.
  2. Scroll to the bottom of the left-hand menu and click Edit code (advanced).
  3. Check Enable header code, then paste the following code into the box:
<style>
.badge {
display: none;
}
</style>
  1. The change saves and applies automatically. Your product images will no longer show any badges.

![Header code editor with CSS snippet to hide badge elements](/img/articles/getting-started/design-my-storefront/how-to-remove-promo-available-tooltip/Screenshot-2024-04-18-at-1.33.45 PM.webp)

caution

This CSS snippet hides all badge types, including custom badges you have created. If you only want to hide automatic promo or members-only badges while keeping your custom badges visible, use the Hide promotion badges theme setting instead.

Frequently Asked Questions​

Will this CSS snippet also hide my custom badges?​

Yes. Because custom badges use the same .badge CSS class, the snippet hides every badge type on your product images. If you only want to hide automatic badges, use the Hide promotion badges theme setting.

What happens if I have both a custom badge and a promo on the same product?​

The custom badge takes priority. Fourthwall hides the automatic promo badge while your custom badge is active. If you remove the custom badge, the promo badge reappears.

Can I hide only specific badge types?​

The .badge class applies to all badge types, so the CSS snippet above is all-or-nothing. To selectively remove badges, manage them through their source: delete the promo code, change the membership restriction, or remove the custom badge from the product. Alternatively, use the Hide promotion badges theme setting to hide only automatic badges.

If you have any questions, do not hesitate to contact us at support@fourthwall.com.

Was this helpful?