Dynamic payment buttons: Change color of Buy Now button

Note:
Groupthought does not provide any warranty or further support for this code. Use this code at your own risk. The code provided below is only a suggestion. You are responsible for any and all code customizations made to your theme. Please work with a developer or Shopify Expert to ensure proper customization. This code may not work with all versions of of Pipeline or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.
This tutorial is intended for use with the Pipeline theme.

When using Shopify's Dynamic Payment Buttons, the Buy Now button can be modified to match your theme look with this code change.

Original:

Result:

Using the theme's Accent color setting:

How to:

Edit assets/style.scss.liquid:

Click to open assets/style.scss.liquid

Add the following code to the very bottom of the file, make a couple blank lines and then add on a new line:

/*================ Force an input/button to look like a text link ================*/
.text-link {
  display: inline;
  border: 0 none;
  background: none;
  padding: 0;
  margin: 0;
}
.shopify-product-form{
  max-width: 400px;
  margin: 0 auto;
}
.shopify-payment-button .shopify-payment-button__button {
  margin-top: 15px;
  border-radius: $radius;
  overflow: hidden;
}

.variant--soldout .shopify-payment-button,
.variant--unavailabe .shopify-payment-button{
  opacity: 0;
}
.shopify-payment-button{
  transition: opacity 0.4s ease-out;
}

.shopify-payment-button .shopify-payment-button__button--unbranded{
  padding: 16px 20px;
  font-family:  $accentFontStack;
  text-transform: uppercase;
  background-color: $colorSplash;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 1px;
  @include prefix('user-select', 'none');
  -webkit-appearance: none;
  -moz-appearance: none;
  &:hover:not([disabled]){
    background-color: darken($colorSplash, 10%);
  }
  &:active,
  &:focus {
    background-color: darken($colorSplash, 12%);
    outline: none;
  }
}
.shopify-payment-button .shopify-payment-button__more-options{
  &:active{
    text-decoration: underline;
    outline: none;
    transform: translateY(1px);
  }
}

/* - end - */

Save the file.

Use a different button color

If you'd like to override the accent color and use a different color, add this code after the above.

/* -- code to change dynamic payment buy now button color -- */
.shopify-payment-button__button--unbranded { 
  background-color: #111111 !important; }
/* - end - */

Save the file.

Use an valid hex color code for your custom button color:

http://www.colorhexa.com/web-safe-colors

How to turn off the default PayPal button

If you'd like to remove the PayPal button and replace with the above Buy Now button, you'll need to deactivate PayPay's express checkout option.

Open your Shopify Payment Settings:

https://myshopify.com/admin/settings/payments

Deactivate that: