Style your Add to cart button with the Atc button styling block

The Atc button styling block restyles your theme's own Add to cart button. It changes colors, shape, effects, the icon and the text, and it can show the price on the button. The block draws nothing of its own, so look for the change on your button.

Before you start

You need Section Store Plus or its free trial.

Add the block

1. In Shopify admin, open Apps → Section Store → Conversion Blocks.
2. On the Atc button styling card, click Edit In Theme.
3. Pick your theme. Your live theme has a green dot.
4. The theme editor opens in a new tab on your product template, with the block added.
5. Change the settings in the right panel.
6. Click Save.

Keep the block in the same section as your Add to cart button.

Your button changes as soon as you add the block. It turns black with a lift effect, an arrow icon and the price. Change these settings to fit your store.

Settings

• Colors: Background, Text, Hover background and Hover text.
• Appearance: Font size (0 keeps your theme's size), Font weight, Border (None, Dashed, Solid), Thickness, Border color, Roundness (-1 keeps your theme's) and Padding vertical (-1 keeps your theme's height).
• Effects: Background (None, Gradient, Lift, Glass), Hover (None, Lift, Scale, Shine + lift) and Animation (None, Pulse, Glow, Shake, Wiggle).
• Button text: Icon, Custom button text and Text.
• Price: Show price on button, Round price and Compare at price color.
• Advanced: Custom CSS.

What the price shows

With Show price on button on, the price follows:

• The selected variant
• The selected subscription plan
• Selected add-ons from the Addons block
• The selected offer from Section Store Bundles

A higher compare-at price shows crossed out next to it. Round price removes decimals.

Good to know

• Shopify's Buy it now button isn't restyled.
• A sold-out variant shows your theme's sold-out text with no icon or price.
• Glass ignores your Text color and Border.
• Sticky add to cart copies the styled button.
• With Custom button text on, you translate Text in Translate & Adapt.

Related

• Atc button styling block not changing my button
• Add the Sticky add to cart block
• Add custom CSS to Conversion Blocks

Also searched as: atc button, add to cart button color, button color, change add to cart button, button animation, price on button, atc style, button styling, button hover, pulse button, shake button, buy button style