How can I modify 'add to cart' and 'buy it now' button features on Debut theme?

Store Design
1

Hi,

I was wondering if someone would be able to help me, I’m using Debut theme and I have a couple of questions regarding my ‘buy it now’ and ‘add to cart’ buttons on all product listings:

  • Could someone help me change the wording on ‘add to cart’ to ‘add to basket’?

  • Change the wording on ‘buy it now’ to ‘buy now’?

  • I want to swap the ‘buy it now’ and ‘add to cart’ buttons around so ‘buy now’ would be on top.

  • Lastly, I want to change the colour of the ‘buy now’ button to a similar but different colour to separate from the ‘add to basket’ button.

Please see some screenshots of how it currently looks on my site:

Screenshot 2022-03-23 at 11.11.24.png
Screenshot 2022-03-23 at 11.11.24.png974×646 21.9 KB

Thanks

1 Like
2

@mbhlg
It’s customization work, for that you need to hire a developer,

Let me know if you need help,

Thank you.

1 Like
3

Hi @mbhlg ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.product-single__meta .product-form__item--submit {
    display: flex;
    flex-direction: column-reverse;
}
.product-single__meta .product-form__cart-submit [data-add-to-cart-text] {
    font-size: 0;
}
.product-single__meta .product-form__cart-submit [data-add-to-cart-text]:before {
    content: "add to basket";
    font-size: 13px;
}
.product-single__meta .shopify-payment-button__button {
    font-size: 0;
    background: #cbdceb !important;
    color: #000 !important;
}
.product-single__meta .shopify-payment-button__button:before {
    content: "buy now";
    font-size: 13px;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

4

Hi @mbhlg ,

  • Is it possible to change the font colour on ‘buy now’ from black to navy?

→ This part, you can try below code in theme.css file:

.product-single__meta .shopify-payment-button__button {
color: navy !important;

}
You can change value #cee0f6 to match your theme.

Does your second point mean that you want to remove the Buy Now button on those 3 products?

1 Like
5

That is so ace, font colour has been changed.

I wanted to test - I have managed to solve the issue with the 3 products that had the button overlap by manually turning off the dynamic checkout button. (the google pay button was causing the issue)
As when you click the ‘buy now’ button you go straight to checkout and can use express checkout there with dynamic options (apple pay, google pay etc) anyway.

Thanks so much for your help :slightly_smiling_face:

1 Like
6

@AvadaCommerce

Shopify won’t let me send via message but my response is here:

Thanks for your patience and perseverance with this!

That seems to have removed the ‘buy now’ button altogether on web view. It has removed the button on those 3 listings that were causing issues.

Do I need to leave or remove this code?

[data-testid=GooglePay-button] {

display: none ! important;

}

7

Hi @mbhlg ,

You can remove that code.

8

@AvadaCommerce

Ok, have done.

Purely on website it has gone hollow white white background… Is there any way the button can still be full colour and change colour when the mouse hovers over?

Thanks!