Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

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

ashleighmaree
Visitor
2 0 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!

Replies 20 (20)

Ahsan_ANC
Shopify Partner
1409 254 325

Hi @ashleighmaree 

Please follow the following steps carefully.

downlv.png

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

 

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

 

download (26).png

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

 

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

 

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

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
Meandering
Visitor
1 0 0

@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!

Ahsan_ANC
Shopify Partner
1409 254 325

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

download (17).png

 

{%- 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

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
YMTE
Excursionist
17 0 4

Hi, I've tried to get this to work with the Ride theme, it still says "add to cart"

Ahsan_ANC
Shopify Partner
1409 254 325

have you done all steps?

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
highlandfeed
Visitor
2 0 0

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!

pcebo
Excursionist
18 0 4

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?

Ahsan_ANC
Shopify Partner
1409 254 325

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

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
pcebo
Excursionist
18 0 4

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

Ahsan_ANC
Shopify Partner
1409 254 325

Which theme you are using?

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
pcebo
Excursionist
18 0 4

I'm using the Venture theme. 

Piperzqn
Tourist
5 0 3

Hi @Ahsan_ANC is this possible for out of sandbox flex theme? 

 

gary07
Excursionist
65 0 11

Hi Ahsan,

 

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

"Continue selling when out of stock".

Ahsan_ANC
Shopify Partner
1409 254 325

yes

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
gary07
Excursionist
65 0 11

How please can you advise step

 

Ahsan_ANC
Shopify Partner
1409 254 325

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

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
gary07
Excursionist
65 0 11

Hi 

 

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

 

would you able to check

 

 

 

frelux
Visitor
2 0 0

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!

NaomiNN
Pathfinder
113 1 5

Hello @Ahsan_ANC 

Could this be done on Dawn theme ? 

joost_anneroos
Visitor
1 0 0

Can you also do this for the Craft theme?