Add a border to my primary buttons

Topic summary

A user wants to add a black border to primary buttons on their Shopify store product page.

Problem: The “Add to Cart” button lacks a visible border.

Solutions Provided:

Three community members offered similar CSS-based solutions:

  • Method 1 & 2: Add CSS code to the store’s stylesheet (styles.css, base.css, theme.css, or similar file) targeting the button class with border: 2px solid #000 !important;

  • Method 3: Insert a <style> block in the theme.liquid file above the </body> tag with the same CSS rule

Key Code:

button.button.button--large.gpo-clone-atc-button {
    border: 2px solid #000 !important;
}

All approaches target the same button element and apply a 2-pixel solid black border. Screenshots demonstrate the expected result showing the bordered button.

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

Hi Mdb_Gioto

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file styles.css and add this code at the end of the file
button.button.button--large.gpo-clone-atc-button {
    border: 2px solid #000 !important;
}

Result:

Best,
Liz