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

[jitesh1]

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?

[devcoders · Accepted solution]

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' %}
  <style>
    .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; 
      }
  </style>
{% endif %}

[devcoders]

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

[jitesh1]

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

[devcoders]

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; 
}

[jitesh1]

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

[devcoders]

Hi @jitesh1 

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

[jitesh1]

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

[devcoders · Accepted solution]

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' %}
  <style>
    .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; 
      }
  </style>
{% endif %}

[jitesh1]

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?

[devcoders]

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

[jitesh1]

Can you please tell me how can i do that

[devcoders · Accepted solution]

Hi @jitesh1 

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

{% if product.metafields.global.button_text == 'preorder' %}
<style>
.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;
}
</style>
{% endif %}

[jitesh1]

it works

thanks for the help

[devcoders]

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.

[JayAdra]

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).