How to Master "Coming Soon" Products on Shopify's Spotlight Theme (No App Needed!)

Hey there, fellow store owners! Navigating the ins and outs of Shopify can sometimes feel like a puzzle, especially when you want to do something a little outside the standard features. One common request I've seen pop up in the community, and it's a really smart one for building anticipation, is how to effectively mark products as "Coming Soon."

Recently, a thread on the Shopify community caught my eye. Our friend adhoclondon was looking for a way to display a "Coming Soon" badge on product images when browsing collections and, crucially, prevent customers from purchasing these items until they're officially launched. They were using the Spotlight theme (version 16.0.0, specifically) and were finding that simply marking products as "sold out" wasn't cutting it – it just didn't convey the right message!

This is a brilliant idea for pre-launch buzz, isn't it? Instead of just hiding upcoming products or showing them as unavailable, you can generate excitement and let your customers know something new is on its way. The good news? The community rallied with some fantastic, app-free solutions!

Why a "Coming Soon" Feature is a Game Changer

Implementing a "Coming Soon" status lets you:

• Generate Buzz: Tease new products before they're available.
• Gauge Interest: See which upcoming products grab attention.
• Improve Customer Experience: Prevent frustration from trying to buy an unavailable item with a clear message.

The Community's Consensus: Tags + Code

The experts in the thread, particularly Ploqo and websensepro, quickly pointed out that this is totally achievable with a simple product tag and a few strategic edits to your theme's Liquid code. No expensive apps needed for this core functionality, which is always a win in my book! Charlie-OptionWise also reinforced this approach with similar advice.

The core idea is simple: you’ll add a special tag (like coming-soon) to any product you want to mark as such. Then, you’ll tell your theme’s code to look for that tag and, if found, display a "Coming Soon" badge and modify the buy button behavior. Let's dive into the steps recommended by our community experts, primarily drawing from Ploqo's comprehensive solution, which covers both the visual badge and the crucial step of preventing purchases.

Before You Start: Duplicate Your Theme!

This is my golden rule for any code edits. Always, always, duplicate your theme before making changes. Go to Online Store > Themes, click the three dots (...) next to your live theme, and select "Duplicate." This gives you a safe backup in case anything goes awry!

Step-by-Step: Implementing "Coming Soon" on Spotlight Theme

1. Tag Your Products

For any product you want to mark as "Coming Soon":

1. Go to your Shopify Admin.
2. Navigate to Products and open the product.
3. In the "Tags" section, add the tag coming-soon.
4. Click Save.

Here’s what that looks like:

2. Display the "Coming Soon" Badge on Collection Pages

This step makes the "Coming Soon" badge appear on your product images in collections and search results.

1. Go to Online Store > Themes, click the (...) button on your duplicated theme, and select "Edit code."
2. Under the "Snippets" folder, open snippets/card-product.liquid.
3. Search (Ctrl/Cmd+F) for the line:

   {%- if card_product.available == false -%}
   

4. You should find this line twice. In both places, replace it with:

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

5. Click Save.

This snippet essentially tells your theme: "If this product has the 'coming-soon' tag, show a badge that says 'Coming soon' instead of checking if it's just unavailable."

Here's how it looks on a collection page:

3. Prevent Purchases and Update Button Text on Product Pages

This is the crucial part that stops customers from buying your "Coming Soon" items and changes the button text on the individual product page.

1. Still in the "Edit code" section, under "Snippets," open snippets/buy-buttons.liquid.
2. 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
   

3. Immediately below it, add these lines to hide the "Buy it now" (dynamic checkout) button:

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

4. Next, find this line (it appears twice):

   {% if product.selected_or_first_available_variant.available == false
   

5. Replace both instances with:

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

6. Finally, find this line (appears once):

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

7. Replace it with this code to change the button text to "Coming soon":

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

8. Click Save.

After these changes, your product page's buy button should now reflect the "Coming soon" status and prevent direct purchases:

Considering Alternatives for More Control?

While this code solution is great for basic "Coming Soon" functionality, for more advanced needs like capturing emails for notifications or offering full pre-orders, the community also mentioned exploring specialized Shopify apps such as Preorder Now, PreProduct, or Coming Soon Product. These can offer features like countdown timers and robust pre-order management without code edits. If you're building out a new store or looking for comprehensive e-commerce solutions, Shopify itself provides a powerful platform where such customizations are just the tip of the iceberg.

There you have it! A solid, community-tested way to implement a "Coming Soon" feature on your Shopify Spotlight theme without needing to install an app. Remember to test thoroughly on your duplicated theme before publishing, and once your product is ready to launch, just remove that coming-soon tag from the product in your admin, and it'll revert to normal availability. Happy selling, and here's to building some serious hype for your next big thing!