> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Buttons

> 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.

## What this controls

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.

<Tip>Button style creates instant brand recognition. Consistent button styling across your store improves user experience and conversion rates.</Tip>

## How it works

Sahara's button system has three components:

1. **Button Styles:** Choose filled or outlined for primary and secondary buttons
2. **Button Shape:** Squared (sharp corners) or rounded (pill shape)
3. **Text Formatting:** Control letter case (uppercase, normal, etc.)
4. **Input Styling:** Match form inputs to button aesthetic

Button **colors** are defined separately in Color Schemes - these settings control **style and shape only**.

<Note>Sahara's default pairing is unconventional: Primary buttons are outlined, secondary are filled. Most stores reverse this - consider swapping for a more standard approach.</Note>

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin → **Online Store** → **Themes** → **Customize**
  </Step>

  <Step title="Access button settings">
    Click **Theme settings** (gear icon in sidebar) → Select **Buttons**
  </Step>

  <Step title="Set button styles">
    Choose filled or outlined for primary and secondary buttons
  </Step>

  <Step title="Choose button shape">
    Select squared (sharp) or rounded (pill) corners
  </Step>

  <Step title="Configure text transform">
    Set button text capitalization (uppercase, normal, etc.)
  </Step>
</Steps>

## Location

**Path:** Theme settings → Buttons

<img src="https://mintcdn.com/digifist/pcjWAscGScyZ7ru5/images/galantis/connect/buttons/buttons-location.png?fit=max&auto=format&n=pcjWAscGScyZ7ru5&q=85&s=ec65efbece49c069d557598158d4caa3" alt="Button settings location" width="3280" height="2186" data-path="images/galantis/connect/buttons/buttons-location.png" />

## Settings

