Change Buy it now button text in Dawn theme

[danielcorrea]

Hi, I would like to change the "Buy it now" button text. I want it to say "Checkout". Can someone help me please?

[danielcorrea]

Dawn theme do not have product-template.liquid

[Dan-From-Ryviu]

Hi @danielcorrea 

Go to your Online store > Themes > Edit code > open buy-buttons.liquid file, find this line of code 

{%- if show_dynamic_checkout -%}

And add this code below right above 

{% comment %} Dan - Buy now button start - Nov 04, 2023 {% endcomment %}
<button type="button" class="like-ShopPay-button shopify-payment-button__button--shoppay">CHECK OUT</button>
<style>
.like-ShopPay-button {
  margin-top: 13px;
  color: #fff !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  border-width: 1px !important;
  border-style: solid !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  -webkit-box-shadow: 0 0 0 0 transparent !important;
  box-shadow: 0 0 0 0 transparent !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  padding: 0 !important;
  text-align: center !important;
  -webkit-transition: all 0.2s ease-out !important;
  transition: all 0.2s ease-out !important;
  width: 100% !important;
  font-size: 16px !important;     
  -webkit-box-flex: 1 !important;
  -ms-flex: 1 !important;
  flex: 1 !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  padding: 4px !important;
  min-height: 44px !important;
  max-height: 60px !important;       
  padding-top: 20px!important;
  padding-bottom: 20px!important;
  background: #5a31f4 !important;
  border-color: #5a31f4 !important;                    
}    
.like-ShopPay-button:hover {
  background: #3c0def !important;
  border-color: #3c0def !important;                      
}
.shopify-payment-button { display: none !important; }
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$(".shopify-payment-button__button--shoppay").on('click', function (event) {
  event.preventDefault();
	  $( ".shopify-payment-button__more-options").trigger( "click");
});
</script>      
{% comment %} Dan - Buy now button end {% endcomment %}        

[danielcorrea]

Thanks. How can I hide this button on the sold out products? Or at least reduce its opacity. 

[Dan-From-Ryviu · Accepted solution]

Please update code to this

  {% comment %} Dan - Buy now button start - Nov 04, 2023 {% endcomment %}
            {%- liquid
            assign check_against_inventory = true
            if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
              assign check_against_inventory = false
            endif
            if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
              assign quantity_rule_soldout = true
            endif
          -%}
  <button type="button" class="like-ShopPay-button shopify-payment-button__button--shoppay button 
    {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %} disabled {% endif %}">CHECK OUT</button>
  <style>
  .like-ShopPay-button {
    color: #fff !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    border-width: 1px !important;
    border-style: solid !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    -webkit-box-shadow: 0 0 0 0 transparent !important;
    box-shadow: 0 0 0 0 transparent !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    padding: 0 !important;
    text-align: center !important;
    -webkit-transition: all 0.2s ease-out !important;
    transition: all 0.2s ease-out !important;
    width: 100% !important;
    font-size: 16px !important;     
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    padding: 4px !important;
    min-height: 44px !important;
    max-height: 60px !important;       
    padding-top: 16px!important;
    padding-bottom: 16px!important;
    background: #5a31f4 !important;
    border-color: #5a31f4 !important;                    
  }    
  .like-ShopPay-button:hover {
    background: #3c0def !important;
    border-color: #3c0def !important;                      
  }
  .shopify-payment-button { display: none !important; }
  </style>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <script>
  $(".shopify-payment-button__button--shoppay").on('click', function (event) {
    event.preventDefault();
  	  $( ".shopify-payment-button__more-options").trigger( "click");
  });
  </script>      
  {% comment %} Dan - Buy now button end {% endcomment %}        

[jacob91]

in which template please? you didn't mention the template that we should modify

Thank you

[dasaint208]

Hello I followed this and got the result I wanted if I clicked on our product first before adding to cart.

https://www.jingscuisine.com/products/ginataang-tulingan

However, If I clicked the the Add to cart in my products page, the color of the button changes to black instead of the blue color. How do I fix this?

https://www.jingscuisine.com/cart

[WhiteWater_Web]

Hi there - this can be done by doing the following:

1) Go to Online store / Themes and 'Edit Code' for your Dawn theme (click the 3 dots to see the 'Edit Code' option

2) Do a find (CTRL+F) for this reference '{{ form | payment_button }}' in your 'buy-buttons.liquid' file (found under 'Snippets').

3) Replace this reference with the following code:

<button type="button" class="shopify-payment-button__button shopify-payment-button__button--unbranded" onclick="document.querySelector('[data-testid]').click();">Checkout</button> <div style="display:none;"> {{ form | payment_button }} </div>

Let us know if you need a hand.

Cheers.

WhiteWater Web

[danielcorrea]

Thanks but when I click the button it doesn't do anything. Can you help me?

[bozzmat]

It happens the same to me. How can i solve it?

[T2S]

Hi, I need to put this code:

<div class=“ultimate-badges”></div>

under my buy now button on my product pages? So it can have secure checkout badges. 

the theme is Dawn