Articles on: Preorders

How to add and customize preorder badges on different page types

Preorder badges are visual indicators that appear on product images or cards to let customers know a product is available for preorder. They help improve the customer experience by clearly distinguishing preorder items from regular in-stock products.


Need a badge moved, or set up for your theme? Don't edit CSS yourself. Click the purple chat icon in the bottom-right corner of the STOQ app to reach our support team, and we'll position the badge or set it up for your theme for you. See Adjusting Badge Position or Setup below.


Where Badges Can Appear


You can display preorder badges on:


  • Product pages: Badge appears on the product image when viewing the product detail page.
  • Collection pages: Badge appears on product cards within collection listings.
  • Home page: Badge appears on featured products displayed on your store's home page.
  • Search pages: Badge appears on product cards in search results.


Adding a Badge to Your Preorder Offer


To add a preorder badge that appears on product pages, configure it within your preorder offer settings.


Accessing the Badge Settings


  1. From your Shopify admin, open the STOQ app.
  2. Click Preorders in the left navigation menu.
  3. Under Offers, locate the preorder offer you want to edit.
  4. Click Edit to open the offer editor.


Enabling the Badge


  1. In the offer editor, click on the Button tab in the left panel.
  2. Scroll down to find the Add badge checkbox.
  3. Check the box to enable the preorder badge.
  4. Click Customize to expand the badge customization options.


Customizing the Badge


Once the badge is enabled, you can customize its appearance:


Badge Text
Enter the text you want to display on the badge. By default, this is set to the name of your preorder offer, but you can change it to something different like "Preorder", "Coming Soon", or "Pre-Order Now".


Text Color
Click the color picker to choose the text color for your badge. Select a color that provides good contrast against the background color for readability.


Background Color
Click the color picker to choose the background color for your badge. Choose a color that stands out against your product images while matching your store's branding.


When you're done, click Save at the top of the page. The badge appears on your product pages.


Note: The default badge text is set to the name of the preorder offer but can be changed to something different if needed.


Displaying Badges on Collection, Home, and Search Pages


To show preorder badges on pages other than the product page, you need to enable these features in the Pages settings.


Accessing Pages Settings


  1. From your Shopify admin, open the STOQ app.
  2. Click Preorders in the left navigation menu.
  3. Click Pages to access the page-specific settings.


Enabling Badges on Home Page


  1. In the Pages settings, locate the Home page section.
  2. Toggle the switch to enable preorders on the home page.
  3. When enabled, preorder badges will appear on featured products that are part of your preorder offers.


Enabling Badges on Collection Pages


  1. In the Pages settings, locate the Collection page section.
  2. Toggle the switch to enable preorders on collection pages.
  3. When enabled, preorder badges will appear on product cards within collection listings.


Enabling Badges on Search Pages


  1. In the Pages settings, locate the Search page section.
  2. Toggle the switch to enable preorders on search pages.
  3. When enabled, preorder badges will appear on product cards in search results.
  4. Click Save to apply your changes.


Adjusting Badge Position or Setup


Badge placement depends on your specific Shopify theme, so it should be configured by our team rather than adjusted on your own.


To move a badge or set it up correctly for your theme, contact our support team directly: click the purple chat icon in the bottom-right corner of the STOQ app. Tell us which page and product the badge should appear on and where you'd like it positioned, and we'll take care of the setup for you.


Please don't attempt to reposition badges using CSS selectors yourself — incorrect selectors can hide the badge or break its placement. Our team will handle it.


If you're comfortable with CSS selectors, head to "Advanced" tab in the preorder offer editor > turn on "Dev mode" > Badge insertion selector > add a badge selector and insertion type


Troubleshooting


Symptom

Likely Cause

Fix

Badge not appearing on product page

Badge not enabled in offer settings

Go to the offer editor > Button tab and check "Add badge"

Badge not appearing on collection/home/search pages

Page-specific setting not enabled

Go to Preorders > Pages and enable the relevant page toggles

Badge appears in wrong position

Theme compatibility issue

Contact support via the purple chat icon — we'll position it for you

Badge text is cut off

Text is too long

Shorten the badge text to a single word or short phrase

Badge colors don't match preview

Browser caching

Clear your browser cache and refresh the page

Badge not visible on mobile

Badge hidden by theme styles

Contact support via the purple chat icon for help


FAQs


Q: Can I have different badge text for different products?
A: Badge text is configured per preorder offer, not per product. If you need different badge text for different products, create separate preorder offers for each group of products with the desired badge text.


Q: Will the badge appear on all products or only preorder products?
A: The badge only appears on products that are part of a preorder offer with the badge enabled. Regular in-stock products will not display the preorder badge.


Q: Can I use an image instead of text for the badge?
A: No, the preorder badge is text-based with customizable colors. You cannot upload a custom image for the badge. However, you can customize the text and colors to match your branding.


Q: Why isn't the badge showing on my collection pages?
A: Make sure you have enabled preorders on collection pages in the Pages settings (Preorders > Pages > Collection page). Also verify that the products on the collection page are part of an active preorder offer with the badge enabled.


Q: Can I translate the badge text for different languages?
A: es. Badge text can be translated using STOQ's multi-language translation feature — add a translation for each language you support, and the badge appears in the customer's language. You don't need separate offers for this.


Q: Does the badge work with all Shopify themes?
A: STOQ requires Online Store 2.0 themes. The badge feature will not work on legacy Online Store 1.0 themes. Most modern Shopify themes are 2.0 compatible. If you're unsure about your theme version, check your theme documentation or contact Shopify support.


Q: The badge isn't appearing where I expected. What should I do? 
A: Reach out via the purple chat icon in the bottom-right of the STOQ app and we'll set the position up for your theme.

Updated on: 16/06/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!