<Tabs>
  <Tab title="Button Styles">
    ### Primary Button Style

    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

    <Warning>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.</Warning>

    <AccordionGroup>
      <Accordion title="When to use filled vs outlined primary">
        **Use Filled Primary (Recommended for Most Stores):**

        * Maximum visibility for Add to Cart, Checkout
        * Clear call-to-action hierarchy
        * Standard e-commerce pattern users expect
        * Better conversion rates typically

        **Use Outlined Primary:**

        * Minimal/subtle aesthetic
        * When primary actions shouldn't dominate
        * Consistent with minimal brand identity
        * Sahara's default (consider if intentional)

        **Visual Impact:**

        * **Filled:** Button "pops" from page, draws eye
        * **Outlined:** Blends more with page, subtle

        **Conversion Focus:**

        * High-priority stores: Use Filled
        * Content/editorial sites: Outlined acceptable
      </Accordion>

      <Accordion title="Primary button examples by page">
        **Homepage:**

        * "Shop Now" - Primary
        * "View Collection" - Primary
        * "Subscribe" - Primary (newsletter)

        **Product Page:**

        * "Add to Cart" - Primary (most important)
        * "Buy Now" - Primary (alternative checkout)
        * "View Size Guide" - Secondary

        **Collection Page:**

        * "Quick Add" - Primary (per product)
        * "View Product" - Secondary
        * "Filter Results" - Secondary

        **Cart Page:**

        * "Checkout" - Primary (conversion goal)
        * "Continue Shopping" - Secondary
        * "Update Cart" - Secondary

        **Account Pages:**

        * "Save Changes" - Primary
        * "Cancel" - Secondary
        * "Delete" - Secondary (destructive)
      </Accordion>
    </AccordionGroup>

    ### Secondary Button Style

    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

    <Tip>Standard pattern: Primary = Filled, Secondary = Outlined. Sahara reverses this. For conventional hierarchy, set Primary to Filled and Secondary to Outlined.</Tip>

    <AccordionGroup>
      <Accordion title="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.
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Button Shape">
    ### Button Border Radius

    Controls corner rounding for all buttons throughout the store.

    **Options:**

    * **Squared:** Sharp corners (0px radius)
    * **Rounded:** Full pill shape (5rem radius)

    **Default:** Squared

    <AccordionGroup>
      <Accordion title="Squared vs Rounded button psychology">
        **Squared Buttons (Sharp Corners):**

        * **Feel:** Modern, professional, formal
        * **Brands:** Tech, corporate, luxury
        * **Associations:** Precision, clarity, seriousness
        * **Sahara Default:** Matches sharp aesthetic

        **Rounded Buttons (Pill Shape):**

        * **Feel:** Friendly, approachable, casual
        * **Brands:** Lifestyle, children, wellness
        * **Associations:** Softness, warmth, playfulness
        * **Impact:** More inviting, less intimidating

        **Industry Examples:**

        * **Fashion (Sharp):** Zara, COS, Uniqlo - squared
        * **Fashion (Friendly):** ASOS, H\&M - rounded
        * **Tech:** Apple - rounded, Microsoft - squared
        * **Luxury:** Squared almost always

        **Accessibility:** Both shapes work equally well for readability and touch targets.
      </Accordion>

      <Accordion title="Matching button shape to brand personality">
        **Choose Squared If:**

        * Professional/corporate brand
        * Luxury positioning
        * Modern/minimal aesthetic
        * Tech products
        * Formal tone
        * Sharp typography (sans-serif headings)

        **Choose Rounded If:**

        * Friendly/approachable brand
        * Casual positioning
        * Playful aesthetic
        * Consumer lifestyle products
        * Warm tone
        * Rounded typography

        **Mixed Approach:**

        * Some brands use squared for desktop, rounded for mobile
        * Not recommended (inconsistent experience)
        * Choose one and stick with it

        **Testing Your Choice:**

        * Preview on actual product pages
        * Check "Add to Cart" button feel
        * Ask: Does this match our brand voice?
      </Accordion>
    </AccordionGroup>

    ### Input Border Radius

    Controls corner rounding for form input fields (search, email, quantity, etc.).

    **Options:**

    * **Squared:** Sharp corners (0px radius)
    * **Rounded:** Rounded corners (6rem radius)

    **Default:** Squared

    <Warning>Input shape should match button shape for visual consistency. If buttons are rounded, inputs should be rounded too.</Warning>

    <AccordionGroup>
      <Accordion title="Coordinating buttons and inputs">
        **Matched Styling (Recommended):**

        * Buttons: Squared → Inputs: Squared
        * Buttons: Rounded → Inputs: Rounded
        * **Why:** Visual consistency, cohesive design

        **Mixed Styling (Not Recommended):**

        * Buttons: Squared → Inputs: Rounded
        * Buttons: Rounded → Inputs: Squared
        * **Why:** Feels disjointed, inconsistent

        **Form Examples:**

        * **Newsletter signup:** Input + Button side-by-side (must match)
        * **Search bar:** Input + Button inline (must match)
        * **Product quantity:** Input + Add to Cart (coordination important)

        **Exception:** Some brands use squared buttons with slightly rounded inputs (subtle difference). Generally avoid this.
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Text Formatting">
    ### Button Text Transform

    Controls capitalization of button text globally.

    **Options:**

    * **Normal:** Text appears as entered (Mixed Case)
    * **Capitalize:** First Letter Of Each Word Capitalized
    * **Uppercase:** ALL LETTERS CAPITALIZED
    * **Lowercase:** all letters lowercase

    **Default:** Uppercase

    <AccordionGroup>
      <Accordion title="Text transform impact on tone">
        **Uppercase (Sahara Default):**

        * **Feel:** Bold, attention-grabbing, formal
        * **Readability:** Slower to read (less shape recognition)
        * **Use for:** CTAs that need emphasis, formal brands
        * **Pair with:** Wide letter spacing for better readability
        * **Examples:** "ADD TO CART", "CHECKOUT NOW"

        **Normal (Mixed Case):**

        * **Feel:** Neutral, readable, standard
        * **Readability:** Best (natural reading pattern)
        * **Use for:** Casual brands, text-heavy buttons
        * **Pair with:** Standard letter spacing
        * **Examples:** "Add to Cart", "Learn More"

        **Capitalize (Title Case):**

        * **Feel:** Polished, professional, formal
        * **Readability:** Good, slightly formal
        * **Use for:** Professional services, formal contexts
        * **Pair with:** Standard letter spacing
        * **Examples:** "Add To Cart", "View Details"

        **Lowercase:**

        * **Feel:** Ultra-casual, modern, playful
        * **Readability:** Can feel informal or unprofessional
        * **Use for:** Very casual brands, artistic sites
        * **Pair with:** Careful - can look like error
        * **Examples:** "add to cart", "shop now"
      </Accordion>

      <Accordion title="Text transform best practices">
        **For E-Commerce Stores:**

        * **Uppercase:** If brand is formal, luxury, or bold
        * **Normal:** If brand is casual, friendly, accessible
        * **Capitalize:** If brand is professional services
        * **Lowercase:** Rarely (risk looking unprofessional)

        **Readability Considerations:**

        * **Uppercase:** Add wide letter spacing (0.2rem+)
        * **Uppercase:** Keep button text short (2-4 words)
        * **Normal:** Works for any length text
        * **Lowercase:** Ensure intentional (test with users)

        **Coordination with Typography:**

        * Match heading text transform (Sahara defaults both to uppercase)
        * If headings are uppercase, buttons uppercase makes sense
        * If headings are normal, buttons normal maintains consistency

        **Accessibility:**

        * Screen readers read all caps correctly
        * All caps SLIGHTLY slower visual reading
        * Normal case fastest for readability

        **A/B Testing:**

        * Test conversion impact of text transform
        * Uppercase can improve CTR for bold brands
        * Normal often performs better for long button text
      </Accordion>

      <Accordion title="Letter spacing coordination">
        **Typography Theme Setting:**

        * Heading letter spacing: Normal / Wide / Tight
        * Located in: Theme Settings → Typography

        **Coordination Strategy:**

        **If Uppercase Buttons:**

        * Set heading letter spacing to "Wide"
        * Improves readability of all-caps text
        * Sahara defaults to uppercase buttons AND uppercase headings

        **If Normal Case Buttons:**

        * Heading letter spacing can be "Normal"
        * Standard spacing works fine

        **Technical Note:**

        * Letter spacing applies to headings, not buttons directly
        * But visual consistency matters
        * If headings have wide spacing, uppercase buttons match better
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Color Interaction">
    ### How Button Colors Work

    Button **styles and shapes** are set here. Button **colors** are defined in Color Schemes.

    <Note>These settings control style only. To change button colors, go to Theme Settings → Colors → Color Schemes.</Note>

    <AccordionGroup>
      <Accordion title="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).
      </Accordion>

      <Accordion title="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 distinct

        **Common 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.
      </Accordion>

      <Accordion title="Creating button hierarchy with color">
        **Standard Hierarchy:**

        * **Primary Filled:** Brand color background, high contrast
        * **Secondary Outlined:** Neutral color border, subtle
        * **Result:** Clear visual priority

        **Color Strategy:**

        * **Primary:** Use brand color (blue, red, green)
        * **Secondary:** Use neutral (black, gray)
        * **Tertiary (if needed):** Very subtle color

        **Example Configurations:**

        **Bold Brand:**

        * Primary Filled: Bright brand color (#FF6B6B)
        * Secondary Outlined: Black (#111111)

        **Minimal Brand:**

        * Primary Filled: Black (#000000)
        * Secondary Outlined: Dark gray (#333333)

        **Colorful Brand:**

        * Primary Filled: Brand primary (#367CAC)
        * Secondary Outlined: Brand secondary (#132D40)
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

<img src="https://mintcdn.com/digifist/5qUzMEGBLuZ_FPUR/images/galantis/connect/buttons/placeholder-overview.png?fit=max&auto=format&n=5qUzMEGBLuZ_FPUR&q=85&s=6e34f1780a64713256bbbb3bd90ef87e" alt="Button settings overview" width="3280" height="2186" data-path="images/galantis/connect/buttons/placeholder-overview.png" />

## Best practices

<CardGroup cols={2}>
  <Card title="Use standard button hierarchy" icon="layer-group">
    Primary = Filled, Secondary = Outlined (opposite of Sahara default). This pattern has highest conversion rates.
  </Card>

  <Card title="Match button shape to brand" icon="shapes">
    Squared = professional/modern, Rounded = friendly/casual. Choose one and be consistent.
  </Card>

  <Card title="Coordinate buttons and inputs" icon="square-check">
    If buttons are squared, inputs should be squared. If rounded, inputs rounded too.
  </Card>

  <Card title="Choose text transform intentionally" icon="text">
    Uppercase = bold/formal (add letter spacing), Normal = readable/casual, Capitalize = professional.
  </Card>

  <Card title="Test button visibility" icon="eye">
    Ensure buttons work on light schemes, dark schemes, and over images.
  </Card>

  <Card title="Keep button text short" icon="text-size">
    2-4 words maximum, especially with uppercase (harder to read).
  </Card>

  <Card title="Use brand color for primary" icon="palette">
    Primary buttons should use brand color for recognition and emphasis.
  </Card>

  <Card title="Ensure sufficient contrast" icon="circle-half-stroke">
    Button text needs 4.5:1 contrast ratio against button background.
  </Card>

  <Card title="Make hover states obvious" icon="hand-pointer">
    Users need visual feedback when hovering over buttons.
  </Card>

  <Card title="Test on mobile devices" icon="mobile">
    Buttons should be minimum 44×44px touch targets on mobile.
  </Card>
</CardGroup>

## Common use cases

<AccordionGroup>
  <Accordion title="Standard e-commerce (high conversion focus)">
    **Goal:** Clear CTAs that drive sales with maximum visibility

    **Settings:**

    * 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
  </Accordion>

  <Accordion title="Modern/friendly brand">
    **Goal:** Approachable, casual aesthetic with soft visual language

    **Settings:**

    * 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
  </Accordion>

  <Accordion title="Luxury/minimal brand">
    **Goal:** Sophisticated, understated elegance with subtle CTAs

    **Settings:**

    * 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
  </Accordion>

  <Accordion title="Bold/creative brand">
    **Goal:** Strong visual impact with dramatic button presence

    **Settings:**

    * 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
  </Accordion>
</AccordionGroup>

## Related settings

* [Colors](/themes/sahara/theme-settings/colors) - Define button colors in color schemes
* [Typography](/themes/sahara/theme-settings/typography) - Button text uses button font setting
* [Products](/themes/sahara/theme-settings/products) - Mobile Add to Cart style configured separately
* [Common Settings](/themes/sahara/common-settings) - Sections can override button styles

***

**Need help?** See [Shopify's button best practices](https://help.shopify.com/manual/online-store/themes/customize/buttons) or test button changes in preview mode before publishing.