--- title: "How to show preorder badges on collection pages" description: "Label preorder products with a badge on collection pages, home page grids and search results, in your own text, colors, size and shape. Growth plan and above." url: https://docs.ezpreorder.com/storefront-display/preorder-badges-on-collection-pages plan: Growth last_verified: 2026-11-11 --- # How to show preorder badges on collection pages EZ Preorder & Back In Stock can add a badge, such as "Preorder", to the image of each preorder product on your collection pages, on home page product grids and in search results. Turn it on in **Configuration** → **Collections & Featured Product** → **Badge Settings**, click **Save**, then click **Customize** to set the badge text, colors, font size, shape and corner. Badges are available on the Growth, Professional and Scale plans, and they need a theme preset that tells the app where your theme's product cards are. **Available on:** Growth, Professional and Scale plans. On the Free and Core plans, the **Badge Settings** card is greyed out and shows **Upgrade to Growth** in place of the switch. **Where to find it:** EZ Preorder → **Configuration** → **Collections & Featured Product** → **Badge Settings**. ## Before you start - You are on the Growth, Professional or Scale plan. - The EZ Preorder app embed is turned on in your theme. See [How to install EZ Preorder and turn on the app embed](https://docs.ezpreorder.com/getting-started/install-and-enable-the-app-embed). - At least one product is turned on in your preorder list. See [How to manage your preorder list](https://docs.ezpreorder.com/preorders/manage-your-preorder-list). - Your theme is not marked **Badge incompatible** in **Configuration** → **Theme Settings** → **Theme Selector**. The section "Which themes support preorder badges" in this article explains the check. ## How to turn on preorder badges 1. In EZ Preorder, open **Configuration**. 2. Under **Visibility**, click **Collections & Featured Product**. 3. On the **Badge Settings** card, turn the switch on. 4. Click **Save** in the save bar at the top of the page. 5. Open one of your collection pages in a new browser tab and reload it. Preorder products now show the badge on their image. The **Badge Settings** switch, like the other switches on the Configuration page, only takes effect after you click **Save**. ## How to customize the preorder badge 1. Go to **Configuration** → **Collections & Featured Product**. 2. On the **Badge Settings** card, click **Customize**. The **Badge customization** page opens. The **Customize** button only appears while your plan includes badges. 3. In the **Customize text** card, click a language tab and type the **Badge Text** for that language. There is one tab for each language published in your store, with your default language first. Repeat for each language you sell in. 4. In **Badge font size**, enter the text size in pixels, for example `12`. 5. In the **Badge Appearance** card, choose a **Badge Shape** and a **Badge Position**. 6. In the **Body** card, click **Badge Text color** and **Badge Background color**. Pick a color, or type a hex code such as `#000000` in the field under the color picker. 7. Check the **Preview** card, then click **Save** in the save bar. The message "Saved successfully" confirms it. Badge changes show in your store the next time a shopper loads or reloads a page. ## Badge customization settings The preorder badge has one design, which applies to every preorder product in your store. | Setting | What it does | Default | | --- | --- | --- | | **Badge Text** (one per store language) | The words in the badge. Shoppers see the text for their store language. If that language has no text, they see your English text, and if that is empty too, "Preorder". | Preorder | | **Badge font size** | Text size in pixels. | 12 | | **Badge Shape** | **Rectangle** gives nearly square corners (2 px). **Rounded** gives rounded corners (8 px). | Rectangle | | **Badge Position** | Which corner of the product image the badge sits in: **Top left**, **Top right**, **Bottom left** or **Bottom right**. The badge sits 10 px in from both edges. | Top left | | **Badge Text color** | Color of the badge text. | `#000000` (black) | | **Badge Background color** | Fill color of the badge. | `#ec0000` (red) | ## Where preorder badges appear Preorder badges from EZ Preorder appear on: - Product cards on collection pages, including the **All products** collection. - Product cards on other storefront pages that list products, such as featured collection sections on your home page and the search results page. - The product image in the **Preorder Featured Product** theme block. See [How to add a featured preorder section to your store](https://docs.ezpreorder.com/storefront-display/featured-preorder-section). - Product cards on the custom preorder page, with some differences explained in the section "Preorder badges on the custom preorder page" in this article. Preorder badges do not appear on product pages (neither on the main product image nor on product grids inside a product page, such as recommendations), in quick add popups, in the cart or at checkout. ## Which products get a preorder badge A product on a collection page gets the preorder badge when all of these are true: - The product is turned on in your EZ Preorder preorder list. Products you turned off or removed get no badge. Scheduled preorders follow the same rule: the app turns the product on when its start date arrives and off when its end date passes, and the badge follows. See [How to schedule preorder start and end dates](https://docs.ezpreorder.com/preorders/schedule-preorder-start-and-end-dates). - The product's preorder rule allows it: - **Always** and **Specific inventory level**: the badge shows whenever the product is turned on, whatever its stock. A **Specific inventory level** product keeps its badge after its preorder stock reaches 0. - **Sold out**: the badge shows only while at least one variant of the product is out of stock (inventory of 0 or less). When every variant is back in stock, the badge disappears on the next page load. - If you limit preorders to certain countries, the shopper's country has at least one of the product's variants available. A product limited entirely to other countries gets no badge for that shopper. See [How to set preorders for specific countries and markets](https://docs.ezpreorder.com/preorders/preorders-for-specific-countries-and-markets). The preorder badge is per product, not per variant. A product with one preorder variant and several in-stock variants shows one badge on its card. For more on the rules, see [Preorder rules](https://docs.ezpreorder.com/preorders/preorder-rules). ## When preorder badges are added to the page EZ Preorder adds preorder badges once, right after the page loads. Product cards that appear later do not get a badge until the shopper reloads the page. That includes cards added by infinite scroll, by a **Load more** button, and by filters or sorting that update the product grid without reloading the whole page. Badges also reflect stock as it was when the page loaded. ## Which themes support preorder badges EZ Preorder finds product cards using your theme's preset in **Configuration** → **Theme Settings** → **Theme Selector**. When you install the app, it selects the preset for your published theme automatically if it recognizes the theme's name. The preset fills in the **Collection page** settings that badges use: **Product wrapper selector**, **Product id selector**, **Product id attribute selector** and **Product image selector**. These settings are greyed out below the Growth plan. In the **Select your theme** list, every theme shows a **Compatible** label. Themes that cannot show preorder badges also show a **Badge incompatible** label. On those themes, the app cannot find the product cards, so neither preorder badges nor the preorder button on product cards appear. These theme presets are marked **Badge incompatible**: Alchemy, Allure, Analog, Andaman, Ascension, Athens, Athora, Atlantic, Atlas, Avante, Baseline, Bazaar, Be Yours, Beautify, Bespoke, Beyond, Blockshop, Blum, California, Cama, Capital, Carbon, Cascade, Colors, Creator, Desert, Distinctive, District, Divide, Divine, Edge, Effortless, Electro, Elixira, Emerge, Empire, Emporium, Exhibit, Expression, Fame, Flaunt, Flex, Flute, Foodie, Fuse, Gain, Galleria, Gravity, Habitat, Halftone, Handmade, Ira, July, Krank, Label, Lorenza, Luxe, Madrid, Maker, Mandolin, Maranello, Masonry, Mavon, Multi, Murmel, Nexus, Noble, Noblesse, North, Nostalgia, Ormonte, Paris, Pebble, Pesto, Polyform, Reformation, Release, Renovate, Retina, Retro, Sahara, Seventh, Shapes, Shine, Showcase, ShowTime, Sleek, Stiletto, Stockholm, Story, Stylist, Sunrise, Takeout, Tokyo, Toyo, Unicorn, Venice, Vetro, Vincent, Vision, Voltix, Wave, Wonder, Zora. If your theme is marked **Badge incompatible**, two features still show your preorder products as a group with badges: the [custom preorder page](https://docs.ezpreorder.com/storefront-display/custom-preorder-page) and the [Preorder Featured Product block](https://docs.ezpreorder.com/storefront-display/featured-preorder-section). If your theme is not in the list at all, or is heavily customized, contact support from the **Support** page in EZ Preorder and ask us to check it. For the full preset list, see [Theme compatibility](https://docs.ezpreorder.com/theme-setup-and-troubleshooting/theme-compatibility). ## Preorder badges on the custom preorder page The custom preorder page shows a preorder badge on every product card while **Badge Settings** is on, using your **Badge Text color**, **Badge Background color** and **Badge font size**. The badge on that page looks different from the one on collection pages: - It always uses your English **Badge Text**, shown in capital letters. - It always sits in the top left corner of the image. **Badge Position** does not apply. - It always has square corners, whichever **Badge Shape** you choose. See [How to set up a custom page that lists all your preorder products](https://docs.ezpreorder.com/storefront-display/custom-preorder-page). ## Preorder badges in the Preorder Featured Product block The **Preorder Featured Product** theme block shows the preorder badge on its product image while **Badge Settings** is on. It uses all of your badge settings, including the text for the shopper's language, the shape and the position. ## What happens to preorder badges when you change plans When you change to the Core or Free plan, EZ Preorder turns the **Badge Settings** switch off automatically, and badges disappear from your store. Your badge text and design are kept. If you upgrade to Growth, Professional or Scale again, turn the **Badge Settings** switch back on and click **Save**. Plan details are in [Plans and pricing](https://docs.ezpreorder.com/plans-and-billing/plans-and-pricing). ## Troubleshooting **Badges don't show on any collection page.** Check each of these in order: 1. **Configuration** → **Collections & Featured Product** → **Badge Settings** is on, and you clicked **Save**. 2. Your plan is Growth, Professional or Scale. 3. The EZ Preorder app embed is on in **Online Store** → **Themes** → **Customize** → **App embeds**. 4. The product is turned on in your preorder list, and its rule allows a badge. A **Sold out** product that has every variant in stock gets no badge. 5. Your theme is not marked **Badge incompatible** in the Theme Selector, and the preset selected there matches your published theme. If you switched themes since installing, select the new theme's preset and click **Save**. 6. Reload the collection page. **My theme is marked Badge incompatible.** EZ Preorder cannot place badges on that theme's product cards. Use the custom preorder page or the Preorder Featured Product block to highlight preorder products, or contact support. **Badges disappear after I filter, sort or scroll.** The new product cards were loaded without a page reload, so they have no badge. Reload the page and the badges come back. This is how badges work on every theme. **A product that is in stock still shows the badge.** Its preorder rule is **Always** or **Specific inventory level**, which show the badge regardless of stock. Change the rule to **Sold out**, or turn the product off in your preorder list. **The badge shows the wrong text for a language.** Open **Badge customization**, click that language's tab, enter the **Badge Text**, and click **Save**. A language with no text shows your English text. **The badge is in the wrong place on the card, or shows on the wrong product.** The theme preset's **Collection page** settings do not match your theme, often because the theme is customized. Contact support from the **Support** page in EZ Preorder. We can adjust these settings for you. **My badge changes don't show.** Click **Save** on the **Badge customization** page, wait for "Saved successfully", then reload your store page. ## Frequently asked questions ### Can I use preorder badges on the Free or Core plan? No. Preorder badges need the Growth, Professional or Scale plan. On Free and Core, the **Badge Settings** card shows **Upgrade to Growth** instead of a switch. ### Where did the Badge Settings tab go? **Badge Settings** is now a card on the **Collections & Featured Product** tab of the **Configuration** page in EZ Preorder. The **Customize** button on that card opens the badge design page. ### Can preorder badges show on the product page? No. EZ Preorder shows badges on product cards in product grids, such as collection pages, home page collections and search results, and in the Preorder Featured Product block and the custom preorder page. The product page shows the preorder button instead. ### Can I use different badge text for different products? No. EZ Preorder has one badge design for all preorder products. You can set different badge text for each store language. ### Do preorder badges work in every language? Yes. The **Badge customization** page has a tab for each language published in your store. Shoppers see the badge text for their language, or your English text if that language has none. ### Why does an in-stock product show a preorder badge? Products on the **Always** or **Specific inventory level** rule show the badge whenever they are turned on in your preorder list. Only products on the **Sold out** rule hide the badge when all their variants are in stock. ### Why did my preorder badges turn off by themselves? EZ Preorder turns badges off when a store changes to the Core or Free plan. Upgrade to Growth or above, then turn **Badge Settings** back on and click **Save**. ### Do preorder badges respect scheduled preorders and country limits? Yes. A scheduled product shows its badge only while its preorder is running. A product limited entirely to other countries shows no badge to shoppers in your country. ## Related articles - [How to show the preorder button on collection pages and featured product sections](https://docs.ezpreorder.com/storefront-display/preorder-button-on-collection-pages-and-featured-products): replace add to cart on product cards with the preorder button. - [How to set up a custom page that lists all your preorder products](https://docs.ezpreorder.com/storefront-display/custom-preorder-page): one page with every active preorder product, a good alternative on badge-incompatible themes. - [How to add a featured preorder section to your store](https://docs.ezpreorder.com/storefront-display/featured-preorder-section): feature one preorder product anywhere in your theme. - [Theme compatibility](https://docs.ezpreorder.com/theme-setup-and-troubleshooting/theme-compatibility): the Theme Selector and every theme preset. - [Advanced theme settings](https://docs.ezpreorder.com/theme-setup-and-troubleshooting/advanced-theme-settings): the selectors badges rely on. - [Plans and pricing](https://docs.ezpreorder.com/plans-and-billing/plans-and-pricing): which plan includes badges.