Change Add to Cart button to Preorder for certain products only

[sasiman11]

Hi!

I’ve tried using Preorder apps so that I can put specific products on preorder. However, they seem to block me from selling those products on any channels except my site (FB/Instagram, for example). SO, I’ve decided to just change the button add to cart label for those products to “preorder now” (using a “preorder” tag). I found a help topic here that covers it and it mostly works, but I’ve got a rogue “add to cart” plain text under the button. I’ve tried everything and I can’t seem to get rid of it without something messing up.

I’m adding pics of my code (plus, paste below), what I’m seeing on the Preorder product page and what I see on a non-preorder product page.

<button
id=“ProductSubmitButton-{{ section_id }}”
type=“submit”
name=“add”
class="product-form__submit button button–full-width
{% if product.tags contains “preorder” %}
Preorder{% else %}
<button type=“submit” class=“product-form__add-button button button–primary” {{ ‘products.product.add_to_cart’ | t }}
{% endif %}

[Tal19]

You just missed > on the add to cart button, here is the the code:

[sasiman11]

I just tried that and it doesn’t fix it on the Preorder button. It also adds the rogue “add to cart” text into the non-preorder product.

[Tal19]

you are trying to add button inside button. here is the corrected code:

[sasiman11]

Thank you! Unfortunately, that still didn’t work I don’t know what’s going on.

Here’s the code BEFORE where I’m inserting this. I notice there is an error popping up, BUT it does look perfectly fine on my site regardless:

When I add the code you sent in your last reply, the rogue “add to cart” is there on BOTH versions (preorder and non-preorder products). It’s so strange…

[Tal19]

make sure that the tag ‘preorder’ is the exact tag in those products, it’s case sensitive.

[sasiman11]

Thanks! The Preorder works on the button, surprisingly. It’s the “add to cart” plain text that appears under it that is the problem.

[Tal19]

please mark my answer as a solution

[Yauheni_K1_PreOrder]

Hey,

The code error you’re seeing is from malformed button syntax. In your theme’s product form template (Online Store → Themes → Edit code, look for main-product.liquid or product-form.liquid), find the button element and fix the structure. The button should have proper opening/closing tags with Liquid conditional logic inside controlling only the button text, not nested buttons.

Alternatively, an app like K1 PreOrder (I’m the founder) automates this via Theme App Extension with customizable text and inventory-based display modes (Always / Out of stock / Below threshold) - no manual code editing needed. K1 PreOrder listing if relevant.
Happy to help with the code fix if needed.

Best regards,
Yauheni