Add to cart button

Store Design
, , ,

Topic summary

A user wants to style their “Add to cart” button to match the outline style of their “Continue shopping” button—specifically with a transparent background and 1px solid border (#354b2a). While the theme customizer offers outline button options for rich text blocks, no built-in setting exists for the “Add to cart” button.

Proposed Solution:
Another user provided custom CSS code to achieve this effect:

  • Target the specific button ID in the theme’s CSS file (base.css, theme.css, style.css, main.css, or custom.css)
  • Apply background-color: transparent, border: 1px solid #354b2a, and matching text color
  • Include hover state styling (background fills with #354b2a, text turns white)

The discussion appears resolved with a working code snippet, though implementation confirmation is pending.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Is there 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?

rencafenyc_0-1739470054306.png
rencafenyc_0-1739470054306.png398×107 13.6 KB

For rich text blocks, there is an option to choose “outline button style” in the left menu of the theme customizer. So, I’m wondering if there is code that can be used to turn the current “Add to cart” button into a no color background, border 1px solid #354b2a button design because there is no option to customize the “Add to cart” button in the left menu.

Thank you!

URL: https://rencafenyc.com/

2

Hi @rencafenyc ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

#ProductSubmitButton-template--17151085052098__main {
    background-color: transparent !important;
    border: 1px solid #354b2a !important;
    color: #354b2a;
}

#ProductSubmitButton-template--17151085052098__main:hover {
    background-color: #354b2a !important;
    color: white;
}