Change "Add to Cart" to "Pre-Order" on items that are selling while out of stock

Store Design
1

Hi Team,

I sell a lot of items that are a Print to Order, however I keep SOME stock on hand.

I would like to change my “Add to Cart” button to say “Pre-Order”, “Order In” (something along these lines) for when my inventory is set to continue selling on zero stock items.

The Pre-Order apps don’t really suit my needs as I require payment at time of order to start making it.

Hoping there may be a code somewhere I can change instead to show the buttons variation depending on if there is physical store, or it is print to order? (Currently Venture Theme)

Thanks!

1 Like
2

Hi @ashleighmaree

Please follow the following steps carefully.

downlv.png
downlv.png1917×856 111 KB

"Pre-Order": "Pre-Order",

Now Go to the “product-template.liquid” file and change the highlighted code with the new one.

download (26).png
download (26).png1882×766 117 KB

New code

{%- if product.tags contains 'Preorder' -%}
                      {{ 'products.product.Pre-Order' | t }}
                {%- elsif current_variant.available -%}
                     {{ 'products.product.add_to_cart' | t }}
                 {% else %}
                  {{ 'products.product.sold_out' | t }}
                {%- endif -%}

Now go to single product editor, if you select Track Quantity please also check the below option

“Continue selling when out of stock”.

download (27).png
download (27).png1737×824 74.1 KB

In the single product editor, on the right side menu, under the tags of product add the tag “Preorder”. (this tag should match the tag on the first line of code that I shared).

download (28).png
download (28).png1918×747 75.5 KB

please apply these changes and let me know if there is an error.

3 Likes
3

@Ahsan_ANC Can you please outline the same steps for adding this code to the Colorblock theme? (It’s just different enough from Venture that I worry about messing up.)

Thanks!

4

Hi @Meandering Please replace the code highlighted in the below screenshot with the new code

download (17).png
download (17).png1912×861 115 KB

{%- if product.tags contains 'Preorder' -%}
        Pre-Order
    {%- elsif product.selected_or_first_available_variant.available -%}
        {{ 'products.product.add_to_cart' | t }}
    {% else %}
         {{ 'products.product.sold_out' | t }}
{%- endif -%}

the new look should be like this

download (18).png
download (18).png1847×765 92.9 KB

1 Like
5

Hi Ahsan,

Is it possible to tick this option automatic if preorder tag available

“Continue selling when out of stock”.

6

yes

7

How please can you advise step

8

try replacing this line

{%- if product.selected_or_first_available_variant.available -%}

with

{%- if product.selected_or_first_available_variant.available or product.tags contains 'Preorder' -%}

please keep the preorder the same as in the above code. Shopify is case-sensitive in it

Preorder

9

Hi

I am trying to add to my theme file but I can not find as per your picture

would you able to check

10

Hi, I’ve tried to get this to work with the Ride theme, it still says “add to cart”

11

have you done all steps?

12

Hi! I’m looking to do the same thing as the original person, except change the badge from “out of stock” to “call to order,” I’m using my shopify website as a catalog. Thanks!

13

Hi @Ahsan_ANC this is an amazing tutorial and it does exactly what I was looking to do, but with one exception. Most of my products have variants, and often I have certain variants in stock but while others are not in stock in which case I would like to show the Pre-Order option.

The issue I found is that when make the changes above, when the product first loads it correctly show the Pre-Order button, but if I switch to a different variant it goes back to showing Add To Cart.

Is there a way to show the Pre-Order button for only the variants that are not in stock?

14

Hi @pcebo for variants to show pre order we will need to change the javascript code.

15

Hi @Ahsan_ANC is this something you can help with? I would really appreciate it.

16

Which theme you are using?

17

I’m using the Venture theme.

18

Not the exact instructions for the “Ride” theme but gave me the general idea on how to get it done and I managed to get it working. Thanks!

19

Hello @Ahsan_ANC

Could this be done on Dawn theme ?

20

Can you also do this for the Craft theme?