Shopify Spotlight Theme: Custom 'Coming Soon' Product Badge & Button (No App Needed)

Hey store owners! As a Shopify expert, I often see common challenges pop up in the community that have surprisingly elegant, code-light solutions. One such discussion recently caught my eye, and it's something many of you might relate to: how to effectively mark products as 'Coming Soon' without resorting to clunky workarounds or expensive apps.

Our friend @adhoclondon kicked off a fantastic thread, asking for help with their Spotlight 16.0.0 theme. They wanted to tag products in the backend, have a clear 'Coming Soon' badge appear on product images in collections, and crucially, prevent shoppers from accidentally buying these items. At the time, they were just marking products as 'sold out,' which, as you can imagine, isn't ideal for building anticipation!

Why 'Coming Soon' Beats 'Sold Out' Every Time

Adhoclondon's dilemma perfectly highlights why a dedicated 'Coming Soon' feature is so important. Marking a product as 'sold out' can send the wrong message: either it's gone for good, or you missed your chance. Neither of these helps build excitement for an upcoming launch. A 'Coming Soon' badge, on the other hand, creates anticipation, encourages wishlisting (if you add that functionality), and lets your customers know something new and exciting is on the horizon. It's a key part of a good product launch strategy!

The Community Steps In: Two Robust Solutions for Spotlight Theme

The beauty of the Shopify community is how quickly knowledgeable folks jump in to help. In this case, we saw two excellent, detailed code-based solutions from Ploqo and Charlie-OptionWise, with websensepro laying out the foundational logic. Both Ploqo and Charlie provided step-by-step instructions for modifying your theme's Liquid files, specifically for the Spotlight 16.0.0 theme. Ploqo's solution, in particular, was very comprehensive, covering both the visual badge and preventing purchases, which is exactly what adhoclondon needed.

The core idea? Using a simple product tag (like coming-soon) as a trigger. This means you won't need a separate app just for this basic functionality!

Implementing Your 'Coming Soon' Feature: A Step-by-Step Guide

Ready to get this set up? Here's how you can implement a robust 'Coming Soon' feature on your Shopify Spotlight 16.0.0 theme, combining the best insights from the community discussion. Remember, we're going to be editing theme code, so always, always, duplicate your theme first! This gives you a safe backup in case anything goes awry.

Step 1: Duplicate Your Theme (Crucial!)

Go to your Shopify Admin > Online Store > Themes.
Find your 'Spotlight' theme, click the '...' (three dots) button, and select 'Duplicate'.
Work on the duplicated theme first. Once you're happy, you can publish it.

Step 2: Tag Your 'Coming Soon' Products

This is the easy part and your trigger for all the magic!

Go to your Shopify Admin > Products.
Open the product you want to mark as 'Coming Soon'.
In the 'Tags' section, add the tag coming-soon.
Click 'Save'.

Step 3: Add the 'Coming Soon' Badge to Product Cards

This will display the badge on collection pages, search results, and anywhere product cards appear.

In your Shopify Admin, go to Online Store > Themes > (...) on your duplicated theme > Edit code.
Open the file snippets/card-product.liquid.
Press Ctrl/Cmd+F to search for this line (it appears twice):
```
{%- if card_product.available == false -%}
```

Replace both instances of that line with this code:

{%- if card_product.tags contains 'coming-soon' -%}
  Coming soon
{%- elsif card_product.available == false -%}

Save the file.

Step 4: Modify the Buy Button (Prevent Purchase & Change Text)

This is where we ensure customers can't buy the product yet and the button text clearly states 'Coming Soon'.

Still in the 'Edit code' section, open snippets/buy-buttons.liquid.

Find this block near the top:

      if block.settings.show_dynamic_checkout and gift_card_recipient_feature_active == false
        assign show_dynamic_checkout = true
      endif

Add these three lines right under it (this hides the 'Buy it now' button):

      if product.tags contains 'coming-soon'
        assign show_dynamic_checkout = false
      endif

Next, find this line (it appears twice). You'll need to replace both instances:
```
{% if product.selected_or_first_available_variant.available == false
```

Replace both with these two lines:

{% if product.tags contains 'coming-soon'
              or product.selected_or_first_available_variant.available == false

Finally, find this line (appears once):

{%- if product.selected_or_first_available_variant == null -%}

Replace it with:

{%- if product.tags contains 'coming-soon' -%}
                Coming soon
              {%- elsif product.selected_or_first_available_variant == null -%}

Click 'Save'.

What You Should See

After saving all your changes and tagging a product with coming-soon, you should see:

A 'Coming soon' badge on the product image within collection and search pages.
On the product page, the 'Add to cart' button should now read 'Coming soon' and be greyed out, preventing any purchases.
The dynamic checkout (e.g., 'Buy it now') button should also be hidden.

No-Code Alternatives (If Code Isn't Your Jam)

While the code solution above is robust and free, it's totally understandable if diving into Liquid isn't your cup of tea. Ploqo rightly pointed out that there are several apps available on the Shopify App Store that can achieve similar results without any code. Apps like 'Preorder Now,' 'PreProduct,' or 'Coming Soon Product' offer more features, often including email notifications for launch, pre-orders, and more sophisticated countdown timers. These are great options if you need advanced functionality or prefer a visual interface.

But for a straightforward 'Coming Soon' badge and disabled purchase button, this community-sourced code modification is a fantastic, free way to get exactly what you need. It just goes to show how powerful leveraging Shopify's flexible platform and the collective wisdom of its merchant community can be. Happy selling, and here's to building some serious product hype!

Build Hype: How to Add a 'Coming Soon' Badge & Button to Shopify's Spotlight Theme