Theme Design for Multi-Markets
Customize and manage page content, styles, and components for different markets (countries or regions). This feature builds on default configurations while allowing granular resets, ensuring precise localization.
|
Notes:
|
Understanding Multi-Market Theme Editor Plan Limits
The Multi-Market Theme Editor is available based on your subscription plan and theme version.
OS 3.0 Themes
For OS 3.0, the maximum number of markets that can be applied to a single theme will vary by plan:
| Plan | Market limit per theme |
| Lite / Retail / Starter / Essential | Up to 3 markets per theme |
| Premium / Enterprise | Unlimited |
If the number of markets applied to a theme exceeds your plan limit, in-product guidance will be displayed within the Theme Editor prompting you to upgrade your plan or adjust market usage.
OS 2.1 Themes
For merchants using OS 2.1 themes who have already been granted access to the Multi-Market Theme Editor, existing configurations remain available.
New access requests for OS 2.1 themes are no longer supported.
Selecting a Market to Customize
- Open the Theme Editor.
- Click the market dropdown list at the top and select the target market to customize (only enabled markets are displayed).
- Choose the page to start configuring.
Configuration Details:
| Default Configuration | Market Selection |
| Define common styles for most markets. Any changes here will apply to all markets using the default configuration. |
Only enabled markets can be selected. To create or enable a market, go to Settings > Markets. Once a market is selected, you can modify its settings based on the default configuration without rebuilding the page from scratch. Changes will apply only to the selected market. |
Configuring Content for a Specific Market
Modifying or Hiding Section/Block Settings
Changes made to a section or block for a specific market will be marked with an indicator.
Example: If a carousel layout is the same across markets, but only the Europe market requires a different subtitle for a special promotion, you can modify it accordingly.
Adding or Removing Sections/Blocks
You can add or remove blocks within a section or entire sections for a specific market. Blocks and sections can also be rearranged via drag-and-drop.
Example: If a promotional banner applies only to the Europe market, you can add a carousel section exclusively for this market.
Syncing Sections to Other Markets
When several markets share largely the same page design, you can finish customizing one market and then copy all the sections in a page's Header, Template, or Footer area to one or more other markets in a single step. There's no need to copy and paste sections one market at a time.
For example, if your Belgium and Luxembourg markets both use similar French-language pages, you can finish the Belgium home page, sync its Template sections to Luxembourg, and then fine-tune as needed.
|
Notes:
|
Understanding Section Sync Rules
What gets synced:
- Source: The market you're currently editing.
- Page: Only the current page. You can't sync from one page to another (for example, from the home page to a product page).
- Area: One area at a time (Header, Template, or Footer), based on which More options icon you click.
- Content: All sections and blocks in that area, including their settings.
- Target markets: You can select more than one. The market you're currently editing isn't listed as a target.
| Important: Syncing completely overwrites the matching area in each target market. Its existing sections and settings are replaced, and the sections and their order will match the source market exactly. Before you sync, check that the target market has nothing in that area you need to keep. |
How to Sync Sections to Other Markets
To sync sections to other markets:
- Open the Theme Editor, click the market dropdown list at the top, and select the market you want to sync from. The current page must already be customized for this market.
- From the page dropdown list at the top, select the page you want to sync, such as Home page.
- In the section list on the left, click the More options icon (⋯) next to the area you want to sync:
- Header: The announcement bar and header.
- Template: The main content sections of the page.
-
Footer: The footer.
| Tip: If you don't see the More options icon, the current page hasn't been customized for this market yet. Switch to a market where it has. |
- From the dropdown menu, click Sync sections to other markets.
- In the Sync to other markets dialog, select the markets you want to overwrite, then click Confirm overwrite.
| Tip: You can select multiple markets. The number selected appears in the top-right corner of the dialog. |
- In the Overwrite content? dialog, click Confirm.
| Important: After you click Confirm, the existing content in the matching area of each selected market is replaced. |
- Switch to each target market, review the synced page, and click Save if everything looks right.
What Changes After Syncing Sections
Syncing copies content once. It doesn't create an ongoing link between markets:
- Source market: The page content stays the same, and the page remains customized for that market.
- Target markets: The matching area now mirrors the source market, and the page is now customized for that market.
- Future edits: Markets don't stay in sync. Later changes in one market don't affect the others.
| Tip: To revert a target market's page to the default configuration, click the More options icon (⋯) next to the matching area and select Reset to default settings. |
Resetting to Default Settings
You can reset a market’s modified settings to match the default configuration at different levels:
| Reset Scope | Action Path | Effect |
| Block/Section Settings |
Click the Reset to default settings icon next to a modified setting. |
The setting will revert to the default configuration. |
| Entire Block/Section |
Click the more options icon in the top-right corner of the block/section settings panel and select Reset to default settings. |
All settings within the selected block/section will be reset to the default configuration. Resetting a section includes its settings, all block settings, the number and order of blocks, and their visibility status. |
| Entire Page | In the section list, click the More options icon (⋯) next to Template and select Reset to default settings. | Resets the entire page, including all sections and blocks, their settings, order, and visibility status, to match the default configuration. |
| Header / Footer | In the section list, click the More options icon (⋯) next to Header or Footer and select Reset to default settings. | Resets all sections and blocks in that area, including their settings, order, and visibility status, to match the default configuration. |
Terminology and Icon Descriptions
Default Configuration
The Default Configuration is not necessarily the same as the Primary Market. When there is only one market, the default configuration aligns with the primary market’s settings. However, when multiple markets are enabled, the default configuration serves as a preset for all markets.
| Note: The primary market can have different settings from the default configuration. |
| Icon | Description |
| Indicates sections, blocks, or settings that differ from the Default Configuration. Modified settings can be reset to the default configuration. | |
| Represents sections or blocks added exclusively to a single market. These settings cannot be reset to the default configuration and can only be removed manually. | |
| Illustrates added, removed, or reordered sections within the current market. |
Managing Multi-Language Content
Content customization within the Multi-Market Theme Editor only supports the default language of the selected market. Multi-language settings for a market cannot be configured directly within the editor.
To manage multi-language content, SHOPLINE provides several methods that you can use individually or in combination, depending on your needs:
For translating store content:
- Go to Settings > Languages to export and import translation files for efficient bulk updates.
- Use the UGC Multi-Language Visual Translator app to customize translations for products, collections, pages, and more (recommended for full control and accuracy).
For editing system default text:
- Edit built-in storefront text (e.g., button labels, system messages) via the Edit default text option under Online Store > Design.
For detailed guidance and recommended setup approaches, refer to the "Best Practices for Setting Up Multi-Language Stores" guide.
Previewing Your Store Across Markets and Languages
After setting up multiple markets and languages, you can preview how your storefront appears to shoppers in each one. When you preview an OS 3.0 theme, a View as bar appears at the bottom of the page, letting you switch markets and languages without leaving the preview.
|
Notes:
|
To preview your store across markets and languages:
- Open your store preview in one of two ways:
- From your admin panel, go to Online Store > Design, locate the theme you want to preview, and click Preview.
- Or, in the left navigation, click the preview icon (the eye icon) next to Online Store for a quicker route.
- At the bottom of the preview page, use the View as bar to switch the view. Click the country/market selector or the language selector, search for the option you want, and select it. The preview updates instantly.
Frequently Asked Questions About Previewing
Q: Can I switch languages in preview if my store has only one market?
Yes. Even with a single market, you can use the language selector in the View as bar to preview your store in each language you’ve set up.
Q: How is the View as bar different from my store’s own language and market switcher?
Both let you switch markets and languages, but the View as bar appears only in preview and applies changes instantly, making it the fastest way to check each market.