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

# Country Drawer

> Configure country/language selector drawer display and content

Country drawer settings control how the country and language selector appears when customers change their region or currency. For international stores, a well-configured selector can increase conversion by 30-40% by showing prices in local currency and preferred language. These settings let you customize the drawer's content visibility and display format to match your store's needs.

## What this controls

Country drawer settings control how the country and language selector appears when customers click to change their region or language. These settings affect the drawer's content visibility and how countries/currencies are displayed within the selector.

<Tip>For international stores, a well-configured country selector can increase conversion by 30-40% by allowing customers to see prices in their local currency and preferred language.</Tip>

## How it works

When customers click the country/language selector (typically in header or footer), a drawer slides out displaying available regions and languages. These settings control:

1. **Title visibility** - Whether the drawer shows a heading
2. **Description content** - Helper text explaining the selector
3. **Display format** - How countries and currencies are shown (names, codes, flags, etc.)

The drawer automatically pulls available markets from your Shopify Markets settings. You control only how that information is presented.

<Note>You must configure Shopify Markets in your admin for the country selector to appear. These settings only control the drawer's appearance, not which countries are available.</Note>

## Getting started

<Steps>
  <Step title="Enable Shopify Markets">
    From Shopify admin → **Settings** → **Markets** → Add at least 2 markets
  </Step>

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

  <Step title="Access country drawer settings">
    Click **Theme settings** → Select **Country drawer**
  </Step>

  <Step title="Configure visibility">
    Toggle title and content display options
  </Step>

  <Step title="Choose display format">
    Select how countries/currencies appear in the selector
  </Step>

  <Step title="Test the selector">
    Preview and click the country selector to see your drawer configuration
  </Step>
</Steps>

## Location

**Path:** Theme settings → Country drawer

## Settings

<Tabs>
  <Tab title="Content Display">
    **Show country drawer title**: Controls whether the drawer displays a heading at the top.

    **Default:** Enabled

    When enabled, the drawer shows a title like "Change country/region" to clearly indicate the drawer's purpose.

    **Recommendation:** Keep enabled for clarity, especially for customers unfamiliar with your store.

    ***

    **Show country drawer content**: Controls whether descriptive content appears in the drawer.

    **Default:** Enabled

    When enabled, the drawer can show helper text explaining that prices, shipping, and availability change based on selected region.

    **Recommendation:** Enable for stores with significant regional differences (pricing, shipping, inventory).
  </Tab>

  <Tab title="Display Format">
    **Country drawer display option**: Choose how countries and languages are displayed in the selector.

    **Options:**

    **1. Country name + ISO code + Currency symbol**\
    Example: `United States (US) - $`

    * Most comprehensive, shows all information
    * Best for stores with many similar country names
    * Helps customers understand currency implications
    * Recommended for international stores with currency variations

    **2. Country name + ISO code**\
    Example: `United States (US)`

    * Clean display with country identification
    * Good balance of clarity and brevity
    * Works well when currencies are obvious from country
    * Recommended for stores with standard currency zones

    **3. Country name only**\
    Example: `United States`

    * Simplest, most readable format
    * Best for stores targeting specific, easily recognized countries
    * Less clutter but may lack clarity on currency
    * Recommended for domestic stores with limited international reach

    **4. ISO code + Currency symbol** ⭐ Default\
    Example: `US - $`

    * Compact format, saves space
    * Good for mobile where screen space is limited
    * Assumes customers recognize ISO codes
    * Recommended for tech-savvy audiences, compact layouts

    **5. Flag only**\
    Example: 🇺🇸

    * Visual recognition, language-independent
    * Works across all languages without translation
    * Some flags are similar and hard to distinguish
    * Recommended for highly visual brands, limited country sets

    **6. Flag + Country name**\
    Example: 🇺🇸 `United States`

    * Combines visual and text recognition
    * Quick scanning with clear identification
    * Largest display footprint
    * Recommended for premium experiences, ample drawer space

    <Warning>If using flags, ensure you have adequate country coverage. Missing flags appear as country codes, creating inconsistent experience.</Warning>
  </Tab>
</Tabs>

## Use cases

<CardGroup cols={2}>
  <Card title="Global E-commerce" icon="earth-americas">
    Selling to 50+ countries with varying currencies and languages.

    **Recommended:** Country name + ISO + Currency (Option 1)\
    Customers need full information to make informed choice.
  </Card>

  <Card title="Regional Store" icon="map">
    Serving 3-5 nearby countries with similar currencies (e.g., EU countries).

    **Recommended:** Country name only (Option 3)\
    Customers familiar with their country, currencies are obvious.
  </Card>

  <Card title="Mobile-First Store" icon="mobile">
    High mobile traffic requiring compact UI elements.

    **Recommended:** ISO code + Currency (Option 4)\
    Saves valuable screen space while providing essential info.
  </Card>

  <Card title="Fashion/Lifestyle Brand" icon="shirt">
    Visual brand identity with design-focused customer base.

    **Recommended:** Flag + Country name (Option 6)\
    Aligns with visual aesthetic while maintaining clarity.
  </Card>
