Configure button styles, shapes, and text formatting that define your store’s call-to-action appearance
Button settings define the visual style of all buttons throughout your store, controlling filled vs outlined styles, corner shapes, and text formatting for consistent call-to-action appearance. Well-designed button styling creates instant brand recognition and can improve conversion rates by 15-25% through clear visual hierarchy. Configure these button settings when establishing your store’s base visual design to ensure consistent user experience across all customer touchpoints.
Button settings define the visual style of all buttons throughout your store - from “Add to Cart” to “Checkout” to “Subscribe”. These global settings ensure consistent button appearance while allowing flexibility for primary vs secondary actions.
Button style creates instant brand recognition. Consistent button styling across your store improves user experience and conversion rates.
Button Styles: Choose filled or outlined for primary and secondary buttons
Button Shape: Squared (sharp corners) or rounded (pill shape)
Text Formatting: Control letter case (uppercase, normal, etc.)
Input Styling: Match form inputs to button aesthetic
Button colors are defined separately in Color Schemes - these settings control style and shape only.
Sahara’s default pairing is unconventional: Primary buttons are outlined, secondary are filled. Most stores reverse this - consider swapping for a more standard approach.
Style for primary action buttons - the most important actions on each page.Options:
Filled: Solid background color, high visibility
Outlined: Transparent background with border
Default: Outlined
Sahara defaults to Outlined primary buttons, which is unconventional. Most e-commerce stores use Filled for primary buttons. Consider changing to Filled for clearer call-to-action hierarchy.
Style for secondary action buttons - supporting actions that are less critical than primary.Options:
Filled: Solid background color
Outlined: Transparent background with border
Default: Filled
Standard pattern: Primary = Filled, Secondary = Outlined. Sahara reverses this. For conventional hierarchy, set Primary to Filled and Secondary to Outlined.
Primary + Secondary pairing strategies
Standard Pattern (Recommended):
Primary: Filled
Secondary: Outlined
Why: Clear visual hierarchy, industry standard
Use: Most e-commerce stores, conversion focus
Sahara Default (Reversed):
Primary: Outlined
Secondary: Filled
Why: Minimal aesthetic, subtle CTAs
Use: Editorial sites, less aggressive conversion
High Contrast:
Primary: Filled (brand color)
Secondary: Filled (neutral color)
Why: Both stand out, different colors distinguish
Use: Complex interfaces, many actions
Minimal:
Primary: Outlined
Secondary: Outlined
Why: Extremely subtle, text-focused
Use: Content-heavy sites, minimal design
Testing: Try standard pattern first, adjust based on conversion data.
Button styles and shapes are set here. Button colors are defined in Color Schemes.
These settings control style only. To change button colors, go to Theme Settings → Colors → Color Schemes.
Button color settings in Color Schemes
Color Scheme Settings:Filled Button Background:
Color ID: filled_button
Controls: Background color of filled buttons
Default: Dark blue-gray (#132D40)
Filled Button Label:
Color ID: filled_button_label
Controls: Text color on filled buttons
Default: White (#FFFFFF)
Requirement: 4.5:1 contrast minimum
Outlined Button Label:
Color ID: outlined_button_label
Controls: Text and border color for outlined buttons
Default: Dark blue-gray (#132D40)
Requirement: 3.0:1 contrast against background
Testing: Ensure buttons visible on all color schemes (light and dark backgrounds).
Button visibility across color schemes
Testing Checklist:Filled Buttons:
Text contrast (4.5:1 minimum)
Stands out against section background
Hover state visible and different
Works on images (with overlay if needed)Outlined Buttons:
Border visible (3.0:1 minimum)
Text readable against background
Border thickness sufficient (2px recommended)
Hover state distinctCommon Issues:
Light outlined buttons on light backgrounds (low contrast)
Dark outlined buttons on dark backgrounds (invisible)
Similar button color to section background (blends in)
Solution: Test buttons on all color schemes before publishing.
Creating button hierarchy with color
Standard Hierarchy:
Primary Filled: Brand color background, high contrast
Goal: Clear CTAs that drive sales with maximum visibilitySettings:
Primary style: Filled (change from default)
Secondary style: Outlined (change from default)
Button shape: Squared
Text transform: Uppercase
Input shape: Squared
Why it works: Filled primary buttons have highest visibility, uppercase creates urgency, squared matches professional aesthetic.Best for: Product-focused stores, conversion optimization
Modern/friendly brand
Goal: Approachable, casual aesthetic with soft visual languageSettings:
Primary style: Filled
Secondary style: Outlined
Button shape: Rounded
Text transform: Normal (change from default)
Input shape: Rounded
Why it works: Rounded buttons feel friendly, normal case is readable and casual.Best for: Lifestyle brands, wellness products, children’s stores
Luxury/minimal brand
Goal: Sophisticated, understated elegance with subtle CTAsSettings:
Primary style: Outlined (keep default)
Secondary style: Outlined (change from default)
Button shape: Squared
Text transform: Normal (change from default)
Input shape: Squared
Why it works: All outlined creates minimal aesthetic, normal case is refined, squared is sophisticated.Best for: High-end fashion, luxury goods, art galleries
Bold/creative brand
Goal: Strong visual impact with dramatic button presenceSettings:
Primary style: Filled
Secondary style: Filled (same as primary, different colors)
Button shape: Rounded
Text transform: Uppercase (keep default)
Input shape: Rounded
Why it works: Both filled creates bold presence, rounded softens uppercase, high contrast.Best for: Fashion-forward brands, creative industries, youth market
