Buttons Customization
Buttons play a vital role in your store’s design, guiding users toward key actions like purchasing, browsing collections, or submitting forms. The Materia theme gives you full control over how your buttons look — including primary buttons, secondary outline buttons, cart buttons, and more.
However, not all sections follow these global button settings. Some sections are built with advanced design flexibility, meaning you'll need to manually customize their button styles directly within the section settings. This allows you to create highly personalized designs without being locked into a single global style.
🔘 Primary Button Customizations
These are the most common buttons used across your store — for actions like “Add to Cart,” “Buy Now,” “View More,” or “Checkout.”
Primary Button Background Color
Set the main background color for primary action buttons.
Example: #D4BA7A
Primary Button Hover Background Color
Set the background color when the user hovers over the button.
Example: #C1A559
Primary Button Text Color
Choose the text color that appears inside the button.
Example: #FFFFFF for white on dark backgrounds
Primary Button Hover Text Color
Set the text color on hover for contrast and interactivity.
Example: #FFFFFF
Primary Button Border Thickness
Set the width of the button border.
Example: 0 for no visible border
Primary Button Border Color
Choose the color for the border of the button (if border is enabled).
Example: #D7D7D7
Primary Button Border Radius
Controls how round or sharp the button corners are.
0= square50= fully rounded/pill styleDefault:
4
Secondary Outline Button Customizations
These buttons are typically used for less prominent actions such as “Learn More” or “Save to Wishlist.”
Outline Button Background Color
Set the button background color.
Example: #202020
Outline Button Hover Background Color
Choose the color when hovered.
Example: #333333
Outline Button Text Color
Color of the button’s label text.
Example: #FFFFFF
Outline Button Hover Text Color
Define how the text color changes on hover.
Example: #ECECEC
Outline Button Border Thickness
Set the size of the border in pixels.
Example: 0 = no visible border
Outline Button Border Color
Choose the outline color of the button.
Example: #1361FD
Outline Button Border Radius
Controls the roundness of the corners.
Example: 36 for a clean, modern look
Payment Button Customizations (Product Page)
Control the appearance of third-party payment buttons like PayPal or Shop Pay.
Payment Button Background Color
Example: #F7F7F7
Payment Button Text Color
Example: #414040
Payment Button Border Color
Example: #333333
Payment Button Border Radius
Example: 5
Payment Button Border Thickness
Example: 0
Add to Cart Button Customizations (Product Page)
Specifically styles the Add to Cart button found on product pages.
Add to Cart Button Background Color
Example: #484CFF
Add to Cart Button Hover Background Color
Example: #3B3EDC
Add to Cart Button Text Color
Example: #FFFFFF
Add to Cart Button Border Color
Example: #101010
Add to Cart Button Border Thickness
Example: 0
Add to Cart Button Border Radius
Example: 50 for a pill-shaped, bold button
Cart Recommendations Button Customizations
These are typically smaller buttons used inside upsell blocks or suggested product sliders.
Cart Recommendations Button Text Color
Example: #474747
Cart Recommendations Button Hover Text Color
Example: #0071FF
Cart Recommendations Button Font Size
Set the text size in pixels.
Example: 15
A Note About Section-Level Styling
Some custom-designed sections (like advanced product blocks, animated CTA banners, or marketing-focused layouts) are not controlled by these global settings.
In those cases:
You’ll find button color options directly inside the section’s block settings
These give you more visual freedom to create unique combinations
This flexibility is intentional — so you can customize high-impact areas more freely
If a button looks different from your global setup, check its individual section settings in the Shopify Theme Editor.
✅ Final Tips
Always maintain contrast between button text and background
Use consistent styles for similar actions (e.g., all “Buy Now” buttons)
Keep border radius and font size aligned across device sizes
For split testing, try changing hover states to see how they impact clicks\
Last updated