How to change the 'Buy Now' button text to 'Preorder Now' but not on all products?

Store Design
, , ,
1

How to change the ‘Buy Now’ button text to ‘Preorder Now’ but not on all products . I want the button text ‘Preorder Now’ only on some products?

1 Like
2

Hi @jitesh1
If you share your store URL and password with me, I will check and provide you with the solution.

1 Like
3

Hello sir thanks for replying
store url - https://thehimalayanfarm.in/

1 Like
4

Hi @jitesh1

  • Go to Online Store → Theme → Edit code.
  • Find the file assets/base.css and paste the code below at the bottom of the file.
.shopify-payment-button__button {
position: relative;
overflow: hidden;
text-align: center;
line-height:40px;
color: transparent;
border: none;
padding: 10px 20px;
font-size: 16px; 
}
.shopify-payment-button__button::after {
content: 'Preorder Now'; 
color: #ffffff; 
font-size: 16px; 
position: absolute;
top: 43%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap; 
}

devcoders_0-1722713098942.png
devcoders_0-1722713098942.png1326×427 221 KB

5

but it will be change for all the products. i want to apply it for specific products only

1 Like
6

Hi @jitesh1

Okay, please let me know which product you want to change the text for. Share the link to that product with me.

7

https://thehimalayanfarm.in/products/farm-fresh-himalayan-dark-baron-apples5kg

1 Like
8

Hi @jitesh1

  • Go to Online Store → Theme → Edit code.
  • Find the file layout/theme.liquid and paste the code below at the bottom of the file.
{% if product.handle == 'farm-fresh-himalayan-dark-baron-apples5kg' %}
  
{% endif %}
1 Like
9

Thank you, sir. It works. But do I have to manually add product handle again and again if I want to have more products in my store to preorder? Can’t it be done with a GUI where we can select ‘preorder’ true or false, like in a metafield or something?

1 Like
10

Hi @jitesh1
Yes, I can do this dynamically using metafields.

1 Like
11

Can you please tell me how can i do that

1 Like
12

Hi @jitesh1

If this doesn’t work, please inform me at email devcodersp

{% if product.metafields.global.button_text == 'preorder' %}

{% endif %}
13

it works

thanks for the help

1 Like
14

Hi @jitesh1

Great to hear that the issue has been resolved! If my assistance was helpful, please consider liking and accepting the solution. Feel free to reach out if you have any further questions.

1 Like
15

Just keep in mind, though the above solution with CSS might work, it’s quite hacky, and doesn’t give you much flexibility.

A cleaner solution would be to use similar liquid code in your theme file/s to render different text on the page, rather than overriding this with CSS.

And an even simpler/more flexible solution would be to use an app (especially if you’re looking to offer actual preorders, and not just change the label of the button).