Your cart is empty: Continue shopping button

[rencafenyc]

Hi, is there a way to change the “Continue shopping” button inside the empty cart drawer to use an “outline button style” ?

For other buttons, such as the ones that can be added to rich text blocks, there is the option to turn on “outline button style” in the left menu. However there isn’t anywhere to customize the “Continue shopping” button in the theme customizer and by default it is the primary button design with no way to change it to an outline button design.

That means even if I create a new color scheme in the Color settings of the Theme Customizer just to assign it to the cart, the background color of the button can match the page but there is still no way for an outline / border to appear around the button. So, I’m wondering if there’s a way to customize it through coding where the outline has border: 1px and is solid color #354b2a as well as the label “Continue shopping” color #354b2a.

I took a look at the snippets/cart-drawer.liquid and was trying to edit the following piece of code to style the button:

<button
class=“drawer__close”
type=“button”
onclick=“this.closest(‘cart-drawer’).close()”
aria-label=“{{ ‘accessibility.close’ | t }}”

{{- 'icon-close.svg' | inline_asset_content -}} {{ 'general.continue_shopping' | t }}

If anyone could point me in the right direction that would be super appreciated!

[DaisyVo]

Hi @rencafenyc

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

[rencafenyc]

Yes here’s the URL: https://rencafenyc.com/

[DaisyVo]

Hi @rencafenyc

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
.cart-drawer__empty-content > a {
    border: 1px solid #354b2a !important;
    color: #354b2a !important;
    background: transparent !important;
}
{% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[rencafenyc]

Thank you so much!

Is there also a way I can turn the “Add to cart” buttons on the product information pages to be an “outline button style” just like the “Continue shopping” button that you helped me with?