</CardGroup>

## Best practices

<CardGroup cols={2}>
  <Card title="Match display to audience" icon="users">
    Consider customers' familiarity with geography and currencies. International shoppers need full information (Option 1 or 2), domestic + nearby regions benefit from names only (Option 3), tech-savvy audience can use codes (Option 4), visual learners prefer flags (Options 5 or 6). Test with actual customers.
  </Card>

  <Card title="Consider mobile screen space" icon="mobile-screen">
    Country selectors often appear on mobile with limited space. Longer formats (Options 1, 6) may wrap on small screens, compact formats (Options 4, 5) work better on mobile. Test drawer on actual devices, not just browser emulation, ensure touch targets are adequate (minimum 44px height).
  </Card>

  <Card title="Show title for clarity" icon="heading">
    Keep "Show country drawer title" enabled unless you have strong design reasons. Customers immediately understand drawer purpose, reduces confusion about what they're selecting, accessibility improvement for screen readers. Only disable if drawer purpose is obvious from context.
  </Card>

  <Card title="Use content for complex markets" icon="circle-info">
    Enable "Show country drawer content" when prices vary significantly by region, shipping availability differs between markets, inventory is region-specific, or payment methods change by country. Use content to set expectations about regional differences.
  </Card>

  <Card title="Align with currency display" icon="dollar-sign">
    If showing currency in country selector, ensure consistency. Show currency codes in prices if using them in selector, match currency symbol usage (before/after price), keep currency visibility consistent across site. Inconsistent currency display creates confusion and distrust.
  </Card>

  <Card title="Test with actual markets" icon="flask">
    Configure real markets in Shopify and test the selector. Add at least 3-5 countries to see how list looks, include countries with similar names (Korea/South Korea), test countries with different currency symbols, verify flags display correctly. Settings that work with 2 markets may not scale to 20.
  </Card>
</CardGroup>

## Common issues

<Warning>
  **Country selector not appearing?** Check these requirements:

  1. **Markets configured:** You must have 2+ markets in Shopify Settings → Markets
  2. **Theme support enabled:** Verify Markets is enabled in your theme
  3. **Selector positioned:** Add country selector to header or footer section
  4. **Browser cache:** Clear cache or test in incognito mode

  The drawer settings only affect appearance, not visibility. Configure Markets first.
</Warning>

<Tip>
  **Pro tip:** For stores with many markets (20+), use search functionality in the drawer. Enable for 10+ countries and use compact display format (Option 4 or 5) to reduce scrolling.
</Tip>

## Accessibility considerations

* **Screen readers:** Drawer title helps announce drawer purpose
* **Keyboard navigation:** Ensure selector is keyboard-accessible
* **Focus management:** Drawer should trap focus when open
* **Labels:** All options should have clear labels (not just flags)
* **Language:** Drawer title/content should translate based on selected language

<Note>Sahara handles most accessibility automatically, but test with screen reader to verify experience.</Note>

## Performance notes

* Drawer content loads on-demand (not on initial page load)
* Flag images are optimized SVGs for small file size
* Changing country triggers page reload to update prices/content
* Selection is saved in cookie/session for subsequent visits

## SEO considerations

Country/language selectors help with international SEO:

* Proper `hreflang` tags are generated for each market
* Search engines recognize multi-market setup
* Users from different regions see appropriate language/currency
* Helps prevent duplicate content issues across markets

Ensure your Markets are configured correctly in Shopify for best SEO results.

## Related guides

<CardGroup cols={3}>
  <Card title="Layout" icon="table-columns" href="/themes/sahara/theme-settings/layout">
    Configure overall site layout including header/footer
  </Card>

  <Card title="Features" icon="sliders" href="/themes/sahara/theme-settings/features">
    Enable/disable global theme features
  </Card>

  <Card title="Social Media" icon="share-nodes" href="/themes/sahara/theme-settings/social-media">
    Set up social links and regional social accounts
  </Card>
</CardGroup>

## Additional resources

* [Shopify Markets Documentation](https://help.shopify.com/en/manual/markets)
* [Currency Conversion Best Practices](https://help.shopify.com/en/manual/payments/currency-conversion)
* [International Shipping Setup](https://help.shopify.com/en/manual/shipping/international)
* [Multi-Language Stores](https://help.shopify.com/en/manual/markets/languages)