How do I create a pre-order button in the Refresh Theme?

Store Design

Topic summary

A merchant using the Refresh theme wants to add a pre-order button that replaces the standard “Add to cart” button for specific products. Payment processing doesn’t need modification—only the button text.

Technical approach suggested:

  • Create an alternate product template (e.g., product.preorder.json) for Dawn-based themes
  • Modify the buy-buttons snippet to conditionally display “Pre-order” text using Liquid logic: {% if template.suffix == 'preorder'%}
  • For collection-based logic, loop through product collections or use tag-based conditions ({% if product.tags contain "preorder" %})
  • Note: Dynamic checkout buttons (Apple Pay, PayPal) cannot be customized and should be disabled for pre-order products
  • Multi-variant products require JavaScript for dynamic text switching

Solutions offered:

  • Custom coding service quoted at ~$10 for basic implementation (no styling/revisions)
  • K1 PreOrder app as a no-code alternative with automated button replacement, badges, and inventory-based triggers

Key consideration: Manual theme edits require maintenance after theme updates.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,

I want to create a product template that I can use for pre-order products that will show a pre-order button in place of the add to cart button. I found a guide and tried to follow it but got a little lost, guessing it was not for my theme.

Just to be clear, I dont need to change anything to allow pre-order payments as we take full payment up front. This has been our model for 5 years so not looking to change anything around payments.

Thanks in advance for any help.

2

Hi @kronen-p0ps If you need this customization setup for you then contact me by my email for services.

It’s pretty quick if it’s just button text for a single product with no dynamic variant behavior.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

The old tutorials for this apply to just the old vintage themes.

If you just need to change the button text..,

Generally for dawn based themes for products with a SINGLE/default variant, or all variants are preorder, you basically have to create an alternate template i.e. product.preorder.json then down in the buy-buttons snippet add logic to show a different text when it’s the preorder template instead of a regular template.

{% if template.suffix == 'preorder'%} preorder {% else %} {{ 'products.product.add_to_cart' | t }} {% endif %}

https://github.com/Shopify/dawn/blob/main/snippets/buy-buttons.liquid#L91

:bomb: Keep in mind if you have variants that are NOT preorder then you need javascript to dynamically switch text and or other states of features on the page along with logic to know WHEN a variant is regular or preorder.

If your international you will need to create a translation key, i.e. product.product.preorder in the themes locales.

3

Hi Paul,

I am capable of doing this myself I am sure, but it would be much quicker to hire someone to do it for me. Just curious on what the cost would be for setting this up? It will be for a collection of items, we sell in stock and pre-order items so anything I add to the pre-order collection would need to have a pre-order button. I am guessing likely by using different product page templates?

4

@kronen-p0ps It’s like $10 bucks and that’s mainly just due to the time to get connected and access and talking, the actual code change is a like a minute if the logic is crystal clear lol.

raw implementation , no styling , no revisions, no dynamism, nothing fancy.

Also note this cannot change the behavior or content of dynamic checkout buttons(applepay, paypall, etc) so that has to be disabled for those products.

If you want the logic to be collection based a new template isn’t need you need to loop the products collections and check if it’s in it for what text to display in the buy buttons snippet.

https://shopify.dev/docs/api/liquid/objects/product#product-collections

Or tag based, as generally it can be simpler to be tag based where the collection is an automatic collection using product tag as a condition.

{% if product.tags contain “preorder” %}…

Depends on your workflow need, just let me know which if you email me, though I could literally slap in all three condition types for the same effect.

5

Hey,

Unfortunately, Shopify doesn’t have a built-in way to change button text per product template. You’ll need to create a custom product template by duplicating your main template in Online Store → Themes → Actions → Edit code. In the product form section (usually sections/main-product.liquid or snippets/product-form.liquid), add Liquid logic to check for a product tag like “preorder” and display “Pre‑order” instead of “Add to cart”. Then assign this template to your pre-order products under Theme templates in the product editor. Here’s Shopify’s guide on theme customization.

The trade‑off: you’ll need to manually tag products and maintain the code after theme updates.

Alternately, K1 PreOrder (I’m the founder) automates this - replacing buttons with customizable text, adding badges, and offering inventory-based modes (Always / Out of stock / Below threshold) plus scheduling, all without touching code. K1 PreOrder listing here if relevant.

Happy to help with the theme customization if needed.

Best regards,
Yauheni