Solved

Change Buy it now button text in Dawn theme

danielcorrea
Explorer
56 0 15

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

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7532 1454 1450

This is an 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 %}        

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 8 (8)
danielcorrea
Explorer
56 0 15

Dawn theme do not have product-template.liquid

Dan-From-Ryviu
Shopify Partner
7532 1454 1450

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

 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

danielcorrea
Explorer
56 0 15

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

Dan-From-Ryviu
Shopify Partner
7532 1454 1450

This is an 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 %}        

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

dasaint208
Tourist
7 0 2

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

dasaint208_0-1702657395096.png

 

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

dasaint208_1-1702657468620.png

 

 

 

WhiteWater_Web
Shopify Expert
456 17 42

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

A certified Shopify Partner and Expert, WhiteWater Web (WWW) is a premium digital solutions company specializing in advanced Shopify Dev, Usability/Design, and Online Strategy. WWW has been working with the Shopify platform since 2006.
info@whitewatersolutions.com
danielcorrea
Explorer
56 0 15

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

bozzmat
Visitor
1 0 0

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