Personalized checkout and custom promotions with Shopify Scripts
Shopify got a dynamic checkout button that automatically changes itself to the customer’s preferred payment method, in my store, it changes to a yellow “buy with paypal” button. I want my customers to see the button as a default “buy now” button, anyone knows how can i fix this?
Could you share your store URL to check?
- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Sure
** Mod Edit, URL removed **
Go to your Online store > Themes > Edit code, open buy-bottons.liquid, find this line of code
{%- if show_dynamic_checkout -%}
Add this code before and save file
<button type="button" class="button like-ShopPay-button shopify-payment-button__button--shoppay {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
disabled
{% endif %}">BUY NOW</button>
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
<script>
$(".shopify-payment-button__button--shoppay").on('click', function (event) {
event.preventDefault();
$( ".shopify-payment-button__button .shopify-cleanslate > div").trigger( "click");
});
</script>
<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: 16px!important;
padding-bottom: 16px!important;
font-family: 'Jost';
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>
- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Perfect! I also mached it to my stire’s color but i need help whit matching the button’s font to the store
i use “assistant” font
Please find and remove those lines in the style code
font-family: 'Jost';
font-weight: 700 !important;
- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
I also chekced and it directs to the paypal checkout, hiw can i make it direct to the regular checkout?
It will be based on your browser, try to open your store in an incognito browser and check, it will open to directly regular checkout
- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Can i somehow make the button direct everyone to the regular checkout without it being based on the browser?
Anyone git a solution?
I have this same problem, no solution from shopify. They say it's based on browser i think they get paid by Paypal to direct customers to them
Could you help me too? - https://www.lottetots.com/collections/cartoon-blankets/products/copy-of-hary-poter-artistic-blanket
@Dvir1303 I have the same problem, I use the theme Refresh.
What theme are you using?
Theme impulse advance 7.2
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024