Diwali Sale is LIVE - special prices end in
⚡ Launch-ready Shopify themes — Instant licensed download · 300+ stores built with LayoutKart themes
Book Call

How to Customize Shopify Add to Cart Button Using CSS/Liquid

By /

How to Customize Shopify Add to Cart Button Using CSS/Liquid

Your Add to Cart button is the hardest-working element on your product page — it is the exact spot where browsing turns into buying. Yet most stores leave it as the theme's plain default. The good news: you don't need a developer or a paid app to make it stunning.

With a few lines of CSS and Liquid pasted into a Custom Liquid section, you can restyle your Add to Cart button to match your brand perfectly. Below are 6 ready-made button designs for different store types. Each one shows a live preview, so pick the style you love, copy the code, and make it yours in under two minutes.

1. Fashion Store – Bold Black Button

A timeless full-width black button with wide letter spacing — the uniform of premium fashion stores. It inverts on hover for a satisfying tactile feel.

Preview

ADD TO CART — full-width fashion button

Liquid Code

{% comment %} LayoutKart snippet: shopify-customize-add-to-cart-button v1 - paste into a Custom Liquid section {% endcomment %}
<style>
.f1v1-wrap{max-width:420px;margin:0 auto;font-family:Arial,Helvetica,sans-serif}
.f1v1-btn{display:block;width:100%;padding:16px;background:#111;color:#fff;border:2px solid #111;font-size:15px;font-weight:700;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all .3s}
.f1v1-btn:hover{background:#fff;color:#111}
</style>
<div class="f1v1-wrap"><button class="f1v1-btn" type="button">Add to Cart</button></div>

2. Beauty Store – Soft Rounded Pink

Soft, feminine and irresistible — a blush-pink pill button with a gentle shadow, made for beauty and cosmetics stores.

Preview

Add to Bag — blush-pink pill button

Liquid Code

{% comment %} LayoutKart snippet: shopify-customize-add-to-cart-button v2 - paste into a Custom Liquid section {% endcomment %}
<style>
.f1v2-wrap{max-width:420px;margin:0 auto;font-family:Georgia,serif;text-align:center}
.f1v2-btn{display:inline-block;padding:15px 55px;background:#f7c9d9;color:#8e1f4d;border:none;border-radius:999px;font-size:16px;font-style:italic;cursor:pointer;transition:all .3s;box-shadow:0 6px 18px rgba(240,150,180,.35)}
.f1v2-btn:hover{background:#f4a9c4;transform:translateY(-2px)}
</style>
<div class="f1v2-wrap"><button class="f1v2-btn" type="button">Add to Bag</button></div>

3. Electronics Store – Neon Glow Blue

A high-voltage neon button on deep navy — perfect for gadgets, gaming and tech stores that want a futuristic vibe.

Preview

ADD TO CART — neon glow button

Liquid Code

{% comment %} LayoutKart snippet: shopify-customize-add-to-cart-button v3 - paste into a Custom Liquid section {% endcomment %}
<style>
.f1v3-wrap{max-width:420px;margin:0 auto;background:#071c33;padding:28px;text-align:center;font-family:'Trebuchet MS',Verdana,sans-serif}
.f1v3-btn{display:inline-block;padding:15px 50px;background:transparent;color:#37e0ff;border:2px solid #37e0ff;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-radius:6px;box-shadow:0 0 18px rgba(55,224,255,.45),inset 0 0 12px rgba(55,224,255,.25);transition:all .3s}
.f1v3-btn:hover{background:#37e0ff;color:#071c33;box-shadow:0 0 28px rgba(55,224,255,.8)}
</style>
<div class="f1v3-wrap"><button class="f1v3-btn" type="button">Add to Cart</button></div>

4. Jewelry Store – Luxury Gold Outline

Understated luxury — a hairline gold outline on midnight black that whispers premium, made for jewelry and watch stores.

Preview

Add to Cart — gold outline luxury button

Liquid Code

{% comment %} LayoutKart snippet: shopify-customize-add-to-cart-button v4 - paste into a Custom Liquid section {% endcomment %}
<style>
.f1v4-wrap{max-width:420px;margin:0 auto;background:#141422;padding:28px;text-align:center;font-family:Georgia,serif}
.f1v4-btn{display:inline-block;padding:14px 55px;background:transparent;color:#e9c767;border:1px solid #e9c767;font-size:14px;letter-spacing:4px;text-transform:uppercase;cursor:pointer;transition:all .4s}
.f1v4-btn:hover{background:#e9c767;color:#141422}
</style>
<div class="f1v4-wrap"><button class="f1v4-btn" type="button">Add to Cart</button></div>

5. Grocery Store – Fresh Green with Icon

Fresh and friendly — a leafy-green rounded button with a cart icon, built for grocery and organic food stores.

Preview

Add to Cart — green button with cart icon

Liquid Code

{% comment %} LayoutKart snippet: shopify-customize-add-to-cart-button v5 - paste into a Custom Liquid section {% endcomment %}
<style>
.f1v5-wrap{max-width:420px;margin:0 auto;font-family:Verdana,Geneva,sans-serif;text-align:center}
.f1v5-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 45px;background:#2f9e44;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:background .3s}
.f1v5-btn:hover{background:#257a36}
.f1v5-btn svg{width:20px;height:20px;fill:#fff}
</style>
<div class="f1v5-wrap"><button class="f1v5-btn" type="button"><svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>Add to Cart</button></div>

6. Kids Store – Playful Gradient

Fun and bouncy — a candy gradient button that playfully tilts on hover, perfect for kids' toys and cheerful brands.

Preview

Add to Cart — candy gradient button

Liquid Code

{% comment %} LayoutKart snippet: shopify-customize-add-to-cart-button v6 - paste into a Custom Liquid section {% endcomment %}
<style>
.f1v6-wrap{max-width:420px;margin:0 auto;text-align:center;font-family:'Trebuchet MS',Verdana,sans-serif}
.f1v6-btn{display:inline-block;padding:16px 55px;background:linear-gradient(135deg,#7c3aed,#f59e0b);color:#fff;border:none;border-radius:20px;font-size:17px;font-weight:800;letter-spacing:1px;cursor:pointer;box-shadow:0 8px 20px rgba(124,58,237,.35);transition:transform .2s}
.f1v6-btn:hover{transform:scale(1.05) rotate(-1deg)}
</style>
<div class="f1v6-wrap"><button class="f1v6-btn" type="button">Add to Cart</button></div>

How to Add Add to Cart Button to Shopify

Every snippet above is built for Shopify’s Custom Liquid section, so you don’t need to touch a single theme file. Here’s the 2-minute setup:

  1. From your Shopify admin, go to Online Store → Themes.
  2. Click Customize next to your live theme (works with Dawn and all OS 2.0 themes).
  3. Open the template where you want the feature, then click Add section.
  4. Choose Custom Liquid from the section list.
  5. Copy the Liquid code from your favourite variation above and paste it into the Custom Liquid box.
  6. Click Save — it’s live on your storefront instantly. No app, no coding, no risk.

Customize the Add to Cart Button

Make it yours:

  • Change the button text — edit “Add to Cart” to “Add to Bag”, “Buy Now”, or your own language.
  • Match your brand — swap the background and border hex codes for your palette.
  • Size it up or down — adjust padding and font-size to taste.
  • Round the corners — change border-radius (0 = sharp, 999px = pill).
  • Move it — drag the Custom Liquid section above or below the buy-buttons block in the editor.

More Shopify Code Sections

Keep upgrading your store with these free Liquid tutorials:

Conclusion

Your Add to Cart button deserves better than the theme default, and now you have six proven styles to choose from. Pick the one that matches your brand, paste it into a Custom Liquid section, and watch your product pages feel instantly more premium. Small change, big difference — that is the magic of a well-designed call to action.

Want more copy-paste Shopify sections? LayoutKart publishes free Liquid tutorials every week — no apps, no monthly fees, just clean code. Bookmark this page and check back for new effects!

anurag Layoutkart
Author: anurag Layoutkart

Scroll to Top