Adding Colored Borders To The Add To Cart Button - Focal Theme

Store Design
, ,

Topic summary

Goal: Add a colored border to the “Add to Cart” button in the Focal theme to match a provided screenshot (images were shared as reference).

What was done:

  • Custom CSS was added via Online Store > Theme > Edit code > Assets > theme.scss.liquid.
  • Suggested selectors included: product-payment-container#MainPaymentContainer and #AddToCart, applying a solid border (examples used 2–3px and color #000).

Follow-up and latest update:

  • The requester asked to apply the same border to the sticky (on-scroll) Add to Cart button.
  • Additional CSS was provided for button#StickyAddToCart with a solid border.

Outcome:

  • The changes worked for both the standard and the sticky Add to Cart buttons, and the requester confirmed success.

Status: Resolved. No remaining open questions or disagreements. Technical note: All changes were achieved with CSS only; no theme template edits beyond adding rules to theme.scss.liquid were required.

Summarized with AI on February 5. AI used: gpt-5.
1

Hello, I would like to add colored border to the add to cart button, just like this example:

jtorres_0-1667300148985.png

This is my current button:

jtorres_1-1667300148988.png

This is my website: https://lovelmexico.com/products/sandalias-x-fresh

Thank you in advance!

2

@jtorres ,

product-payment-container#MainPaymentContainer {
    border: 2px solid #000;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

1 Like
3

Hello @jtorres ,

4

Hello @jtorres ,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

#AddToCart {
border: 3px solid #000;

}

1 Like
5

@oscprofessional Hi, thank you very much, it worked, but could it be possible to work on the sticky add to cart as well?

6

@MandasaTech Hi, thank you very much, it worked, but could it be possible to work on the sticky add to cart as well?

7

@jtorres Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

button#StickyAddToCart {
border: 2px solid #000;

}

1 Like
8

@MandasaTech Thank you so much for your help! It worked perfectly!!