Buttons Customization
Last updated
Last updated
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.
These are the most common buttons used across your store — for actions like “Add to Cart,” “Buy Now,” “View More,” or “Checkout.”
Set the main background color for primary action buttons.
Example: #D4BA7A
Set the background color when the user hovers over the button.
Example: #C1A559
Choose the text color that appears inside the button.
Example: #FFFFFF for white on dark backgrounds
Set the text color on hover for contrast and interactivity.
Example: #FFFFFF
Set the width of the button border.
Example: 0 for no visible border
Choose the color for the border of the button (if border is enabled).
Example: #D7D7D7
Controls how round or sharp the button corners are.
0 = square
50 = fully rounded/pill style
Default: 4
These buttons are typically used for less prominent actions such as “Learn More” or “Save to Wishlist.”
Set the button background color.
Example: #202020
Choose the color when hovered.
Example: #333333
Color of the button’s label text.
Example: #FFFFFF
Define how the text color changes on hover.
Example: #ECECEC
Set the size of the border in pixels.
Example: 0 = no visible border
Choose the outline color of the button.
Example: #1361FD
Controls the roundness of the corners.
Example: 36 for a clean, modern look
Control the appearance of third-party payment buttons like PayPal or Shop Pay.
Example: #F7F7F7
Example: #414040
Example: #333333
Example: 5
Example: 0
Specifically styles the Add to Cart button found on product pages.
Example: #484CFF
Example: #3B3EDC
Example: #FFFFFF
Example: #101010
Example: 0
Example: 50 for a pill-shaped, bold button
These are typically smaller buttons used inside upsell blocks or suggested product sliders.
Example: #474747
Example: #0071FF
Set the text size in pixels.
Example: 15
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.
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\
