---
articleType: Tutorial
breadcrumbPath: "Getting started > Design my storefront"
categories:
  - Store Design
  - Creator Dashboard
contextString: Available on all Fourthwall plans. Accessed via the site designer in the creator dashboard.
labels:
  - promo
  - promotional-code
  - badge
last_updated: '2026-03-30'
path: getting-started/design-my-storefront/remove-promo-tooltip
primaryTopic: hide-promo-badge
relatedModules:
  - name: theme-editor-pages
    route: /admin/dashboard/store-design/pages/
  - name: theme-editor-layout-coming-soon
    route: /admin/dashboard/store-design/layout/password
  - name: theme-editor-layout-checkout
    route: /admin/dashboard/store-design/layout/checkout
  - name: theme-editor-layout-home
    route: /admin/dashboard/store-design/layout/index
  - name: theme-editor-layout-memberships-perks
    route: /admin/dashboard/store-design/layout/memberships_perks
shortDescription: Learn how to hide promo, members-only, and custom badges on your product images using a theme setting or a simple CSS snippet.
tags:
  - store-design
  - custom-css
  - custom-badge
  - ui-customization
  - code-editor
  - header-code
  - product-badge
  - promo
  - hide-promotion-badges
  - members-only
title: Remove product badges
tasks:
  - remove promo badge from product images
  - hide promotion badges
  - add custom CSS to storefront header
  - hide product badge
  - access advanced code editor
terms:
  - remove promo badge
  - hide promo badge
  - hide promotion badges
  - custom code
  - edit code
  - header code
  - CSS
  - store design
  - members-only badge
  - product badge
  - display none
  - customize storefront
  - badge
---

# Remove product badges

Badges appear in the top-right corner of product images to highlight promotions, membership perks, and custom labels. You can hide them using a built-in theme setting (no code required) or a CSS snippet for full control over which badge types are hidden.

[Image: Product image with promo available tooltip badge in the top right corner]

[Image: Product image with members-only badge in the top right corner]

## Types of badges

Fourthwall displays several badge types on product images, all rendered through the same `.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").

## Badge priority logic

When a product has both a custom badge and an automatic promo badge, the custom badge takes priority. Fourthwall hides the automatic promo badge 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 — no code required.

1. Go to **Site Design > Style > Product Card** at https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=Product+cards.
2. Check the **Hide promotion badges** option.
3. The change saves automatically.

This hides automatic promo and members-only badges. It does NOT hide custom badges. To hide custom badges or all badge types, use the CSS method.

## Hide badges with CSS

Adding a short CSS snippet to your shop's header code removes all badges from product images.

1. Go to **Site design** at https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?redirect in your dashboard.
2. Scroll to the bottom of the left-hand menu and click **Edit code (advanced)** at https://my-shop.fourthwall.com/admin/dashboard/store-design/general/advanced?redirect.
3. Check **Enable header code**, then paste the following code into the box:

```
<style>
.badge {
display: none;
}
</style>
```

4. The change saves and applies automatically. Your product images will no longer show any badges.

[Image: Header code editor with CSS snippet to hide badge elements]

**Important:** 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.