Supply Theme Dynamic Checkout Button

Highlighted
Excursionist
20 0 2

Hi, 

 

I have a few questions if anyone could help? I am using Supply Theme.

1. How can I change the color of background and border for dynamic checkout button?

2. How can I change the word "Buy It Now" to an example "Checkout"?

3. Could I swap the position of Add-to-Cart button and Dynamic Checkout Button?

Joseph_Lo_0-1603691095843.png

Thank you.

Joseph Lo

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1387 136 376

 

 

Additional Notes: 

In the following tutorials, the first block of code is to change the appearance of the button. The second block of code, starting with /* Hover */ changes the button on hover, i.e. when the cursor hovers over the button. 

background-color is to change the background color of the button.

border is to change the border. The first part, 2px, refers to the thickness of the border, second part, solid, is the border style, third part, red, is the color of the border. Please visit this page to learn more about CSS border properties.

color is to change the button label/text color.

 

You can also use hex color to match the button to your branding. Instead of writing the name of the color, you would like the button to be you can input the hex code of the color found in this hex color picker online. For example, if you wanted a specific shade of purple you would input color: #7300ed; as opposed to color: purple;

 

1. Go to Online Store > Themes > Actions > Edit Code and open the theme.scss.liquid

2. To change the “Buy it now” button, paste the code below:

 

.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  background-color: green !important;
  border: 2px solid red !important;
  color: white !important;
}

/* Hover */
.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover {
  background-color: blue !important;
  border: 2px solid orange !important;
  color: green !important;
}

 

3. Edit the values of background-color, border, and color to your liking.

4. Click Save

 

To move the Buy Button above the Add to Cart Button: 

1. Go to Online Store > Themes > Actions > Edit Code and open the product-template.liquid. 

2. Look for the following code:

 

 {% if section.settings.enable_payment_button %}
            {{ form | payment_button }}
          {% endif %}
        </div>
      {% endform %}

 

3. Copy and remove this code and then paste it right above the following line of code:

 

        <div class="payment-buttons payment-buttons--{{ section.settings.add_to_cart_button_size }}">

 

The end result will look like this: 

 

   {% if section.settings.enable_payment_button %}
            {{ form | payment_button }}
          {% endif %}
        </div>
      {% endform %}

        <div class="payment-buttons payment-buttons--{{ section.settings.add_to_cart_button_size }}">
          <button type="submit" name="add" id="addToCart-{{ section.id }}" class="{{ btn_class }} btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
            <span class="icon icon-cart"></span>
            <span id="addToCartText-{{ section.id }}">{{ 'products.product.add_to_cart' | t }}</span>
          </button>

 

 

4. Click Save. 

 

At this time, changing the wording on the button is not supported, there is no supported way to change it from "Buy It Now" to "Checkout".

 

All the Best,

Bo

 

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes