Overlay Localization Modal

Theme: Multipurpose Fashion Theme

Help Center > Overlays > Localization Modal

Overview

The Localization Modal lets customers change language or country/region from the announcement bar. It opens as a centered dialog with a grid of options. Selecting an option submits a localization form and reloads the page with the new locale or country.

Where It Appears

Announcement bar — When the store has multiple languages or multiple markets/countries
Trigger buttons show current language or country

Files

File	Purpose
`snippets/localization-modal.liquid`	Modal markup, form, options grid
`assets/announcement-bar-localization.js`	Opens/closes modal, focus trap, keyboard
`sections/announcement-bar.liquid`	Renders trigger buttons + modal (per type)

Structure

Localization Modal (role="dialog", aria-modal="true", data-localization-modal, data-type="language"|"country")
├── Overlay (data-localization-modal-close) — click to close
├── Box
│   ├── Close button (data-localization-modal-close)
│   └── Content
│       ├── Title (e.g. "Select language" or "Select your region")
│       ├── Subheading ("Suggested")
│       └── Form (localization form)
│           └── Grid of options (buttons submit name="locale_code" or name="country_code")

Data Attributes

Attribute	Element	Purpose
`data-localization-modal`	Modal root	Identifies modal
`data-type`	Modal root	`"language"` or `"country"`
`data-localization-trigger`	Trigger button	Opens modal for matching type
`data-localization-modal-close`	Overlay, close button	Closes modal

Behavior

Opening

Customer clicks language or country selector in announcement bar (data-localization-trigger with data-type)
Modal opens for that type (language or country)
Focus is trapped inside modal
Current selection has aria-current="true"

Closing

Overlay click — closes
Close button — closes
Escape key — closes

Selecting an Option

Each option is a submit button
Language: name="locale_code", value="{{ language.iso_code }}"
Country: name="country_code", value="{{ country.iso_code }}"
Form submits to localization form; page reloads with new locale/country

When It Appears

Condition	Result
Multiple languages in Shopify Markets/Languages	Language modal available
Multiple countries in Shopify Markets	Country modal available
Single language + single country	No localization selectors; modal not rendered

Customization

Via Theme Customizer

Announcement bar — Show/hide language or country selector
Languages — Add languages in Shopify Admin > Settings > Languages
Markets — Add countries in Shopify Admin > Markets

Via Code

snippets/localization-modal.liquid — Modal layout, translations
Translation keys: localization.modal_title_language, localization.modal_title_country, localization.suggested, accessibility.close

Accessibility

role="dialog", aria-modal="true", aria-labelledby for title
Focus trap when open
Escape closes
aria-current="true" on current selection

Multipurpose theme documentation