Articles on: Selector

Getting Started in Selector

Getting started

In this article:
Initial Selector—Geo Market Switchers Dashboard
How to start creating selectors?
Steps to create a selector

Initial Selector—Geo Market Switchers Dashboard

When you've installed the app to your store, click on Selector—Geo Market Switchers and open an initial Dashboard with the Selectors tab.

From this tab, you can start creating your selectors. Here, all selectors you have created will be shown. You can filter them by their status - Switched on / Switched off, their title, or the date of creation (oldest first / newest first)

First things first

For the right and flawless work of the app, you need to do some obligatory setting steps.

Open Theme customizer in your Shopify store 🢡 you can find it in your store admin by going to the Online store tab and click on the Th emes 🢡 then click the Customize button. Or, you can just click Open customizer from the Selector—Geo Market Switchers initial Dashboard and go to these settings directly from the app.

In the opened window of the Theme settings tab, find two tabs - Themes and App embeds
In the second one you'll need to turn on the app to make it active in your store.

This way, selectors will be visible in your current store theme. When your theme is changed, you should repeat these steps once again for the new one.

Without this obligatory setting your selectors won't be visible in your store theme. Don't miss this step.

How to start creating selectors?

You can start customizing selectors for your store. For this, in the Selectors tab click the Create selector button to create a new one with your own design. To create a selector, you can either start with clicking on the “Add new” button at the top right on the initial dashboard.

Steps to create a selector:

When you've clicked on the Create selector button, you are offered to choose a pre-designed theme. There are plenty of themes to any taste to choose from. Depending on the selector type, there are different style of themes. Click on Choose theme and go to the Selector's constructor where you can customize all the parameters, like selector type, its position, color scheme, the theme style, etc.

In the Selector Constructor you can set specific parameters. There are two sections of settings – Settings and Theme.

We start from the Settings:

Choose the selector resource. It can be Language, Currency, or Language & Currency.

Set the selector type. There are several types available:

Dropdown - a selector menu when there are several variants that drops down by clicking on the arrow;

Modal – a selector menu that opens like a separate window when we click on it.

IOS - a selector menu that looks like an IOS selection system.

Inline - a selector menu when all the languages & currenies are inline.

Then, change the color scheme of the selector. Multiple colors are at your disposal. Find the appropriate one that fit your taste.

Next, we go to the Position. Choose the most appropriate one for your selector. It's up to you where to place it on your store page It can be:

fixed position - within this position type the selector can be displayed at the bottom or top left / right.

embedded position - the selector will be embedded in your store theme and have an always fixed place (you can choose from Header / Footer and place it on the left, right, or center).

custom position - allows you to create your own code that regulates the selector position and copy it to paste it into the Theme code editor.

Choose the way your selector's content will be displayed for customers. In the Display section select from the three variants - selector with Icons and Names / Only names / Only icons. You can either change the name's writing by checking the box "Short names" that will shorten the selector's language name.

Once the selector resource, type, color scheme, and position are set, you need to customize its theme design. Switch to the next tab Theme where you can see such parameters to customize:

You can set up the necessary colors for selector's Text, Accent, and Background.

in the Typography section choose the appopriate writing - set the selector's default font style and its size as you like.

Next, change the same parameters for selector's accent. When customer will hover the languages to pick up one, its style will change.

Once all the parameters are set, you need to publish your selector to make it visible in your store. So, click on the Publish button on the top to save the changes and set the selector’s title. And it's done - your first customized selector is ready.

Suggestion articles:

Welcome to Selector—Geo Market Switchers

Updated on: 30/11/2022

Was this article helpful?

Share your feedback


Thank you!