Hello. I want to change the button from “Add to cart” to “Pre-order” for certain items from the same vendor.
I tried this product-template liquid (Brooklyn):
{% if current_variant.available %}> {% if product.vendor == ‘vendorname’ %}> PRE-ORDER> {% else %}> > {{ ‘products.product.add_to_cart’ | t }}> {% endif %}> {% else %}> {{ ‘products.product.sold_out’ | t }}> {% endif %}>
It works when you are visiting the products. BUT when you choose a different variant, it changes the button to “Add to cart”
Anyone knows how to make the button to stay “Pre order” ?
Thanks in advance
Hi @GeorgeKerr ,
Go to layout > theme.liquid file, find ‘addToCart’ and change code:
https://i.imgur.com/xgpyd3p.png => https://i.imgur.com/MejUVd7.png
Code:
addToCart: {{ 'products.product.add_to_cart' | t | json }}
=>
addToCart: {% if product.vendor == 'vendorname' %}PRE-ORDER{% else %}{{ 'products.product.add_to_cart' | t | json }}{% endif %}
Hope it helps!
1 Like
Thanks but it doesn’t work. It doesn’t even change the button for the first selected variant
It needs some JS but i think in theme.js
below function _updateSKU
I just don’t know what exactly. Anyone knows??
Hi @GeorgeKerr ,
Are you using Brooklyn theme?
With Brooklyn theme, after you change product-template.liquid with your code, it will work fine the first time. Then you change my code, it will work fine when you change variants.
Hope it is clear to you.
1 Like
I tried this but still it changes to ADD TO CART. Maybe something prevents it from working
I forgot to tell you, yes i use Brooklyn from 2018, so i don’t have the latest. Maybe this is also a problem.
Is there any other way ? In the past i used this
https://community.shopify.com/c/shopify-design/how-to-display-the-selected-variants-weight-on-product-page/m-p/299531
for variant weight. How can i make something like this?
Hi @GeorgeKerr ,
Can you send me the site link? I will check it.
1 Like
Hi @GeorgeKerr ,
Because I don’t have 2018 version so I need to check how JS works to suggest you the best solution.
https://amely.gr
Now for many products i use an app for pre-order, but it is too slow. Many customers have very bad internet connection and pre-order doesn’t show.
I made a code for the message below the button and one for checkout page (below item) and inside shopify order page. The <input code works like item property, it adds a property to the item like with variants. This message will shown to cart page and you will see it also in the order page
like
BLACK SHIRT> Size: Medium> NOTE: DELIVERY IN 30 DAYS
{% if product.vendor == ‘VENDORNAME’ %}> > NOTE: DELIVERY IN 30 DAYS>
{% endif %}
If anyone want to use it, you can add the code right above {% endform %} in product-template.liquid
Hi @GeorgeKerr ,
I checked and tag ‘’ in button cart was removed by app.
That’s why my code is not working.
So if you delete the app it will work fine.
Or if you don’t want to delete the app, after you add my code just go to assets > theme.js.liquid . Find ‘$(this.selectors.addToCartText, this.$container)’, change:
$(this.selectors.addToCartText, this.$container)
=>
$(this.selectors.addToCart, this.$container)
Hope it helps!
1 Like
@LitExtension
Thank you. The problem remains. Check https://amely.gr/products/ζώνη-σε-διάφορα-χρώματα-becky
For this product i now added all three codes
- product-template liquid (Brooklyn):
{% if current_variant.available %}> {% if product.vendor == ‘vendorname’ %}> PRE-ORDER> {% else %}> > {{ ‘products.product.add_to_cart’ | t }}> {% endif %}> {% else %}> {{ ‘products.product.sold_out’ | t }}> {% endif %}>
addToCart: {% if product.vendor == 'vendorname' %}PRE-ORDER{% else %}{{ 'products.product.add_to_cart' | t | json }}{% endif %}
change:
$(this.selectors.addToCartText, this.$container)
=>
$(this.selectors.addToCart, this.$container)
But still the button changes to Add to cart
Hi @GeorgeKerr ,
This is definitely due to the app you installed. When you change variants, it will automatically update button text, so theme.js text update code doesn’t work.
So you need to turn off the app or contact them for support.
And I also found a piece of code in the ‘snippets/smile-initializer.liquid’ file or somewhere that declares this.
Can you send me the code, I will help you to check it.
1 Like
@LitExtension
You are right. i turned off the app and it’s working.
Even without the last changes
To recap for everyone that searching to make free Pre-order button based on Vendor
- Replace in product-template liquid (Brooklyn):
this
{% if current_variant.available %}
{{ ‘products.product.add_to_cart’ | t }}
{% else %}
{{ ‘products.product.sold_out’ | t }}
{% endif %}
with:
{% if current_variant.available %}
{% if product.vendor == 'VENDORNAME' %}
PRE-ORDER
{% else %}
{{ ‘products.product.add_to_cart’ | t }}
{% endif %}
{% else %}
{{ ‘products.product.sold_out’ | t }}
{% endif %}
Go to layout > theme.liquid file, find ‘addToCart’ and change code:
https://i.imgur.com/xgpyd3p.png => https://i.imgur.com/MejUVd7.png
Code:
addToCart: {{ 'products.product.add_to_cart' | t | json }}
Copy
=>
addToCart: {% if product.vendor == 'vendorname' %}PRE-ORDER{% else %}{{ 'products.product.add_to_cart' | t | json }}{% endif %}
- If you want to add a message right below every pre-ordered product in Check out and also inside shopify order page
like
BLACK SHIRT> Size: Medium> NOTE: DELIVERY IN 30 DAYS
you can add the code right above {% endform %} in product-template.liquid
{% if product.vendor == ‘VENDORNAME’ %}> > NOTE: DELIVERY IN 30 DAYS>
{% endif %}
Thank you very much!!
Hi @GeorgeKerr ,
My previous tutorial didn’t have to follow the steps, it just helps you to debug better in case you don’t want to turn off the app. This applies to step 3.
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
1 Like
Hi,
You can add a pre-order button without an app or external library. It works with multiple variants too. Check the video for more information.
