# Overview Get Your Store on the Map with SpiceGems Store Locator [**SpiceGems Store Locator**](https://apps.shopify.com/easy-store-locator-2) app is designed to help Shopify store owners display their physical store locations on their website. It makes it simple for customers to find nearby stores and get directions. It empowers businesses to bridge the gap between online presence and physical stores, delivering a smooth and engaging customer experience ## Key Features * **Interactive Map Options**: Choose from options like Google Maps, Mapbox and Openstreet. * **Search & Filters**: Customers can search by store name or address. * **Customizable Design**: Matches the store locator’s appearance to your website’s style. * **Multiple layouts**: you can switch between layouts to enhance map appearance. * **Floating widget**: The users in the store can access the widget from any page of the store. * **Mobile-Friendly**: Works smoothly on all devices. * **Directions & Details**: Provides driving directions and store info like Store name, address, contact details etc. * **Geolocation feature**: Automatically detect nearby store locations with Browser/IP-based geolocation It improves customer experience, saves time by offering easy location searches, and drives more foot traffic to stores. # Getting started In this section, you can check out the process of activating the app, Map integrations and Adding store locations. ## 1. Installation * **Access the App:** Navigate to the [SpiceGems Store Locator App on the Shopify App Store](https://apps.shopify.com/easy-store-locator-2) and click "Add app" to integrate it into your Shopify store. ## 2. App Activation * Open Store Locator App → click on Activate App Embed
* SpiceGems Store Locator toggle is already enabled → click **Save** (Top left corner)
## 3. Setting Up Your Map Provider * Click on Set up Map Provider
* Select a Map Provider → By default, **Openstreet** is selected because it’s a free service. {% hint style="info" %} For [**Google Maps**](https://help.spicegems.com/esl-easy-store-locator/google-maps) and [**Map Box**](https://help.spicegems.com/esl-easy-store-locator/mapbox-maps), an API key is required. \ You can **buy an API key** from the respective sites to integrate and utilize the map services from these providers. These map service providers have wider options for Map styling. {% endhint %}
To learn more about these Map service providers, check the below links: * [**Google Maps**](https://help.spicegems.com/esl-easy-store-locator/google-maps) * [**Map Box**](https://help.spicegems.com/esl-easy-store-locator/mapbox-maps) ## 4. Add Store Locations * Click on Add Location
* Add location – Fill all the details (shown in the snapshot)
[Click here to learn more about adding locations](/esl-easy-store-locator/add-location) ## 5. Preview the locations in your store The integration and configurations are done. The locations are now added to the map and visible in your store. Click on the Preview button on the App Dashboard to access the map page.
# Map Provider In Map Configuration, allows you to choose a map provider for different map visibility options. Also, you can customize the maps appearance for enhanced visibility of locations on the map. To configure the maps, click on **Set up Map Provider** → select **Map service provider** (according to your requirements). I have selected Openstreet because it’s a free map integration service. For [**Google Map**s](https://help.spicegems.com/esl-easy-store-locator/~/changes/13/google-maps) and [**MapBox**](/esl-easy-store-locator/mapbox-maps) options, you need to **buy an API key** from the respective sites to integrate and utilize the map services from these providers. These options provide a wide range of map styling options, enhancing the overall user experience.
For the Google Maps and MapBox integration process, please check these links: 1. [**Google Map**](/esl-easy-store-locator/google-maps) 2. [**Map Box** ](/esl-easy-store-locator/mapbox-maps) Select Map Style – Standard or Cold (according to your requirement)
This way you will be able to integrate and configure the map in your store. {% hint style="info" %} If you need any assistance regarding the above configurations, please drop an email at **** {% endhint %} # Add Location Add your store’s locations in the App, to mark it on the Map, so users can locate it. Please follow the below steps to add your store locations. ## **1. Locations** **Click on Locations** → Add location
## **2. Enter Store Details** Add the following information as shown in the snapshots below. ### A. Enter Store name and address details
### B. Set Location There are three ways to set a location: * **"Drop Pin as per the Address" button:** It will drop the pin at the nearest location according to the added address. * **Drop Pin:** It will drop a pin on the Map and you need to manually place it to the required location on the map. * **Set co-ordinates:** Add the location co-ordinates - Latitude and Longitude to mark the store location
### C. Contact details Add your store's contact details in these fields
### D. Description Describe your store in a way that highlights its quality, uniqueness, and brand reputation.
### E. Status You can activate or deactivate the store location on the map from the Status Tab.
### F. Marker style You can add or customize the marker styles.
### G. Store Image Upload a store image to show on the map.
## **3. Save the Location** * Once all required fields are completed, click **Save**. * Your new location will now appear in the **Location List** and on the store locator map.
{% hint style="info" %} If you need any assistance regarding the above configurations, please drop an email at **** {% endhint %} # Bulk Import Locations The bulk import feature lets you import your store's location data on the go. You can import as many store location data as you want in the app based on your plan. To check the import data format, you can download the sample CSV. In the CSV, the following fields are mandatory to fill in and should be in the correct format:\ **Store Name** - SpiceGems\ **Latitude** – sample (25.1544)\ **Longitude** – sample (75.8382) Generate [Latitude and Longitude](/esl-easy-store-locator/latitude-and-longitude-coordinates) In the rest of the fields, the information should be in the correct format. * **Address**: Ensure the address includes the **City, Province, Country, and ZIP code** so it is fully displayed in the online store. * **Contact Information**: Provide the **Phone number, Email, and Website** to be displayed in the online store. * **Status**: Set the store’s status as **Active** or **Inactive**. If no status is provided, the store will be displayed as **Active** by default. * **Description**: Add details about the store that you want to be shown on the store page. If incorrect information is entered in any field, an error will occur during file upload. For example, I added an email in an incorrect format in the CSV, it displayed an error while importing in the app.
# Bulk Export Locations To take a backup of your location's data, you can use the Bulk Export feature in the app. This will export the data of all location available in the app in a CSV file.
# More actions In this option, you can preview the locations on the Map and Sync the existing location available in the store. ### 1. Show on Map You can select this option to preview the locations on the Map that are available in the app.
### 2. Sync Locations (Shopify store) You can sync the locations created in the Shopify admin.
These locations can be synchronised in the app to save time.
If you need any help, please feel free to reach out to us at [help@spicegems.com ](Mailto:help@spicegems.com) # Google maps To configure Google Maps services in the app, you need a Google Maps API key. Follow the step-by-step guide to purchase and set up your API key. This process applies to users who have already signed up on the Google Cloud Console. Open the link below to access the Google Cloud Console using your email. Google Cloud Console (Keys and Credentials page) - Step-1: Click on the Select a project (marked in the snapshot). This will open a popup - Click on New Project. (as shown in below snapshots)
Step-2: Enter the project name (e.g., "Store Locator") and click **Create**.
Wait a few moments for the project to be created. Step-3: A page will appear with the **Finish Account Setup** option (as shown in the below snapshot).
Now click on the Finish account setup option, it will take you to the billing page (for adding a billing account). **Step-4:** Add a billing account name and select your country – click on continue\ A credit card is required to be added for a Paid API key generation.
Step-5: Add your credit card details and complete the billing process.\ After this process, you will see an option **setup and enable billing**, click on it to proceed
**After completing the transaction wait for a while to update the same in your Google Cloud account.** Step-6: Click on Google Console in the top right corner - Click on APIs & Services option
Step-7: Click on Credentials - you will find your pre-generated API key there.
If the API key is not available click on Create Credential to generate a new API key. {% hint style="info" %} **Restrict Your API Key** It is highly recommended to restrict your API key before using it with the app to prevent unauthorized access or misuse. [Learn More](/esl-easy-store-locator/google-maps/secure-your-google-maps-api-key) {% endhint %} *** ## **Frequently Asked Questions** **1. Is the API free to use?**\ Google offers $200 in free monthly usage credits. Additional usage incurs charges, which vary depending on the API calls. **2. How can I monitor usage?**\ Visit the **Billing** section in the Google Cloud Console to track your usage and manage costs. **3. What happens if I exceed the free credit?**\ Google will charge your linked payment method for usage beyond the $200 monthly credit. {% hint style="info" %} If you need any assistance regarding the above configurations, please drop an email at **** {% endhint %} # Google maps API Key Generation (For New users) To configure Google Maps services in the app, you need a Google Maps API key. Follow the step-by-step guide to purchase and set up your API key. This process applies to users who have already signed up on the Google Cloud Console. Open the link below to access the Google Cloud Console using your email. Google Cloud Console (Keys and Credentials page) - Step-1: When the user opens the link in the browser, it will show a welcome popup (as shown in the snapshot below). Click on **agree and continue** after accepting the terms and conditions.
Step-2: Click on the Select a project (marked in the snapshot). This will open a popup - Click on New Project. (as shown in below snapshots)
Step-3: Enter the project name (e.g., "Store Locator") and click **Create**.
Wait a few moments for the project to be created. Step-4: A page will appear with the **Finish Account Setup** option (as shown in the below snapshot).
Now click on the Finish account setup option, it will take you to the Account setup page for adding a billing account **Step-5:** This step includes setting up your Google Console account with billing information:
**After adding the card information and verifying the payment details wait for a while to update the same in your Google Cloud account.** Step-6: Now google will continue with the setup with some questions. If not required you can skip them
Step-7: Google will generate an API key for your account. You can copy it and save it somewhere on your system.
Click on Google Console in the top right corner - Click on APIs & Services option
Step-7: Click on Credentials - you will find your pre-generated API key there.
If the API key is not available click on Create Credential to generate a new API key. # Finding your Google Maps API Key If you've already created your Google Maps API Key but need to locate it or verify its existence, follow these simple steps: **Finding Your Existing API Key** ## **1. Open the Google Service Credentials Page** Open the Google Service Credentials page. Ensure you're logged in with the same Google account used to create the API key.
## **2. Select the Correct Project** At the top of the page, use the project selector to choose the project associated with your Google Maps API key.
## **3. Find Your API Key:** Scroll to the **API Keys** section to view a list of all keys associated with the selected project.
## **4. View Your API Key** Click **Show Key** next to the desired key. The key will appear in a popup.
## **5. Copy Your Key** Use the copy icon to the right of the key to copy it and paste it into your application as needed.
If no keys appear in the list, you’ll need to create a new one. [Click here to know how to generate a new Google Maps API Key](/esl-easy-store-locator/google-maps/google-maps-api-key-generation-for-new-users) # Secure Your Google Maps API Key Google offers a robust and secure method for using your API key, making it easy to manage while ensuring it is only utilized on your designated websites. This approach enhances both security and ease of use, providing peace of mind as you integrate your API. If you have already created the API key, follow the below steps to apply the restrictions for utilising it only on specified websites : ### Step 1: Access API Credentials 1. Open **Google Cloud Console**. 2. Navigate to **APIs & Services** → **Credentials**. 3. Locate your **API key** and click on it to edit the restrictions.
### Step 2: Set Application Restrictions 1. In the **Application restrictions** section, select **Websites**. 2. This limits the API key usage to specific domains only.
### Step 3: Add Website Restrictions In the **Website restrictions** field, enter your store domains **without** `https://`, as shown below.
Example entries: ``` example.com *.example.com ``` Required domains for Shopify and the app: ``` example.myshopify.com *.shopifypreview.com *.spicegems.com ``` {% hint style="info" %} **Important notes:** * Replace `example.com` with your actual store domain. * If your store uses a `www` prefix (e.g., `www.example.com)` you do **not** need to add it separately. Using `example.com` is sufficient. {% endhint %} ### Step 4: Apply API Restrictions 1. Scroll to the **API restrictions** section. 2. Select the **Restrict key**. 3. Choose the required **API services** from the list (based on your integration needs).
{% hint style="info" %} Note: Following API services must be added. Geolocation API\ Geocoding API\ Maps Javascript API\ Places API\ Places API (new) {% endhint %} ### Step 5: Save Your Changes 1. Click **Save** at the bottom of the page. 2. Your API key restrictions will now be applied and enforced.
# Google Map may not work correctly If your store map displays an error such as "This map may not work correctly" or "For development purposes only" on a darkened map, it indicates that Google has temporarily disabled your Maps key. This normally occurs due to a billing issue and can be resolved pretty quickly. #### **Why This Happens & How to Fix It** **1. Your Free Trial Ended** When you first set up Google Maps, you got a 90-day free trial or $300 in usage credits—whichever comes first. Once you hit that limit, Google pauses your Maps until you activate billing. Here’s what to do: * Use this link to activate billing. * Log in to your Google Cloud dashboard and look for an *“Upgrade”* button or a banner about your trial ending. * Set up billing alerts or usage limits to avoid surprises. Good news: Even after upgrading, Google gives you $200 in free monthly credits—enough for most store locators with under 10,000 visits a month. **2. No Billing Account Linked** If your Maps key was created before 2018, it might your account is not linked to a payment method. To fix this, you need to link a payment method. **3. Outdated Billing Details** If your card has expired or is invalid, update your payment info in the Billing section of your Google dashboard. #### **Other Causes** For less common issues, refer to [Google’s troubleshooting guide](https://support.google.com/). # Mapbox maps Follow this step-by-step guide to purchase and set up Mapbox map with the app. ## **1. Create a Mapbox Account** 1. Visit the [Mapbox website](https://www.mapbox.com/). 2. Click **Sign Up** and create an account using your email address. 3. Verify your email and log in to your Mapbox account.
## **2. Set Up a Billing Plan** 1. Once logged in, navigate to the **Billing** section from the dashboard. 2. Add a payment method to activate your account. * Mapbox offers a free tier with 50,000 map loads per month. Additional usage will incur charges based on the Mapbox pricing plan. 3. Review and confirm your plan details.
## **3. Create an API Key** 1. Go to the **Access Tokens** section from the Mapbox dashboard. 2. Click **Create a Token**. 3. Enter a name for your token (e.g., "Store Locator Key"). 4. Select **Public Token** if the key will be used for general map features. 5. Under **Scopes**, select the permissions required: * **Map Loads**: Allows maps to load in your app. * **Geocoding**: Enables address search functionality. 6. Click **Create Token**. Your API key will be generated. Copy this key for later use. ## **4. Add the API Key to the** SpiceGems Store Locator **App** 1. Open the **SpiceGems Store Locator App** in your Shopify Admin. 2. Go to the **Map Provider** section. 3. Select **Mapbox** as your provider and paste the API key into the provided field. 4. Save your settings and verify the map loads correctly in the store locator. *** ## **Frequently Asked Questions** **1. Is Mapbox free to use?**\ Mapbox offers a free tier with 50,000 map loads per month. Usage beyond this limit is charged based on their pricing plans. **2. How can I monitor my usage?**\ Log in to your Mapbox account and navigate to the **Usage Dashboard** to track API requests and manage your plan. **3. What happens if I exceed the free tier?**\ Additional charges will apply based on your usage. Review the Mapbox pricing to understand costs. {% hint style="info" %} If you need any assistance regarding the above configurations, please drop an email at **** {% endhint %} # Widget Positioning Manually change the position of the widget on the page. By default, the **SpiceGems Store Locator** app integrates automatically in the store only by activating the **App Embed**. It generates a default URL, **https\://\[your store URL]/pages/store-locator,** on the app dashboard to access the store’s map page. To add the app on any specific page or location on any store page, you can either utilize the **App Block feature or the Embed Code** for manual positioning. These options offer hassle-free integration of the app in any place in the store. 1. App block 2. Embed code ## 1. App block Integration **Step-1**: Open Shopify Admin → Online Store → **Themes** → click on **Customize**
**Step-2**: Click on Dropdown (Home page) → Click on Add section → Apps - click to add - Easy store locator widget on the homepage
**Step-3:** Easy Store Locator widget is added - Click **Save** to apply the changes.
The Easy Store Locator App block has been added and is now ready for use. {% hint style="info" %} You can integrate the Store Locator widget on any page of your store. {% endhint %} ## **2. Embed Code** To integrate the app in a specific location in the store, you can use the Embed code integration method. This method is more complex than using an App Block, as it requires a detailed understanding of theme sections and files for proper integration. You can copy the embed code available in the app and paste it in the theme code where you want to display store locator.
{% hint style="info" %} If you need any assistance regarding the above configurations, please drop an email at **** {% endhint %} # Translate Translate content for App users as well as for Customers. The translation feature offers two options to help localize your app content efficiently: * Translate the App Dashboard * Translate Content based on available store languages (manual content can be added) ### 1. **Translate the App Dashboard** This option allows you to automatically translate the app’s dashboard interface into multiple languages, ensuring that users can navigate and interact with the app in their preferred language. Supported dashboard translation languages: * English * French * Russian * Spanish * Chinese * German
### 2. Translate Content based on available store languages * In the Text and Translation option, add custom content like Search bar content, Location list, and list filter options in the languages of your choice (languages available in your store). The content should be added manually in the app
* Also, you can localize the location information in the required languages (shown in the snapshot below).
Once the store language is switched, the manually added content will be displayed accordingly, offering a localized shopping experience. # Latitude and Longitude Coordinates ### Get the coordinates of a place 1. On your computer, open [Google Maps](https://www.google.com/maps). 2. Right-click the place or area on the map. * This will open a pop-up window. You can find your latitude and longitude in decimal format at the top. 3. To copy the coordinates automatically, left-click on the latitude and longitude. ### Format your coordinates To format your coordinates so they work in Google Maps, use decimal degrees in the following format: * **Correct**: **Latitude – 41.40338, Longitude – 2.17403** * **Incorrect**: Latitude – 41,40338, Longitude – 2,17403 *** **Tips**: * List your latitude coordinates before longitude coordinates. * Replace the comma with a dot in the format. * Check that the first number in your latitude coordinate is between -90 and 90. * Check that the first number in your longitude coordinate is between -180 and 180. # Settings **SpiceGems Store Locator** provides a variety of customizable settings to help you tailor the store locator to your business needs. This guide will walk you through configuring each section of the app’s settings. ## **1. General Settings** Configure the basic behavior of the map and store locator. * **Starting Map Position**: Choose whether the map starts by fitting all locations or focusing on a specific area. * **Geolocation Options**: Enable browser-based or IP-based geolocation to show nearby stores automatically. * **Max Locations**: Set the maximum number of store locations to display. * **Gesture Handling**: Configure map zoom behavior (e.g., scroll or Ctrl+Scroll). * **Distance Units**: Choose kilometers or miles for distance-related settings. * **Zoom Levels**: Adjust map zoom levels for starting position and when clicking a location. ## **2. Map Provider** Select and configure your preferred map provider. * **Providers**: * **OpenStreetMap**: Free and easy to set up. * **Mapbox**: Customizable styles with generous free usage limits. * **Google Maps**: Advanced features like real-time traffic data and multiple map styles. * **Map Styles**: Choose from available styles (e.g., Standard, Cold) to match your branding. * **API Keys**: Add your API key for Mapbox or Google Maps to enable the integration. ## **3. Search Settings** Enhance the search functionality for your customers. * **Search Results Behavior**: * Show results within the bounds of a found address. * Show results within a specified radius. * **Search Bar**: * Enable or disable the search bar. * Add autocomplete suggestions for faster searches. * Restrict searches to specific countries. * **Search Button & Find Me Button**: * Customize the icon, color, and background of the search and location detection buttons. ## **4. Appearance** Customize the visual design of the store locator widget. * **Layouts**: * Configure desktop and mobile layouts (e.g., position of the search bar and location list). * Adjust list height and width. * **Colors**: Update the widget’s accent color to match your store branding. * **Custom CSS**: Add custom styles to further tailor the widget’s appearance. ## **5. Marker Settings** Define how locations appear on the map. * **Cluster Markers**: * Enable marker clustering to group nearby locations for a cleaner map. * Customize the cluster's text and background colors. * Set the zoom level at which clusters deactivate. * **Custom Marker Styles**: * Create and assign unique marker styles for different location types. * **Marker Popups**: * Add, remove, or reorder elements (e.g., name, address, phone number) displayed in the popup when a marker is clicked. ## **6. Location List** Manage and customize how store locations are displayed. * **Visibility**: Enable or disable the location list. * **Sorting Options**: Arrange locations by name, creation date, or custom order. * **List Elements**: * Customize the details shown in the list, such as images, phone numbers, and email addresses. * Adjust display options for desktop and mobile views. ## **7. Floating Widget** Add a floating widget to improve accessibility for your store locator. * **Visibility**: Enable or disable the floating widget. * **Widget Icon**: Select an icon (e.g., GPS, Pin) for the widget. * **Customization**: * Adjust the icon’s size, color, and background. * Set the widget’s position (e.g., bottom-right, bottom-left). * Choose a shape (e.g., circular, semi-circular). ## **8. Installation** Add the store locator to your Shopify store. * **Using Theme Editor (App Block)**: 1. Open your Shopify Theme Editor. 2. Add the **SpiceGems Store Locator** app block to your desired page. 3. Adjust its position (e.g., top or bottom of the page). 4. Save your changes. * **Using Embed Code**: 1. Copy the embed code provided in the app. 2. Paste it into your theme’s code where you want the locator to appear. {% hint style="info" %} If you need any assistance regarding the above configurations, please drop an email at **** {% endhint %} # Tags This article helps you manage Tags, control location filtering behaviour, and customise tag visibility on the Map in your online store. Tags help you categorize and filter locations on the front-end map. For example, you can create tags like Rajasthan, North India, or Outlet and assign them to specific store locations to filter the location on the Map. To add a Tag, please follow the steps below: ### Step 1: In the settings → click on Tags → click on Add Tag
### Step 2: Configure the following options: * Add the Tag name (could be anything of your choice) * Enable visibility * Click Save
### Step 3: Tag is ready for implementation
### Step 4: Click on Locations → click on pencil icon (Action column)
### Step 5: In the Tags block → select the tag → click save.
The tag has now been added to the location. To display the Tag on the Map on the following places, check the links below: * [**Display Tag in Location List**](/esl-easy-store-locator/settings/location-list-tag-and-custom-field) * [**Display Tag on Marker**](/esl-easy-store-locator/settings/markers-tag-and-custom-field) You can verify the tag integration on the store locator page and filter locations on the basis of tags in the store. Test Your Setup with the steps below:\ \- Open your storefront in Normal mode or Private/incognito mode.\ \- Navigate to the Store Locator page.\ \- Apply the tag filter and confirm that the locations with tags are displayed.
If you need assistance with the Tag integration, don't hesitate to reach out to us at [help@spicegems.com](Mailto:help@spicegems.com) # Custom Fields Using this setting, you can add and display additional information to the users on the Map. To configure the setting, follow the steps below: ### Step 1: In the Settings → click on Custom Fields
### Step 2: Click on Add Custom Field
### Step 3: Configure the following fields → click save: * Name of the Custom Field * Choose Field Type - Text Field or Button
The field is now created in the app. You can check the field in the Location section for adding additional information.
To display the Tag on the Map on the following places, check the links below: * [**Display Custom Field (information) in Location List**](/esl-easy-store-locator/settings/location-list-tag-and-custom-field) * [**Display Custom Field (information) on Marker**](/esl-easy-store-locator/settings/markers-tag-and-custom-field) Once the Element is added, it will display the information on the marker in the map.
# Location List - TAG & Custom Field To display the tag and custom field information in your location list, you need to add the Tag element for the required options. ### Step 1: Click on Settings → Location List
### Step 2: Click on Add Element - Add the tags and custom field elements
This will show the tags integrated in the locations on the store locator page in the store.
# Markers - TAG & Custom Field To display the tag/custom field on the Marker in the map, you need to add the Tag/custom field element. ### Step 1: Click on Settings → Location List
### Step 2: Click on Add Element - Add the tags and custom field (whichever is required) * **Example of both Tag and custom field**
This will show the tags and custom field information on the Marker in the Map in your online store.
# FAQs Welcome to our FAQ section! Here, you’ll find clear and concise answers to the most common questions about the SpiceGems Store Locator (SL) App. From installation and setup to rule creation and troubleshooting, this page is designed to help you quickly resolve issues and make the most of the app. If you don’t find the answer you’re looking for, feel free to reach out to our support team—we’re always happy to help. # How to integrate App in the store? To integrate the app, open the App dashboard and follow the process below: * Enable App Embed * Set up the Map provider * Add location To learn more about the integration process, see the link: [Getting Started](/esl-easy-store-locator/getting-started) # How to set up Maps? On the App Dashboard, you will see the option '**Set up map provider**' or you can # Pricing [**Spicegems Store Locator**](https://apps.shopify.com/easy-store-locator-2) offers various pricing plans with different features. You can choose a plan based on your requirements or business needs. *Here are details of the App's plans & pricing.*
PlanCategoryPricing
Free (for developers)Development (Non-transferrable)Free - 1 Location
Shopify BasicBasic, Lite, Starter, & Trial$6.99/month with 50 Locations
Shopify AdvancedAdvanced, Grow, & Retail$14.99/month with 500 Locations
Shopify PlusPlus & Plus Trial$24.99/month with 2000 Locations
# Overview The [Easy Variation Swatches](https://apps.shopify.com/easy-variant-swatches) app is designed to enhance your product variations by replacing standard variant selectors with visually appealing swatches. This approach offers a more engaging and user-friendly shopping experience. ## Key Features: * Automated Variant Image Swatches * Option for Custom Color/Image Swatch Configurations * Combine Similar Products into One with Product Group Feature * Create and Display Custom Options * Configure and Display Variant Descriptions for Each Variant * Swatch Editor for Customizing Swatch Appearance and Styling * Stock (Variant Inventory) Alerts * Product Card Customization Options for the Collection Page ### 1. Product page

swatches on product page

#### [View Product page demo](https://easy-variant-swatches-demo.myshopify.com/products/kurta) ### 2. Collection page

swatches on collection page

#### [View Collection page demo](https://easy-variant-swatches-demo.myshopify.com/collections/swatch) # Getting started The initial setup of the Easy Variation Swatches app is a simple process and takes only a few minutes to complete. Here’s how to get started with the app ## Step 1: Enable App Embed * Activate App embed - click on the **Go to Theme Editor** button

Enable the app embed

* Click **Save** to activate the app.
## Step 2: Select the Theme Script Search your theme - It will save automatically.
{% hint style="info" %} Cannot find your Theme? * If your theme is not available in the theme script section, our team will add it to the app database within 24 to 48 hours. * For integration, our team needs store access to inspect the theme structure and integrate all layouts in the script. * You can raise your ticket or create store access at [help@spicegems.com](https://swatch.spicegems.com/contact/us) {% endhint %} **To configure swatches**, open [Shopify Options Configuration](/evs-easy-variation-swatches/options-configuration) For other **premium features**, check out the links below: * [Product Group](/evs-easy-variation-swatches/product-group) * [Swatch Styles](/evs-easy-variation-swatches/add-new-swatch-styles-and-configure) * [Variant Description](/evs-easy-variation-swatches/variant-description) * [Custom Options](/evs-easy-variation-swatches/custom-options) * [Stock Alert](/evs-easy-variation-swatches/stock-inventory-alert) * [Swatch Customization Editor](/evs-easy-variation-swatches/add-new-swatch-styles-and-configure/swatch-customization-editor) ## Watch the quick integration video # Shopify Options Configure swatches for product and collection pages with enchanting styling options available in the app. In the **Shopify Options**, you can choose the swatch style, type, variant, or custom image/colour for the product options on the product and collection pages. {% hint style="info" %} The style for the **Size** option can be a **Button swatch**, while the style for the **color** option can be an **Image** swatch. {% endhint %} The Configuration of options can be done on the following pages: * Configurations on the Product Page - setting this up will display the customised swatches on the product page * Configurations on the Collections Page - setting this up will display the customised swatches on the collections page The configurations are similar for both pages, so we have created a combined help article link for them. [Configure on the Product and Collections Page](/evs-easy-variation-swatches/options-configuration/configure-on-product-and-collections-page) # Configure on Product & Collections Page Let’s understand the pre-defined swatch style configuration step-by-step for the Product page and Collection page: * On the product page, by default, the Button swatch is enabled. * On the collections page, you need to activate the toggle to enable the swatch functionality.
## 1. Swatch Configurations - Product & Collections * Product - Click on default and choose a swatch style (Circular, Square, etc.) * Collections - Click on default and choose a swatch style (Circular, Square, etc.)
## [2. Select Swatch Type](/evs-easy-variation-swatches/options-configuration/types-of-swatch-configuration) Select the Type - Variant Image or Custom Color, or Image (available for both Product and Collection options) {% hint style="info" %} * Select the [**Variant Image**](https://help.spicegems.com/evs-easy-variation-swatches/options-configuration/pages/GAm9KXZesdoNfQgxUZSj#id-1.-variant-image) option to display the default Variant image on swatches. * Select [**Custom Color/Image**](https://help.spicegems.com/evs-easy-variation-swatches/options-configuration/pages/GAm9KXZesdoNfQgxUZSj#id-2.-custom-color-or-image) to display custom color/image on swatches. {% endhint %}
## 3. Preview option You can open the product directly from the app to check the implemented configurations.
## 4. Visibility * Product Page
* Collection Page
To customize the Product or Collection swatches, go to [Swatch Styles](/evs-easy-variation-swatches/add-new-swatch-styles-and-configure) and customize the styles according to your requirements. {% content-ref url="/pages/VbUQ2EuVQB846uVKRHT9" %} [Swatch styles](/evs-easy-variation-swatches/add-new-swatch-styles-and-configure) {% endcontent-ref %} # Types of Swatch Configuration There are 2 Types of configuration available for both Product and Collection Pages: * **Variant Image** - Allows to display variant images of the product variants on swatches. * **Custom Color/Image** - Allows you to configure the custom color or image that you want to display on variant swatches. {% hint style="info" %} * Select the [**Variant Image**](https://help.spicegems.com/evs-easy-variation-swatches/options-configuration/pages/GAm9KXZesdoNfQgxUZSj#id-1.-variant-image) option to display the default Variant image on swatches. * Select [**Color/Custom Image**](https://help.spicegems.com/evs-easy-variation-swatches/options-configuration/pages/GAm9KXZesdoNfQgxUZSj#id-2.-custom-color-or-image) to display custom color/image on swatches. {% endhint %} ### 1. Variant Image If you have assigned images to variants in the product section, you can choose the **Type** - "Variant Image" to display the variant image in a swatch style.
{% hint style="info" %} Note: If the image is not assigned to any variant, the app displays the first image of the product image gallery on all variants. {% endhint %} You can choose to display from the **"First Image"**, **"Second Image"** or **"Last Image"** to display on the variant swatches.
### 2. Custom Color or Image * Choose a swatch style - either **Circular** or **Square**. Then, under **Type**, select **Color/Custom Image**.
* Click on **Upload Swatch** → Search for the color name, and customize it as needed. You can add the following for your sub-options * **Custom Color (HEX Code):** Enter a valid HEX color code. * **Image:** Upload an image from your system (maximum file size: 1 MB). * **Image URL:** Provide a direct URL to an image. {% hint style="info" %} The configuration will be applied based on the priority. * **Color** *(Lowest priority)* — Applied when the option is enabled and a HEX color code is provided. * **Image** *(Medium priority)* — Applied when the option is enabled and an image is uploaded. * **Image URL** *(Highest priority)* — Applied when the option is enabled and a valid image URL is added. If multiple options are configured, the system will always apply the one with the highest priority. {% endhint %}
* Click **Save** to apply the custom colors to the s**watches.** **If you need any assistance with the configurations, feel free to reach out to** [**help@spicegems.com** ](mailto:help@spicegems.com) # Option Sync Option sync is required whenever a new option is created in the product or any changes are made in the existing options (example, it is deleted, modified, etc) You can sync the options in the product in three ways: * With Product Title * With the product URL * Bulk Sync - Sync all options available in all products in the store.
Add the **product title** or **product UR**L and click on the Sync button to synchronise the updated product options in the app. \ \ To sync the product options in bulk, you can use the **bulk options** sync feature. Once used, it will be deactivated for the next 3 hours. # Product Group The Product Group feature allows merchants to create a set of similar products, making them all accessible on a single product page through Color/image swatches or custom color/image swatches. It is designed to enhance the customer experience by visually grouping and displaying products as different variations. This feature allows merchants to create logical associations between related products or product variations, streamlining the selection process and making it easier for customers to navigate different options on a particular product page. **Check out the demonstration of the Product Group functionality on different pages:** * **Product Group on the Product page**
* **Product Group on Collections Page**
**You can configure the Product groups on the Product and Collection pages.** * [**Configure on the Product Page**](/evs-easy-variation-swatches/product-group/configure-on-product-pages) * [**Configure on the Collections page**](/evs-easy-variation-swatches/product-group/configure-on-collection-pages) ## **Common use cases**: * With this feature, you can easily extend Shopify’s 100-variant limit by grouping together similar products. * With this feature, you can display additional products as swatches with the associated product. {% hint style="info" %} If you face any difficulty please contact us at [**help@spicegems.com**](mailto:help@spicegems.com) {% endhint %} # Configure on Product Pages We have demonstrated the Product Group creation process on the product page with snapshots. For the product group functionality, we have selected the similar T-Shirt products for grouping:
Let's create a Product Group in some simple steps: ### Step 1: Activate on the Product Page Enable the toggle to activate the product group on the product page.
* Click on Product Group → click on "Create Your First Product Group".
### Step 2: Product Details In this section, you are required to fill in the details as shown in the image below: * **Group Name** - Add a name for the group to identify that specific group in the group list. * **Option Name** - Add option name (for eg. color/size) for the group. It will be shown as the label of the group on the product page.
### Step 3: Group Products * **Search for the products** - Similar products or the product that you want to group together. * **Display Name** - Add a display name for each product.
### Step 4: Advance Options (if required) You can change the position of the Product Group widget on the product and collection pages. * **Above the product option**: It will show the product group above the default variant options. * **Below the product option**: It will show the product group below the default variant options.
Click on the **Save** option to create the product group. ### Step 5: Select a swatch configuration You can choose to display different swatch styles on the product page.
The Product Group is ready for use. You can check out the visibility of swatches on the product page in the below snapshot.
# Configure on Collection Pages We have demonstrated the Product Group creation process on collections page with the help of snapshots. For the product group functionality, we have selected the similar T-Shirt products for grouping:
Let's create a Product Group for collections page in some simple steps: ### Step 1: Activate on the Collection Page Enable the toggle to activate the product group on the collection page.
* Click on Product Group → click on "Create Your First Product Group".
### Step 2: Product Details In this section, you are required to fill in the details as shown in the image below: * Group Name - Add a name for the group to identify that specific group in the group list. * Option Name - Add option name (for eg. color/size) for the group. It will be shown as the label of the group on the product page.
### Step 3: Group Products * Search for the products - Similar products or the product that you want to group together. * Display Name - Add a display name for each product.
### Step 4: Advance Options (if required) You can change the position of the Product Group widget on the product and collection pages. * **Above the product option**: It will show the product group just above the default variant options. * **Below the product option**: It will show the product group just below the default variant options.
Click on **Save** to create the product group. ### Step 5: Select a swatch configuration You can choose to display different swatch styles on the collection pages.
The Product Group is ready for use on collections page. You can check out the visibility of swatches on the collection page in the below snapshot.
# Swatch styles Customize and add styling to pre-defined templates and change the swatch position on the page. In the Swatch Style, you can explore the following features: * It has two sections\ \- [Product Page](/evs-easy-variation-swatches/add-new-swatch-styles-and-configure/product)\ \- [Collection Pages](/evs-easy-variation-swatches/add-new-swatch-styles-and-configure/collections) * Pre-defined Templates – Template Library * Swatch Style Editor – My Templates * Product Card Customisation – for the Collections page **Swatch styles for Product and Collection Pages** – You can configure swatch templates for both Product and Collection pages. **Template library** – This option is available in both the Product and Collection sections. In this option, you can choose a template style from pre-defined templates and add it to the My Templates section. **My Templates** – In this option, you can edit and modify the swatch styles according to your requirements. In the swatch editor, you can change the size, border, label, layout, etc. Also, you can add the custom CSS for swatch customization. **Product Card Customization** – This option is available only for the Collections page. You can customise the swatches alignment, Add-To-Cart, Compare at Price, etc., options on the collections page. The process of customizing swatches in both sections is similar and easy to use. ### 1. Pre-defined Templates * **For the Product page**, you can explore the pre-defined templates and click on Add to add them to the [swatch configuration](https://help.spicegems.com/evs-easy-variation-swatches/pages/yCFgwvortD17NG79dtUJ#id-1.-swatch-configurations-product-and-collections) options for the product page.
* **For the Collection page**, you can explore the pre-defined templates and click on Add to add them to the [swatch configuration](https://help.spicegems.com/evs-easy-variation-swatches/pages/yCFgwvortD17NG79dtUJ#id-1.-swatch-configurations-product-and-collections) options for the collections page
Also, you can customise the product card on the collections page.
{% hint style="info" %} If you encounter any difficulty in configuring a new style or changing the position of the swatch on the page, please feel free to contact us at [**help@spicegems.com**](mailto:help@spicegems.com) {% endhint %} # Product You can customize your pre-defined template or choose a new template to customize it according to your requirements. To customize the template, follow the below steps: ### 1. Edit Required Template In Product → Click on the pencil icon to edit the template. \ (To customize any swatch style, you need to edit the associated swatch template)
### 2. Customizable Elements - Editor In the editor, you can choose to edit any element in the customizable elements.
* Click Save to implement the changes. ### 3. Delete Swatch Style You can delete the unwanted styles
### 4. Styles Integrated in Options Click on **Used In** to check for styles used in the options.
### 5. Swatch Positioning - Advance Settings Options for changing swatch positions on the product page * You can change the position by adding appropriate selectors * You can simply choose an option in the **Position** block.
The customization process is done. You can check the updates on the products. # Collections Customize your pre-defined template or choose a new template to customize it according to your requirements. To customize the template for the Collection page, follow the below steps: ### 1. Edit Required Template In Collection → Click on the pencil icon to edit the template. \ (To customize any swatch style, you need to edit the associated swatch template)
### 2. Customizable Elements - Editor In the editor, you can choose to edit any element in the customizable elements.
* Click Save to implement the changes. ### 3. Delete Swatch Style You can delete the unwanted styles from the My Templates section.
### 4. Styles Integrated in Options Click on **Used In** to check for styles used in the options.
### 5. Product Card This option is available only for the Collections page. You can customize the content of the product card available on the collections page.
# Swatch Customization Editor How to customize swatch editor using swatch editor Please see the below video to know how to use the swatch editor and customize the swatch template {% embed url="" %} {% hint style="info" %} If you have any questions related to swatch customization or face any difficulty don't hesitate to get in touch with us at [**help@spicegems.com**](mailto:help@spicegems.com) {% endhint %} # Custom Options The **custom options feature** allows adding personalized options to the products, including additional text fields, image swatches, extra buttons, and more. Additionally, the EVS app enables multiple functionalities, such as customizing Shopify's default swatches by wrapping them with images or using custom colour swatch styles. **What are options and option sets?** The option set is a collection of one or more individual options (like color, material, etc.) that you want to display on the product page. The Option (like color) is an individual option that is displayed on the product.\ **Additionally, with custom options, you can add an exclusion to the restriction of Shopify’s 3 variant options on the product page.** * [**Custom Option Sets**](/evs-easy-variation-swatches/custom-options/custom-option-set) - With an option set, you can create one or more options that you want to add to a specific product or all products. * [**Individual Options**](/evs-easy-variation-swatches/custom-options/individual-option-creation) - With individual options, you can create the options individually and assign them to required option sets. * [**Rules creation based on conditions**](/evs-easy-variation-swatches/custom-options/rule-creation-for-custom-options) - by creating rules, you can display the EVS custom options based on conditions. **Let’s understand Custom Option Creation and usage with an example:** You have **3 options (Color, Style, and Material)** in a product created in Shopify admin. Now you want to add the **4th and 5th options with the functionality of adding custom text and radio buttons.** (shown in the below image).
You can create as many options as you want for a Product. For creating Individual Options, please check this link - [**Individual Option Creation**](/evs-easy-variation-swatches/custom-options/individual-option-creation) # Custom Option Set Creating Custom Options Set in the App Let's understand the process of creating these custom options for the product of your choice or on all products available in the store. * Open EVS App → click on Custom Options → click on Create option set.
### 1. Options Sets creation Enter the Title for Options set (for set identification) → in Add To Product – Choose All products or Specific Products (on which you want to show the virtual options)
### 2. Create a new option Click on Create New Option ([Individual Option](/evs-easy-variation-swatches/custom-options/individual-option-creation)) – select an option (want to display on the product)
### 3. Add the following details 1. Enter the Option name (for your remembrance – Not visible to customers) 2. Add value – This will add the option variants for the product 3. Label (option name) – This is the default label visible on the product for this option. You can change it according to your requirements. 4. Info Text (Tooltip) – You can show the required content for this option in the tooltip on hover. You can make the option mandatory by selecting the Required option 5. Option Description – Display the required caption with the option. 6. In-Cart Name – You can specify the option name which is to be displayed with the **These details can differ according to the different options**
* Click Save to create the option with the Option Set.
[Click here to learn more about Individual options](/evs-easy-variation-swatches/custom-options/individual-option-creation) [Click here to learn more about Rule Creation](/evs-easy-variation-swatches/custom-options/rule-creation-for-custom-options). # Individual Option Creation To create the individual options, follow the below process. **Note: To utilise these individually created options in the products, you need to assign them to the option sets.** ### 1. Option Creation * Open EVS App → Click on **Create Options**.
### 2. Add option details * Choose an option from the list (**We have selected the Radio option) -** A popup will appear to add the required details as shown in the snapshot 1. **Enter the Option Title** (for Identification of the option – Not visible to customers) 2. **Add value** – You can add the multiple required values for this option 3. **Label (option name)** – This is the default label visible on the product for this option. You can change it to suit your requirements. 4. **Info Text (Tooltip)** – You can show the required content for this option in the tooltip on hover. You can make the option mandatory by selecting the **Required option (This is optional)** 5. **Option Description** – Add the required caption to display it to the users for information. 6. **In-Cart Name** – You can specify the option name which is to be displayed in the cart 7. **Show Selection Next To Option Label** – The selected option value will be displayed next to the label.
* Click **Done**.
Click on **Save** to apply the changes in the Option set. ## Process to assign Individual Option to Option set ### Step 1: Create an Option Set or edit an existing set. To integrate the option with a product or all products in the store, **you need to create Option sets and assign the Individual option to that option set.** * Click on **Create Option Set**
### Step 2: Assign Individual option * Enter the **Title for the Options set** (for identification of the option) * In **Add To Product** – Choose **All products or Specific Products (on which you want to show the virtual options)** * Click on **Add Existing Option** - to select the individually created options.
* **Select the available options** and click **Add**.
* The individual option is added to the **Option set** - click **Save** to apply the changes.\ You can edit or delete the options from the set.
The options set is ready for use. [**Click here for the Rule Creation Process**](/evs-easy-variation-swatches/custom-options/rule-creation-for-custom-options) **If you need any assistance regarding the above configurations, please drop an email at ** *** # Rule Creation for Custom Options **Rule creation** - **This is an optional functionality (not mandatory)** and can be utilised on the basis of conditions. If you want to display the options conditionally on the product variants, you can utilize this option to add the required conditions. This functionality allows you to display the EVS app's custom variants conditionally, both in conjunction with Shopify Options and the EVS app's Custom options. **Step-1**: Click on **Create Rule**
**Step-2**: Add the details and select conditions according to your needs. 1. **Rule Name** – could be anything of your choice. 2. **Condition** – You can choose Any or All according to your requirement 3. **Add Condition for EVS options or for Shopify Options –** by selecting any options, you can control the visibility of the EVS app’s secondary/other options based on the conditions. 4. **Add Action** – you need to add a condition that is applied based on the selection of the previous option **(EVS options or Shopify Options – whichever is selected with the specified condition)** 5. Click done
**Step-3**: Click **Save** to finalize the changes. The functionality will work as shown in the attached video.
**If you need any assistance regarding the above configurations, please drop an email at ** # Variant Description This feature allows adding custom descriptions to the Product variants/combinations of variants. You can display custom descriptions like shipping information, variant details and various other information related to the individual product variants. **To Configure the description for product variants, follow the below steps:** ## 1. Integrate Variant Description Variant descriptions can be integrated into the product page in the following ways: * [App block](/evs-easy-variation-swatches/variant-description/app-block) * [Snippet (manual) integration ](/evs-easy-variation-swatches/variant-description/snippet-manual-integration)
## 2. Create Description In **Variant description** **→** click on the “**+ Create”** button
## 3. S**elect a product** **Search** and **select a product** then click on the **“Next”** button
{% hint style="info" %} N*ote: you can search for products either **by name** or **by URL*** {% endhint %} ## 3. Add description to variants Select a variant and add the required description.
{% hint style="info" %} **Please note that you can use the Text Editor or Inner HTML options for adding the description content** {% endhint %} * Click on the "Save" button to apply the changes ## Use case: Showing different shipping times or availability information, providing variant sizing information, displaying variant materials or fabrics, and differentiating between different kits or combo packages⁠—there are many use cases. {% hint style="info" %} In case of any queries, feel free to reach out to us at **** {% endhint %} # App block ### A. App Block Integration * Click on the App block option in the app
* **Custom Option** block will be displayed in your theme (drag to change the position) → click **Save**
The variant description is now active on the product page. ### B. Visibility on Product
# Snippet (Manual) integration You can integrate the description position according to your requirements. ### A. Manual integration - (Critical method) * Copy the snippet from the app
* Add the Snippet in the Shopify Admin → Themes → click on '...' three dots → Edit code
* Find the Product form file in the theme and add the copied code in it on the required location → click Save.
{% hint style="info" %} *We have performed the integration on the Dawn theme. The process may differ according to different theme structures.* {% endhint %} The snippet is now added and the variant description is working as required. ### B. Visibility on Product
In case you need assistance with the manual integration, reach our to us at **** # Stock Alert Using the EVS App's Stock Alert feature, you can display the availability of the product. The stock alert displays information about the level of inventory based on the configurations in the app. The stock Alert functionality works on the **Product Page** and on the **Collections page**. The stock alert feature has two options: * Stock message - To display available inventory of the variants * Low Stock Alert - To show low stock alert if the inventory is low Let's understand the feature configuration and functioning on the products in the store. ## 1. Activate Stock Alert You can activate the stock alert on the following pages: * Product page * Collection page
## 2. Configure Alert Message ### - Stock Alert Message Activating the option displays the available inventory information of the selected variant. To display the available quantities of the variant, you need to add the key - \[inventory-quantity] in the message field.
### - Low Stock Alert Message Activating the option displays the Low stock alert if the quantity goes below the threshold limit. You can set the minimum threshold quantity to display the alert if the inventory goes below that limit
{% hint style="warning" %} Please note that the "Low Stock Alert" will replace the "Stock Message" based on your selection. {% endhint %} ## 3. Positioning of Alert You can configure the position of the alert on the product and collections page with pre-defined options or manually add the app block (only for the product page).
## 4. Visiblity in the store * Product page
* Collection Page
If you want to customize the visibility of the alert, please feel free to reach us at **** # Translation Translate Labels on Collection page, Product Group, Custom Option etc. With this feature, you can manually translate labels into other languages that are available in your store. For example, you want to display Add To Cart in German. For that, you can add the translated content for the same in the app. ### 1. Collection Product Form Editor You can change the labels for product cards available on the collection page in the available languages. These are the following labels for which you can add the translations: * Add To Cart * Choose Variant * Sold Out * Sale Tag * Sold Out Tag * Option Name * Product Min Price
### 2. Product Group In this option, you can translate the option and its variant names into the available languages.
### 3. Custom Option You can add translations for the custom options created in the app. * Custom Options
* Error Messages
### 4. Stock Alert In this option, you can translate the Labels of stock alert badges into the available languages. * Stock Alert * Low Stock Alert
# Integration Test the EVS app functionality on Published or Unpublished themes In this section, you can test the EVS app functionality on your unpublished theme without interrupting your live theme. ## Unpublished Theme: ### Step 1: **Choose Theme** * Go to **EVS App → Integration → Unpublished Theme**. * Select your unpublished theme from the dropdown.
### **Step 2: Enable App Embed** * Click **Go to Theme Editor**.
* In Shopify Theme Editor → **App embeds** → Toggle **EVS ON**. * Save changes.
### **Step 3: Select Theme Script** * Back in EVS → under **Step 2**, select the script matching your theme (e.g., Dawn). * Click **Save**.
### **Step 4: Preview & Test** * Click on the Preview Icon in the unpublished theme section. * Check swatch functionality on the **Product** and **Collection** pages.
{% hint style="info" %} **If Issues:** * Confirm app embed is ON and correct script is saved. * Clear browser cache/incognito test. * If the *theme is not listed*, click on Contact Us or send an email to **.**
{% endhint %} # Settings Enable or Disable the app, customize swatches or enable translation for swatches. ## 1. Global Switch To enable or disable the app in your store, you can use this Global switch.
## 2. Translated Options If you have created product options in multiple languages, you can enable the "Show Swatches For Translated Options" setting in the app for seamless swatch integration in your store.
This setting will display the swatches on the options for which you have added translations in store in different languages. Please check the pictures below for clarity. * Options in the default language - English.
* Options in the translated language - French.
If you have any questions, please feel free to contact us at [help@spicegems.com ](mailto:help@spicegems.com) ## 3. Custom CSS You can add the CSS for customizing the styling of the swatches here.
# FAQs {% content-ref url="/pages/Uwigj0zkWSUATB790mak" %} [How to integrate the app?](/evs-easy-variation-swatches/faqs/how-to-integrate-the-app) {% endcontent-ref %} {% content-ref url="/pages/yA4jQUvd9ZSDF0Cquphs" %} [How to choose a swatch style?](/evs-easy-variation-swatches/faqs/how-to-choose-the-swatch-style-to-display-variant-options) {% endcontent-ref %} {% content-ref url="/pages/rIVovRYKJK668QVlMU9v" %} [How to display variant images as swatch?](/evs-easy-variation-swatches/faqs/how-to-show-automated-variant-images-as-swatch) {% endcontent-ref %} {% content-ref url="/pages/LOaNZeDPPTNSULOGZLTs" %} [How to setup custom images/color in swatches](/evs-easy-variation-swatches/faqs/how-to-setup-custom-images-color-in-swatches) {% endcontent-ref %} {% content-ref url="/pages/aUM2AY0Llf6YFGGMbGfs" %} [How to modify the swatch appearance?](/evs-easy-variation-swatches/faqs/how-to-modify-the-swatch-appearance) {% endcontent-ref %} {% content-ref url="/pages/hQloj9UHHvcmXn4zdq2L" %} [Does the app have any default swatch options?](/evs-easy-variation-swatches/faqs/does-the-app-have-any-default-swatch-options) {% endcontent-ref %} # How to integrate the app? * Activate App Embed * Select your theme Script * Click Save For more information, click on [Getting Started](/evs-easy-variation-swatches/getting-started) for the complete integration process. # How to choose a swatch style? Open Shopify Options Configuration → Select a swatch style → Click save. To learn more about swatch styles, check the [Shopify Options configuration](/evs-easy-variation-swatches/options-configuration) article. # How to display variant images as swatch? In Shopify Options configuration → select a swatch style → Variant Image → click Save. # How to setup custom images/color in swatches Setup custom image/color in swatch for product and collection. Open Shopify Options Configuration → Select a swatch style → In Type, select Custom Color/image → Upload swatch. For further configurations, check the link - [Custom Color/Image](https://help.spicegems.com/evs-easy-variation-swatches/faqs/pages/GAm9KXZesdoNfQgxUZSj#id-2.-custom-color-or-image) # How to modify the swatch appearance? You can edit the required swatch style according to your preferences. Open Swatch styles → Click on Product or Collection (on whichever page, the customization is required) → Click on the pencil icon in the required swatch template block to edit.
# Does the app have any default swatch options? By default, the app displays button swatches on the Product pages. On the collections page, you need to activate the settings in the Shopify Options configuration to display button swatches. # Workarounds and Customizations At **Easy Variation Swatches**, we understand that every store has unique needs. That's why we offer support for specific customisation and integration requests tailored to your store's requirements. Whether you need a custom feature, theme-specific adjustments, or integration with a third-party app, our team is here to help. We evaluate each request individually to ensure feasibility and compatibility with your existing store setup. ### **What We Can Help With:** * Custom styling and layout modifications * Theme-specific compatibility fixes * Advanced swatch behavior or logic * Other unique use cases related to product variants and swatches ### **How to Get Started:** To request a specific customization or integration: 1. **Contact Us** a*t* [***Help@spicegems.com***](mailto:help@spicegems.com) with a clear description and a mockup of your requirement. 2. Share store access if needed (we may request collaborator access). 3. Our team will review the request and confirm feasibility. {% hint style="info" %} ***Please note that some requests may not be possible due to limitations of the Shopify platform or the way the app is built. However, we’ll always do our best to explore alternative solutions or workarounds that can help meet your needs.*** {% endhint %} Have a unique idea in mind?\ **Reach out to us — we're happy to explore it with you!** # Re-stock Information Manually notify the customer about product restocking upon their request. We have a workaround available to help you manually notify customers about product restocking. This method allows you to collect customer information when a product is out of stock and follow up with restocking updates. #### Required Resources: * **Shopify Forms App** (Free to install) * **Easy Variation Swatches (EVS) App** #### Workaround Integration Steps 1. **Create a Restocking Form in the Shopify Forms App (at your end)**\ Use the Shopify Forms app to create a custom form that captures the necessary customer information (e.g., name, email, product interest). You can tailor the fields based on your specific requirements. 2. **Display a Notify Button Using EVS App (performed by our team manually)**\ We will configure the EVS app to display a “Notify Me” button on out-of-stock product variants. This process is completely handled by our development team and may require access for the same. #### How It Works: 1. **Form Visibility**\ When the Notify me button is clicked, the form will open that you created in the Shopify Forms app. 2. **Customer Submits the Form**\ Customers interested in restocking updates can fill out the form and submit their details. 3. **Receive Customer Information**\ The submitted information will be delivered directly to your registered email address associated with the Shopify Forms app. 4. **Manually Notify Customers**\ Once the product is back in stock, you can contact the customers who submitted the form and provide them with restocking information. {% hint style="info" %} ***Note:*** *The above process requires store access to review the feasibility of implementation. Please share the Collaborator's code, so we can send the access request from* [*help@spicegems.com*](mailto:help@spicegems.com) {% endhint %} # Videos ## App Uninstallation {% embed url="" %} # Pricing [Easy Variation Swatches](https://apps.shopify.com/easy-variant-swatches) pricing is based on the **Shopify store’s subscription plans**, and the plan is automatically activated as per your current store's subscription plan when you install the app. *Here are details of the App's plans & pricing.* | Plan | Category | Pricing | | --------------------- | ------------------------------- | ------------ | | Free (for developers) | Development (Non-transferrable) | Free | | Shopify Basic | Basic, Lite, Starter, & Trial | $7.50/month | | Shopify Advanced | Advanced, Grow, & Retail | $14.99/month | | Shopify Plus | Plus & Plus Trial | $19.99/month | {% hint style="info" %} Good to know: The app offers a [21-day free trial](https://apps.shopify.com/easy-variant-swatches) period, including all premium features. {% endhint %} # Privacy Policy This Privacy Policy describes how personal information is collected, used, and shared when you install or use the App in connection with your Shopify-supported store. **Information the App Collects** When you install the App, we are automatically able to access certain types of information from your Shopify account: **• Access Store Information** The App access store information . This permission Includes parameters like Store name, Address, Support Email, Phone No. etc. **• Access Products – Collections** We access Product and Collections so that merchants can define relationship between the products. **How Do We Use Your Personal Information?** We use the personal information we collect from you and your customers in order to provide the Service and to operate the App. Additionally, we use this personal information to: Communicate with you; Optimize or improve the App; and Provide you with information or advertising relating to our products or services **Sharing Your Personal Information** We do not share your personal information with anybody. We store your personal information to provide described app services only. **Rights of Individual if they are European resident.** We are not sharing any information of any individual other than Shopify Store owner. Whenever merchant un-installs the app, we remove their product information and the personal information of store from our servers within 14 days. So, if any Store owner wishes to remove their personal information, they will have to remove the app. **Data Retention** Data Retention When you place an order through the Site, we will maintain your Orders Information for our records unless and until you ask us to delete this information. **Changes** Changes We may update this privacy policy from time to time in order to reflect, for example, changes to our practices or for other operational, legal or regulatory reasons. **Contact Us** Contact US for more information about our privacy practices, if you have questions, or if you would like to make a complaint, please contact us by e-mail at **** # Overview [GeoIP Country Redirect](https://apps.shopify.com/geoip-country-redirect) app helps you to manage traffic on your multiple stores. The GeoIP Country Redirect app by SpiceGems is designed to enhance the shopping experience by directing customers to the appropriate regional store based on their Country location (IP Address). By implementing the GeoIP Country Redirect app, store owners can offer a personalized shopping experience, directing customers to the most relevant version of their store based on geo location, thereby improving engagement and conversion rates. ## Key Features: * **Country Redirect:** Redirect users based on their Country Location and IP address. * **Country Blocker**: Restrict access to the initial store from any specified country. * **GeoIP Switcher** – (Shopify Market Switcher & Manual Switcher): Provides customers with the option to manually switch to their native store, URL or preferred language and currency, enhancing user convenience. * GeoMarket Redirect: Integrates with Shopify Markets and redirects users with flexibility to choose an option in the popup or force redirect to their native market. * **Rule-Based Redirection:** configure multiple rules with different redirect types (popup or auto-redirect) * **Automatic Redirection:** Force redirects customers to different stores according to their IP address. * **Display Popup/Banner:** Offers a customizable popup or banner, allowing users to choose whether they wish to be redirected, thereby enhancing user experience. * **Popup Editor**: offers customizing popup templates including content, styling etc. * **URL Mapping:** Redirect users from an old destination URL to a specific new destination URL. * **UTM parameter forwarding** - Provide the option to forward already existing custom parameters (tracking ads parameters) to the destination URL * **Whitelist IPs and URLs** - Prevent the rule from triggering for particular IP addresses or on specific whitelisted pages in the app. * **Google Bot Exclusion:** Ensures that search engine bots are not redirected, allowing all versions of the store to be properly indexed by Google, which is crucial for search engine optimization. ### To enable the app, click on [Getting Started](/geoip-country-redirect/getting-started) for the complete process. # Getting Started To get started with the GeoIP Country Redirect app by SpiceGems, follow these steps: ### 1. Installation * **Access the App:** Navigate to the [GeoIP Country Redirect page on the Shopify App Store](https://apps.shopify.com/geoip-country-redirect) and click "Add app" to integrate it into your Shopify store. ### 2. App Activation * Activate App embed - click on the **Go to Theme Editor** button
* Click **Save** to activate the app.

Step 1

* App Embed is now active
### [3. Redirect Rule Creation](/geoip-country-redirect/country-redirect/create-redirect-rule) * Click on Country Redirect → click on + Create Redirect Rule * Add Rule name and Visitor Countries * Add Destination store URL and Store name * Choose a Redirect Type (Popup or Auto-redirect) * Configure [Whitelist](/geoip-country-redirect/country-redirect/rule-based-whitelisting) (If required) * Configure [UTM Parameters](/geoip-country-redirect/country-redirect/utm-parameters-in-the-geoip-country-redirect), [Page Specific Redirect](/geoip-country-redirect/country-redirect/page-specific-redirection) or [URL Mapping](/geoip-country-redirect/country-redirect/url-mapping) (If required) ### 4. Additional Premium Features * [GeoMarket Redirect](/geoip-country-redirect/geomarket-redirect) - Allows you to redirect users to their regional markets based on their Language, Currency and Browser language. * [GeoIP Switcher](/geoip-country-redirect/geoip-switcher) - Allows you to integrate a switcher in your store for manual store switching. * [Country Blocker](/geoip-country-redirect/country-blocker) - Allows you to block unwanted countries from accessing your store. * [Relative Redirect](/geoip-country-redirect/country-redirect/relative-redirect) - Allows you to redirect visitors to the exact same page on the destination store (if available). * [Popup Editor](broken://pages/CkPSHzElMiZRipURh10f) - Allows you to customise and match the styling of the Redirect Popup/Banner according to the store. * [Global Whitelist](/geoip-country-redirect/general-settings/global-whitelist-settings) - Allows preventing redirection in a store for a specific page or an IP address. [Click here to learn more about the App Functionality](/geoip-country-redirect/general-features/setup-the-app-for-redirection) [Click here to check the foundation of the redirect rule](/geoip-country-redirect/general-features/interpretation-of-a-redirect-rule) {% content-ref url="/pages/ywgu09FJODNpA1rFExdM" %} [Country Redirect](/geoip-country-redirect/country-redirect) {% endcontent-ref %} {% content-ref url="/pages/3QyXPrYh8tMkzvVvpd4h" %} [Country Blocker](/geoip-country-redirect/country-blocker) {% endcontent-ref %} {% content-ref url="/pages/PAHVX4vc7cCl6uBH494w" %} [GeoIP Switcher](/geoip-country-redirect/geoip-switcher) {% endcontent-ref %} {% content-ref url="/pages/3rTNNZxSbGzYoqW5lwrC" %} [GDPR Info Bar](/geoip-country-redirect/gdpr-info-bar) {% endcontent-ref %} # Country Redirect ## 1. Feature - Overview The **Country Redirect** feature enables you to redirect visitors from your primary domain to a destination domain based on their country's IP address (geo-location), using rules configured in the app. With the **GeoIP app**, you can: * Redirect users from one **domain** to another * Route traffic to a **subdomain** or a **specific page URL** * Set up **multiple redirect rules** to manage global traffic effectively ## 2. Redirection Modes You can configure redirection in two ways: 1. **Auto-Redirect (Forced Redirection)**\ Automatically redirects visitors to their regional store without prompting. 2. **Display-Based Redirect (Popup/Banner)**\ Shows a popup or banner notifying users about their regional store. Visitors can choose to stay on the current site or go to the suggested store. ## 3. Key Features * Geolocation-based redirection (Country IP detection) * Support for multiple redirection rules * Flexible redirection options: Auto-redirect or Popup/banner * Template editor for customizing the Popup/Banner * Redirect to domains, subdomains, or specific page URLs * Whitelist IPs and URLs to bypass redirection Let's [**create a redirect rule**](/geoip-country-redirect/country-redirect/create-redirect-rule) to redirect visitors to their respective stores. # Create Redirect Rule The Redirect Rule feature allows you to create country-based redirections, guiding visitors to their appropriate regional store. Please follow the steps below to create a redirection rule based on a visitor's country: * Open the **GeoIP app** * On the Dashboard - click on **Create Rule - Country Redirect**
### Step 1: General Settings * **Rule Name**: Enter a name for your rule. * **Countries**: Select the countries to which the rule should apply.
### Step 2: Redirect Settings * **Destination URL**: Enter the URL where visitors should be redirected. * **Store Name**: Provide the name of the destination store. * [**Relative Redirect**](/geoip-country-redirect/country-redirect/relative-redirect) (Optional): Enable this if you want to retain the same path/URL structure during redirection. [Learn more about Relative Redirect and Language Consideration](/geoip-country-redirect/country-redirect/relative-redirect/language-consideration-with-relative-redirect)
{% hint style="info" %} **Note**: If you are redirecting to a **subfolder or the same domain URL**, the redirection will occur **only once per browser session**.\ **Example**: If you redirect U.S. visitors to `/en-us` (Subfolder), redirect will trigger only once per session. {% endhint %} ### Step 3: Redirect Type Choose one of the following redirection types: * **Display-Based Redirection**:\ Shows a popup/banner allowing visitors to choose whether to stay or redirect. * **Auto Redirection**:\ Automatically redirects visitors to the destination without any prompt.
{% hint style="info" %} If you choose **Display-Based Redirection**, you can: * Choose from existing templates, or * Create a new one. [How to create, clone and delete a template?](/geoip-country-redirect/country-redirect/create-clone-and-delete-template) {% endhint %} ## Step 4: Whitelist Exclude specific IP addresses (only [Public IPv4 supported](https://whatismyipaddress.com/)) or URLs from redirection.
[Click here to learn more about rule-based whitelisting](/geoip-country-redirect/country-redirect/rule-based-whitelisting) {% hint style="info" %} If you want to whitelist for all rules, you need to enable the global whitelist setting and add the required IP addresses or URLs in the global whitelist setting Go to **Settings** → [**Global Whitelist Settings**](/geoip-country-redirect/general-settings/global-whitelist-settings) {% endhint %} ## Step 5: Advanced Settings This setting consists of 3 functionalities: * [**UTM Parameters**](/geoip-country-redirect/country-redirect/utm-parameters-in-the-geoip-country-redirect): You can add the parameters manually in the app for tracking or activate the Enable UTM Forward to forward existing custom parameters (e.g., tracking parameters from ads) to the destination store. * [**Page Specific Redirection**](/geoip-country-redirect/country-redirect/page-specific-redirection): With this feature, you can activate the page-specific redirection to trigger redirection from specific pages in the store. * [**URL Mapping**](/geoip-country-redirect/country-redirect/url-mapping): With this feature, you can redirect users from an old URL to a New URL, if the old URL page is not available in the store.
The rule is now created in the app and is ready for use.
In case of any queries, please feel free to reach out to # Exception-Based Redirect Rule An Exception-Based Redirect Rule allows you to redirect visitors from all countries except specific countries. For example, if you want to redirect all visitors to the global store except **Canadian visitors**, you can create an exception based rule with all other countries except Canada. For an exception-based redirect rule, [create a redirect rule](/geoip-country-redirect/country-redirect/create-redirect-rule), and add all the visitor countries except the country that you don't want to redirect. In the below snapshot, we have created a rule and added all countries in the "**Visitors Country**" except Canada. ### 1. Add all countries
### 2. Remove countries that you don't want to redirect Not added Canada
{% hint style="info" %} In the app, you can add alpha-2 codes to add multiple countries in bulk: To add the countries in the rule, you need to add **alpha-2 country codes** in **comma-separated** (e.g., `US, UK, FR, DE`). * You can find the [alpha-2 codes for all countries here](/geoip-country-redirect/general-settings/alpha-2-country-codes). {% endhint %} # Relative Redirect The relative-Redirect functionality in the app **redirects the visitors to the exact same page path on the destination URL (if available).** ***For Example:*** *A rule is created in the app to redirect Canadian visitors from the Global store "line-item.myshopify.com" to the Canadian store "sg-localapp.myshopify.com"* *If visitors from Canada visit the URL `line-item.myshopify.com/products/shirt. With the relative redirect functionality, they` will be **redirected to the same page path on the destination store (Canadian store)**`sg-localapp.myshopify.com/products/shirt.`* {% hint style="info" %} **Please note that in case of a** [**Same-domain URL**](/geoip-country-redirect/general-faqs/what-is-a-same-domain-url) **with relative,** when you create a destination rule using the same domain URL, the redirect will occur only once per browser session. \ For example, if you have a subfolder for the United States market (`/en-us`) and configure a rule in the app with the destination URL `demo-492.myshopify.com/en-us` to redirect US visitors accordingly, the redirect will trigger only once during the current session. {% endhint %} **You can enable this feature in the rule to redirect users to the exact same page (if available) on the destination store.**
{% hint style="info" %} If you are using Shopify markets or translations, then you can manage the locale in the URL while redirecting. [Click here to learn more about preserving language code functionality](/geoip-country-redirect/country-redirect/relative-redirect/language-consideration-with-relative-redirect) {% endhint %}
{% hint style="info" %} Please note that if the same page path/URL is not available on the destination store, it will display a 404 page. {% endhint %} # Language Consideration with Relative Redirect Preserve Language-Code (Locale) The Language Consideration feature is ideal for store owners who have configured Shopify markets for multiple countries or regions and want to redirect visitors from the initial store's specific page URL to the exact same page URL on their native store, with the appropriate language code. You can utilize the feature in 2 ways: 1. [Default](https://help.spicegems.com/geoip-country-redirect/country-redirect/relative-redirect/pages/ZFJZQ0Rxp5FwZKaE4MGw#id-1.-default) 2. [Locale from Redirect URL](#id-2.-locale-from-redirect-url)
Let's understand the functionality of both options with the Relative Redirect feature: ## 1. Default Preserve language code with relative redirect has certain cases which depend on the language code availability in the landing URL and "Redirect To Store URL (Destination URL)" in the app. ### 1.1 Language code available in the landing URL and Redirect To Store URL
Landing URLRedirect To Store URLFinal Redirection URL
shop-one.com/enshop-two.com/frshop-two.com/fr
shop-one.com/en/productshop-two.com/fr/productshop-two.com/fr/product
### 1.2 Language code available only in the landing URL | Landing URL | Redirect To Store URL | Final Redirection URL | | --------------- | --------------------- | --------------------- | | shop-one.com/en | shop-two.com | shop-two.com/en | ### 1.3 Language code available only in the Redirect To Store URL | Landing URL | Redirect To Store URL | Final Redirection URL | | -------------------- | ----------------------- | ----------------------- | | Shop-one.com | shop-two.com/fr | shop-two.com/fr | | shop-one.com/product | shop-two.com/fr/product | shop-two.com/fr/product | ## 2. Locale from Redirect URL In the **Locale from Redirect URL** functionality, the language code will be considered as per the availability in the destination store "Redirect To Store URL" only: ### 2.1 Language code available in the landing URL and Redirect To Store URL | Landing URL | Redirect To Store URL | Final Redirection URL | | ----------------------- | ----------------------- | ----------------------- | | shop-one.com/en | shop-two.com/fr | shop-two.com/fr | | shop-one.com/en/product | shop-two.com/fr/product | shop-two.com/fr/product | ### 2.2 Language code available only in the landing URL | Landing URL | Redirect To Store URL | Final Redirection URL | | --------------- | --------------------- | --------------------- | | shop-one.com/en | shop-two.com | shop-two.com | ### 2.3 Language code available only in the Redirect To Store URL | Landing URL | Redirect To Store URL | Final Redirection URL | | -------------------- | ----------------------- | ----------------------- | | Shop-one.com | shop-two.com/fr | shop-two.com/fr | | shop-one.com/product | shop-two.com/fr/product | shop-two.com/fr/product | In case of any queries, please feel free to reach out to [**help@spicegems.com**](mailto:help@spicegems.com) # Redirect Templates Creating and Managing Popup/Banner Templates: ### A. Creating Templates You can create templates in two ways: ### **Process 1: From the Rule Creation Window** While creating a redirect rule (in [**Step 3: Redirect Type**](/geoip-country-redirect/country-redirect/create-redirect-rule#step-4-redirect-type)), you can create and customise a new template: * Choose Type → Display Based Redirect → select **"Create New template"** option.
* Choose from the Pre-designed templates.
* Customise the template in the Editor based on your preferences
Click on the Save button to apply the changes.\ You can add the [**Dynamic Keys**](/geoip-country-redirect/country-redirect/dynamic-keys) to display the country name and the country flag to the visitors. The template will appear in the rule. Click the **Save Rule** button to add the template and create the rule.
### Process 2: From the Templates section You can also create or manage templates directly from the **Templates** section: * Click on **"+ Explore Redirect Template"**.
* Choose from the Pre-designed templates.
* Customise the template in the Editor based on your preferences. Click save to apply the changes.
{% hint style="info" %} **Note:** In the pop-up within the **Template Editor** section, the countries shows **Canada** and the **United States** as default. The visitor’s country data **\[country-name]** and **\[country-code]** configured in the rule is displayed when the **👁️ Live Preview button** is clicked. The **\[store-name]** key displays information of **store name** when the rule is triggered. {% endhint %} For customization, please refer to the link: [Popup Customization](/geoip-country-redirect/videos#popup-customization) * The template will appear in the Templates section.
### B. Managing Existing Templates #### **Clone a Template** * Go to **Templates**. * Click the **Clone** button next to the template you want to duplicate. * After cloning, click **Customise** to edit the cloned version as per your needs.
#### **Delete a Template** * Go to **Templates**. * Click the **Delete** button next to the template you want to remove from the list.
# Customize Templates You can customise the Redirect popup templates with the required content and styling. The content could be added in any regional language manually according to the requirement. To customise the redirect popup template, please follow the below steps: ### Step 1: Explore Redirect Templates Open GeoIP Country Redirect App → Templates → click on +Explore Redirect Template
### Step 2: Choose a Template Choose a pre-designed template to customise it based on your preferences.
### Step 3: Popup Editor Customize the elements in the popup using the Editor.
### Step 4: Template Created The template is now available for use in the rules.
Here is a **Quick Video** for step-by-step template customisation. {% embed url="" %} {% hint style="info" %} **Note:** In the pop-up within the **Template Editor** section, the countries shows **Canada** and the **United States** as default. The visitor’s country data **\[country-name]** and **\[country-code]** configured in the rule is displayed when the **👁️ Live Preview button** is clicked. {% endhint %} # Whitelist - Redirect There are two types of Whitelist options available in the app. 1. [Rule-Based Whitelisting](#rule-based-whitelisting): configured in specific rules. 2. [Global Whitelisting](/geoip-country-redirect/general-settings/global-whitelist-settings): works for all rules at once with an option (**Consider Global Settings**) active in each rule, including rule-based configurations. *** ## Rule-based Whitelisting Rule-based whitelisting prevents redirection for certain users for a particular rule. It has two options to prevent redirection: 1. [Whitelist IP Setting](#b.-whitelist-ip-setting) 2. [Whitelist URL Setting](#c.-whitelist-url-setting) ### A. Consider Global Whitelisting The **Consider Global setting** is used to apply the configuration of the Global Whitelist setting to the specific rule. To use [**Global Whitelisting**](/geoip-country-redirect/general-settings/global-whitelist-settings) configuration **(added IP address or URL)** with rule-based configurations, you can enable **the Consider Global Whitelisting option** in a particular rule**.**
*** ### **B. Whitelist IP Setting** This option allows you to disable redirection for specific IP addresses completely. **Steps to configure:** 1. Go to **Country Redirect** → click **Edit** on the rule you want to update. 2. Select the **Whitelist** option. 3. Enter the **IP address** (only Public IPv4 is supported). 4. Click **Save**. #### *Country Redirect - Whitelist section*
{% hint style="info" %} **Note the following points:** The app only supports Public IPv4 addresses. The IP address should be added in a comma-separated format with no spaces. {% endhint %} *** ### **C. Whitelist URL Setting** This option prevents redirection for specific URLs on your store. Steps to configure: 1. Click + Add new Whitelist Rule. 2. Enter the URL details. 3. Click Add to save. {% hint style="info" %} **URL Format:** 1. **Full URL:** * Enter the complete URL (domain required). * Example: \*\*; * Used in Type: **Exact** * Result: The redirection will be disabled from this specific page. 2. **URL Path:** * Enter only the path of the URL (not the full domain required). * Example: /products * Used in Type: **Contains** * Result: The redirection will be disabled from all the pages which contain the path (/products). {% endhint %} ### **Use cases of URL Whitelisting** ### **1. Exact** With the Exact type, you can whitelist redirection from specific URLs in your primary store. For example, to prevent redirection from the '**Contact-us**' page. In that case, you need to add the full URL (****) with the **Exact** type in the app.
### **2. Contains** With the Contains type, you can prevent redirection using a keyword in the URL. If the URL contains that specific keyword, the redirection will not be triggered on that URL. For example, you want to **exclude URLs from redirection that contain** the keyword “products“. In this case, you need to add the “**/products**” keyword in the app and select the type “**Contains**“ to prevent redirection.
*** # UTM Parameters UTM parameters are specific tracking codes that you can add to URLs to track them when users access those URLs. With the GeoIP app, you can utilize the UTM parameters functionality to forward the existing UTM parameters with the URL or add custom parameters in the app to forward with the URL. Let's understand the UTM parameters with the help of an example: 1. This URL is clean and has no parameters: *`https://spicegems.com`* 2. This is the URL with the UTM parameters: *`https://spicegems.com?utm_source=GeoIP_Country_Redirect&utm_medium=US_Redirect_Rule&utm_campaign=popup`* These are the initials of the UTM parameters in the URL: * **utm\_source** * **utm\_medium** * **utm\_campaign** * **utm\_term** * **utm\_content** ## 1. **UTM Forward** **UTM Forwarding** ensures that any custom tracking parameters added to links (outside the app) are forwarded to the destination store after redirection. {% hint style="info" %} #### **How It Works:** * When a visitor arrives with UTM parameters (e.g., `?utm_source=google&utm_campaign=spring_sale`), enabling **UTM Forwarding** ensures these parameters are **preserved** after redirection. * This helps maintain accurate tracking in marketing tools like Google Analytics and Facebook Ads. {% endhint %}
{% hint style="info" %} If the UTM forward is disabled, only the UTM parameters defined in the app will add in URL while redirection. {% endhint %} ## 2. C**ustom UTM parameters** In the custom UTM parameters, you can add the custom parameters within the app. There are five fields in this block. * UTM Source * UTM Medium * UTM Campaign * UTM Term * UTM Content You can create the required UTM parameters to forward them with the URL to the destination store for tracking.
## Scenarios of UTM Forwarding and Custom Parameters **Functioning of UTM forwarding when used with or without Custom Parameters:** ### **1.** UTM Forwarding enabled and used with Custom Parameters UTM forwarding is enabled, and we have added the custom UTM parameters in the rule: * An existing UTM campaign runs on the source store (`line-item.myshopify.com`) with the following UTM parameters. 1. **utm\_campaign**=spring\_sale 2. **utn\_medium=web** 3. **utm\_source**= google We have added the following Custom UTM parameters in the redirect rule: * UTM Source - NA * UTM Medium - NA * UTM Campaign - NA * **UTM Term = roger** * **UTM Content = louis** **This is the URL with existing UTM parameters** `https://line-item.myshopify.com?utm_source=google&utm_medium=web&utm_campaign=spring_sale` * After redirection, the app's custom UTM will merge with the existing UTM available in the URL. * The destination URL will look like the below URL {% code overflow="wrap" %} ``` https://sg-localapp.myshopify.com?utm_campaign=Final_sale&utm_source=Instagram&utm_medium=autoredirect&UTM_Term=roger&UTM_Content=louis ``` {% endcode %} *Note: The priority of existing UTM parameters (created outside the app) will be higher than the custom parameters created in the app.* *In case an existing UTM (for example, **utm\_campaign**=Final\_sale) is missing in the URL but created in the app (**utm\_campaign**=advertisement), the app will add and forward the custom UTM to the destination store with the URL.* ### **2.** UTM Forwarding Enabled used without Custom Parameters If UTM forwarding is enabled and no custom parameters are added in the app: * An existing UTM campaign runs on the source store (`line-item.myshopify.com`). 1. **utm\_campaign**=spring\_sale 2. **utn\_medium=web** 3. **utm\_source**= google Original URL:\ `https://line-item.myshopify.com?utm_source=google&utm_medium=web&utm_campaign=spring_sale` * After redirection, the destination URL maintains the existing UTM parameters: Redirected to:\ `https://sg-localapp.myshopify.com?utm_source=google&utm_medium=web&utm_campaign=spring_sale` {% hint style="info" %} If you need any help, please contact us at **** {% endhint %} # Page-Specific Redirection This feature provides the functionality to trigger redirection from a Specific page in the store. You can add multiple specific URLs for the redirection. To configure the feature, follow the steps below. ### Step 1: Click on Edit Rule and Navigate to “Advance Setting”
### Step 2: Activate Page-Specific Redirection Toggle to activate Page Specific redirection
### Step 3: Toggle to enable “Page Specific Redirection” * Click on the "Add" button * Enter the **path or URL** in the **“Redirect From” field** and select the **Type** according to your requirements. \ **Types:** * **Exact:** Redirect when the exact path is matched in the “Redirect from” field. * **Contains:** Redirect when the contents added in the "Redirect from" field are detected. {% hint style="info" %} In the Redirect from field, add the path or URL on which you want to trigger app redirection. In the image below, we have added a URL with a path. ***For example,** when a user lands on this URL (****), a redirection will trigger (display-popup or auto-redirect as per the rule configuration) to redirect the users to* *the destination store.* {% endhint %}
### Step 4: Click 'Save Rule' Button
The page-specific redirection is ready for use in the app. {% hint style="info" %} **In case of any queries, please feel free to reach us at** [**help@spicegems.com**](mailto:help@spicegems.com) {% endhint %} # URL Mapping Redirect users from Old Destination URL to a specific New Destination. The URL Mapping feature is designed to redirect visitors from a 404 page in the destination store to an available page in the destination store. This will ensure a smooth transition from an unavailable page to an available page. With **URL Mapping**, you can redirect users from an **Old Destination URL** to a **New Destination URL**. **Example Scenario:** You have two Shopify stores: * **USA Store** → **geoip-country-redirect-demo.myshopify.com** * **Canada Store** → **sg-local-app.myshopify.com** A **Shirt** product exists in both stores. However, the **shirt in the Canadian store became unavailable**. Instead of users landing on a broken or unavailable page, you want to **redirect them to an alternative product page**. **How URL Mapping Works:** **If a user tries to visit:** \ Product URL in the USA store: **** Instead of being redirected to the same product URL in the Canadian store (**sg-local-app.myshopify.com/products/french-shirt-1**), they will be redirected to (**sg-local-app.myshopify.com/products/french-shirt-2)** (a new mapped URL in the app). This ensures a smooth user experience by redirecting visitors to an **active and relevant product page** instead of a discontinued or unavailable one. ### Step 1: Click on Edit Rule → Advanced Settings
### Step 2: Enable the URL Mapping option Toggle to enable the URL Mapping feature {% hint style="info" %} Note: The [Relative redirect](/geoip-country-redirect/country-redirect/relative-redirect) setting should be enabled in the rule to utilise the URL Mapping functionality. {% endhint %}
### Step 3: Enter path/URL in "Redirect From" * **Redirect From** – Enter the path/URL from which you want to redirect the visitors to the new destination URL. * **Type**:\ **Exact** –Redirect users when the exact path is matched in the “Redirect from” field. It requires a complete URL to be added in the Redirect From field.\ **Contains** – Redirect users when the contents added in the Redirect from’ field is detected. The **/path** is required to be added if the **Contains** type is selected. Examples of Exact and Contains: For **Exact** - add the URL \[**sg-local-app.myshopify.com/products/french-shirt-1]**\ For **Contains** - add the path \[**/products/french-shirt-1]**
### Step 4: Enter the path/URL in the "Redirect To" field **Redirect To** – Enter the New Destination URL on which you want to redirect visitors. * **Origin:** Add the required **/path** of the new page. This will redirect visitors to the new **Destination URL**. * **Origin + Locale:** Add the **/path** and it will add locale to the path (if available) * **Full URL:** add the complete URL of the New destination page. **Examples of the above options:** **With Origin:** add the path **/products/french-shirt-2**\ **With Origin + Locale:** add the path **/products/french-shirt-2.** This will add the language locale to the URL **en/products/french-shirt-2**\ **With Full URL:** add the complete **URL - **
### Step 5: Click on Save to apply the changes
{% hint style="info" %} **In case of any queries, please feel free to reach us at** [**help@spicegems.com**](mailto:help@spicegems.com) {% endhint %} # Dynamic Keys Dynamic Keys for Country Name, Country Code, Store Name etc. ### 1. **Using Dynamic Keys (Redirect Popup Template)** The **Dynamic Keys** feature in the **Redirect Popup Template** allows you to personalise the popup content shown to visitors based on their location and store information. This helps you create a more engaging and localized user experience. #### **Available Dynamic Keys** | Dynamic Keys | Description | | ------------------------------------------------- | -------------------------------------------------------------------------- | | **\[country-name]** | Displays the visitor’s **country name** (e.g., *United States*, *France*). | | **\[country-code]** | Displays the visitor’s **country code** (e.g., *US*, *FR*) | | **\[store-name]** | Displays **store name** as configured in the rule. | | **\\** | Displays the **country flag** corresponding to the visitor’s location. | | **\\** | Displays the static **country flag** to all visitors |
> You can use these keys in your popup message — within the Heading, Body, and Button sections. For example, in the Body section, you can include a key with the following content:\ > \ > *“It looks like you’re visiting from \[country-name].*\ > *Would you like to shop at our \[store-name] store for a better experience?”*
### **2. How It Works** When a visitor lands on your store, the app automatically detects their location and replaces the dynamic keys with the relevant data in real time. This allows you to display the visitor's country and the respective flag.
{% hint style="info" %} **Note:** In the pop-up within the **Template Editor** section, the countries shows **Canada** and the **United States** as default. The visitor’s country data **\[country-name]** and **\[country-code]** configured in the rule is displayed when the **👁️ Live Preview button** is clicked. The **\[store-name]** key displays information of **store name** when the rule is triggered. {% endhint %} ### 3. Quick Video {% embed url="" %} {% hint style="info" %} If you encounter any issues, please contact us at **** {% endhint %} # FAQs Find quick answers to the most common questions about setup, configuration, and functionality. Whether you're troubleshooting an issue or looking to understand how a feature works, this section provides clear and concise guidance to help you get the most out of the app. In this FAQ section, you’ll find details about: * How to create a Redirect Rule? * How to test the redirect rule? * How to customize the Popup template? If your question isn’t listed here, feel free to reach out to our support team at **** — we’re happy to assist you. # Why visitor's data shows in Shopify Analytics This is caused by how Shopify itself works. \ Shopify starts recording analytics at the backend level, before the storefront page has fully loaded. This means that as soon as a visitors requests a page, the visit is already counted in Shopify Analytics. Because of this, even if our app redirect/blocks a visitor immediately on the frontend, Shopify has already recorded the page visit. Additionally, several bots are perform website crawling in certain amount on time and their visit may also record in Shopify Analytics. This bots may comes from any countries however mostly comes from the US, China and many more to preform website crawling. Additionally, our app by default whitelist the Google bots and several other bots from the redirection for website proper indexing. For more information of our app bots whitelisting click [here](/geoip-country-redirect/country-redirect/faqs/list-of-search-engine-crawlers-excluded-by-the-app) Recently, the Shopify Community group shared updates regarding huge volume of US and Chinese bot traffic. For more details, please review the article. [**https://community.shopify.dev/t/incorrect-location-data-in-shopify-analytics-high-traffic-from-council-bluffs-iowa/17791**](https://community.shopify.dev/t/incorrect-location-data-in-shopify-analytics-high-traffic-from-council-bluffs-iowa/17791) \ [**https://community.shopify.com/t/massive-chinese-bot-traffic-is-corrupting-shopify-analytics-ad-attribution-and-paid-tools-plus-merchants-affected/581112**](https://community.shopify.com/t/massive-chinese-bot-traffic-is-corrupting-shopify-analytics-ad-attribution-and-paid-tools-plus-merchants-affected/581112) {% embed url="" %} {% embed url="" %} # How to create a Redirect Rule? To create a redirect rule, click on the **Country Redirect** option → Click on **+ Create Rule**.
To learn more about the Redirect rule creation process, click on the view button below. {% content-ref url="/pages/esuygWFAlcki8Fd3QNRn" %} [Create Redirect Rule](/geoip-country-redirect/country-redirect/create-redirect-rule) {% endcontent-ref %} # How to redirect visitor forcefully? You can utilize the "**Auto Redirect**" feature to forcefully redirect visitors every time without any prompt. You can choose this option when creating the [redirect rule](/geoip-country-redirect/country-redirect/create-redirect-rule#step-3-redirect-type).
# How to test a Redirect Rule? **You can test any redirect rule by temporarily adding your own country to that specific rule. Follow the steps below:** **Step 1:** Clear your browser’s **cache and cookies**.\ This ensures the redirect is tested without any stored data affecting the result. **Step 2:** **Add your own country** to the redirect rule you want to test.\ This allows the app to treat you as a valid visitor for that rule. **Step 3:** Visit your store and check the redirect.\ Once the rule is saved, open your store in a new tab or Incognito mode to confirm that the redirection works as expected. You can refer to the Quick View for better clarity: {% embed url="" %} # How to test the redirect rules using VPN? Use a VPN (BrowserStack/Whitehat) 1. Configure a location in your VPN. 2. Clear browser cache and cookies. 3. Verify VPN location on [whatismyipaddress.com](https://whatismyipaddress.com/?utm_source=chatgpt.com). 4. Ensure the app’s virtual location matches the test country. 5. Use Private/Incognito mode for accurate results. Quick Video for testing the redirect rule using a VPN. {% embed url="" %} # How to clear browser cache ## 1. Chrome 1. Open **Chrome Settings** 2. Go to **Privacy and Security** 3. Click on **Delete browsing data** 4. Select: * **Cookies and other site data** * **Cached images and files** * Browsing History (Optional) 5. Click **Delete data** {% embed url="" %} *** ## 2. Mozilla #### **Option 1: Clear Cookies & Cache for All Sites** 1. Open **Firefox** 2. Click the **Menu (☰)** button in the top-right corner 3. Select **Settings** 4. Go to **Privacy & Security** 5. Scroll to **Cookies and Site Data** 6. Click **Clear browsing Data** 7. Check: * **Cookies and Site Data** * **Cached Web Content** 8. Click **Clear** {% embed url="" %} # How to setup different redirection types for different rules? Rule-Based Redirection Type Our GeoIP app allows you to configure different redirection types (such as **Popup** or **Auto-redirect**) for each individual rule. This gives you full flexibility to tailor the visitor experience based on region and store requirements.\ Follow the steps below: **Step 1:** Go to the **Rule Creation** section in the app.\ **Step 2:** Click **Add New Rule** or edit an existing rule.\ **Step 3:** Select the **Country/Countries** you want this rule to apply to.\ **Step 4:** Choose your preferred [**Redirection Type**](/geoip-country-redirect/country-redirect/create-redirect-rule#step-3-redirect-type): * **Popup Redirection** – Shows a prompt to let visitors choose their preferred store. * **Auto-redirect** – Automatically sends visitors to the assigned store without showing a popup. **Step 5:** Enter the **Destination URL** for the selected region.\ **Step 6:** Save the rule. **Example Use Case:** * For your **European store**, you can use **Popup Redirection** to let users choose their preferred version of the site. * For your **United States store**, you can configure **Auto-redirect** to send visitors directly to the correct store instantly. This setup ensures each region gets a customized experience based on your business needs. # How to customize the Popup template? You can customize the Popup using the Popup Editor available in the app. You can check the self-help document for reference: [**Customize Template**](/geoip-country-redirect/country-redirect/create-clone-and-delete-template/customize-templates) Click on the link for a step-by-step guide: [**Video**](https://help.spicegems.com/geoip-country-redirect/country-redirect/faqs/pages/ke8ddngtH972pBH7d7hx#id-2.-popup-customization) # How to Create Redirect Popups in Multiple Languages? For creating redirection popups in multiple languages, you need to [create different templates](/geoip-country-redirect/country-redirect/create-clone-and-delete-template#process-2-from-the-templates-section) and add the content in the required language manually. For example, if you want to create a template in the French language, you need to add the content in the Popup in the French language.
# Can I prevent the redirection for a specific redirect rule? Yes! You can prevent the redirect from specific rules using whitelist settings. This feature has two option for whitelisting the rule: 1. Whitelist IP address 2. Whitelist URL {% content-ref url="/pages/Nb4neA81hzhjEd6pjJdn" %} [Whitelist - Redirect](/geoip-country-redirect/country-redirect/rule-based-whitelisting) {% endcontent-ref %} # List of search engine crawlers excluded by the app By default, the app automatically excludes **Google bots** and several other bots from the redirection. This feature ensures optimal website indexing and allows Google to accurately crawl and index all versions of your store. Here are the list of bots available in the app's script.
CategoryBot Names
Google Botsgooglebot, www.google.com, googlebot-mobile, googlebot-image, googlebot-news, googlebot-video, google-adwords-instant, appengine-google, google-search-console, google-shopping-quality, google web preview analytics, storebot-google, googleweblight, google favicon, duplexweb-google, google-read-aloud, adsbot-google-mobile-apps, apis-google, google-inspectiontool, google-cloudvertexbot, google-extended, googleproducer, google-speakr, google search console, google-safety, google-cws, google-agent, googlemessages, google-notebooklm, google-pinpoint, google-producer, google-amp-cache-request, feedfetcher, googlebot-discovery
Google Ads Botsadsbot-google, adsbot-google-mobile, mediapartners-google
Google Feeds & Previewfeedfetcher-google, google web preview, googleother-image, googleother-video, googleother
AI CrawlersGPTBot, OAI-SearchBot, ClaudeBot, Claude-SearchBot, PerplexityBot, MistralAI-User, Cohere-AI, meta-externalagent, meta-webindexer, meta-externalfetcher, meta-externalads, Applebot-Extended, Bytespider, Diffbot, ICC-Crawler, YouBot
AI User FetchersChatGPT-User, Claude-User, Perplexity-User
Search Engine CrawlersAmazonbot, DuckAssistBot, PetalBot
SEO / Analytics CrawlersAhrefsBot, SemrushBot, MJ12bot, CCBot, SerpstatBot, BLEXBot, DotBot
Gemini Deep Researchgemini-deep-research
Social Media Botsfacebookexternalhit, Twitterbot, LinkedInBot, Pinterestbot, Slackbot, Discordbot, SkypeUriPreview
Apple Botapplebot
Bing Botbingbot
Yandex Botyandexbot
DuckDuckGo Botduckduckbot
Baidu Botbaiduspider
Yahoo Botslurp
Google Inspection Toolsgoogle-inspectiontool, google-site-verification
Google Automation Toolschrome-lighthouse
MSN Botmsnbot
Open-source CrawlersNutch
If you are using a service for your website that uses a specific bot, please let us know by dropping us an email at . Here is a quick video of Bots testing: {% embed url="" %} # Country Blocker ## 1. **Feature – Overview** The **Country Blocker** feature allows you to block specific countries or IP addresses to restrict unwanted traffic from accessing your store. With the Country Blocker feature, you can: * Block visitors from selected countries or regions * Allow access only to specific countries (e.g., your primary market) * Block specific IP addresses from accessing your store, ## 2. **Blocking Modes** You can configure the blocker in two ways: * **Country Block** \ Completely blocks access for required countries. * **IP Block**\ Blocks specific IP addresses from accessing your store. ## 3. **Key Features** * IP-based country detection for precise blocking * Block or allow traffic from specific countries or IPs * Customizable blocker Popup template * Option to whitelist specific IPs or URLs * Easy rule management for multiple countries {% hint style="info" %} ***Important Note:** Blocked visitors will not be able to access the store. However, their visit will still appear in Shopify Analytics because Shopify tracks visitor data as soon as a user lands on the store URL. Our script executes afterward, which is why the visitor data is recorded in the analytics.* {% endhint %} Let's create a [blocker rule](/geoip-country-redirect/country-blocker/create-block-rule) to restrict store access for unwanted visitors. # Create Blocker Rule Let's understand the process of creating blocker rule to restrict store access for unwanted visitors. Follow the steps below to create a blocker rule based on a visitor's Country or IP address: * Open the **GeoIP app** * On the Dashboard, click on **Create Rule** - **Country Blocker**
### Step 1: General Settings * **Rule Name**: Enter a name for your rule. * **Country or IPs:** Select countries or add IPs to which the rule should apply. {% hint style="info" %} You can choose only one option at a time between "Country" and "IPs" {% endhint %}
### Step-2: Blocker Template Choose the default template or create a new one according to your requirements. \ [Click here to learn more about Blocker Template creation](/geoip-country-redirect/country-blocker/create-block-page-template)
### Step-3: Whitelist Exclude specific IP addresses (only [Public IPv4 supported](https://whatismyipaddress.com/)) or URLs from blocking. \ [Click here to learn more about whitelisting](/geoip-country-redirect/country-blocker/country-blocker-whitelist-settings#rule-based-whitelisting)
Click Save to create the rule in the app. # Whitelist - Blocker There are two types of Whitelist options available for the Blocker Rule in the app: 1. [**Rule-Based Whitelisting**](#rule-based-whitelisting)**:** Configured within specific rules. 2. [**Global Whitelisting**](/geoip-country-redirect/general-settings/global-whitelist-settings)**:** Applies to all rules at once if the *Consider Global* setting is enabled in the rules. ## Rule-based Whitelisting Rule-based whitelisting prevents blocking for certain users within a specific rule.\ It offers **two options** to prevent blocking: 1. [**Whitelist IP Setting** ](#b.-whitelist-ip-setting) 2. [**Whitelist URL Setting**](#c.-whitelist-url-setting) ### A. Consider Global Whitelisting The *Consider Global* setting allows you to apply the configuration from the Global Whitelist to a specific rule. If you want to use the [**Global Whitelisting**](/geoip-country-redirect/general-settings/global-whitelist-settings) configuration (IP addresses or URLs) together with rule-based settings, simply enable the *Consider Global Whitelisting* option in that particular rule.
*** ### **B. Whitelist IP Setting** This option allows you to disable blocking completely for specific IP addresses. **Steps to configure:** 1. Go to **Country Blocker** → click **Edit** on the rule you want to update. 2. Select the **Whitelist** option. 3. Enter the **IP address** (only Public IPv4 is supported). 4. Click **Save**.
{% hint style="info" %} **Note the following points:** * Only IPv4 addresses are supported. * IP addresses must be entered in a **comma-separated format with no spaces**. {% endhint %} *** ### **C. Whitelist URL Setting** This option prevents blocking for added URLs on your store. Steps to configure: 1. Click + Add new Whitelist Rule. 2. Enter the URL details. 3. Click Add to save. {% hint style="info" %} **URL Format:** 1. **Full URL:** * Enter the complete URL (domain required). * Example: \*\*; * Used in Type: **Exact** * Result: The blocker will be disabled from this specific page. 2. **URL Path:** * Enter only the path of the URL (not the full domain required). * Example: /products * Used in Type: **Contains** * Result: The blocker will be disabled from all the pages which contain the path (/products). {% endhint %}
### **Use cases of URL Whitelisting** ### **1. Exact** With the Exact type, you can disable the blocker rule from specific URLs in your primary store. For example, to prevent blocker rule from the '**Contact-us**' page. In that case, you need to add the full URL (****) with the **Exact** type in the app.
### **2. Contains** With the Contains type, you can prevent blocking using a keyword in the URL. If the URL contains that specific keyword, the URL can be accessed. For example, you want to **exclude URLs from blocking that contain** the keyword “products“. In this case, you need to add the “**/products**” keyword in the app and select the type “**Contains**“ to prevent blocking.
# Blocker Template You can customise the Blocker templates with the required content and styling. The content could be added in any regional language manually according to the requirement. You can create or manage templates directly from the **Templates** section: ### Step 1: Template Section Click on **"+ Explore Blocker Template"**.
### Step 2: Choose from the Pre-designed templates. You can choose the required Pre-designed template for your store.
### Step 3: Customise the template In the Editor, you can customise the template based on your preferences and click Save to apply the changes.
The newly customised template is now available in the Templates section.
*** # Exception-Based Blocker Rule With the **Country Blockers’ Exception-Based Rule,** you can give access to a specific page to the blocked country visitors in your store. **Using Whitelist URL** Let’s understand the configuration with the help of the below example: You have two stores; one is a **US store** and the other one is a **Global store.** Now you have a rule in the Blocker to **block Australian visitors to access your US store.** In the above case, you can create an **Exception Based Rule, to give access to Australian visitors to** a specific informatory page created for them in the US store. Now edit the blocker rule and go to the whitelist section. Here you can give access to that Specific page using the Whitelist URL option. You need to add that specific page URL in the whitelist URL option with the exact type and save the rule. Now when an Australian visitor lands on the US store, they can only access that specific informatory page the complete store. **Using IPV4** Using the IPV4, you can give access to certain users/members of your team to access the blocked store for testing. For the above, you need to edit the blocker rule, then go to the Whitelist section and add the Public IPV4 of the user/member in the **IP section and save the rule.** Now the user/member will be able to access the store hassle-free. # FAQs The GeoIP Country Redirect App by SpiceGems enables merchants to restrict access to their store by blocking visitors based on their geolocation and IP address. These FAQs address common questions related to the Country Blocker functionality, including how blocking works and its behaviour. * [How can I restrict access to my store for specific countries?](/geoip-country-redirect/country-blocker/faqs/how-to-block-certain-countries-to-access-my-store) * [Can I show a custom message to blocked visitors?](/geoip-country-redirect/country-blocker/faqs/can-i-set-a-custom-message-for-blocked-visitors) * [How can my team members access the store from a blocked country?](/geoip-country-redirect/country-blocker/faqs/can-i-allow-some-users-from-the-block-location-to-access-the-store) * [Why is my Analytics data showing discrepancies?](/geoip-country-redirect/country-blocker/faqs/my-analytics-are-showing-discrepancies.) If your question isn’t listed here, feel free to reach out to our support team at **** — we’re happy to assist you. # How can I restrict access to my store for specific countries? You can block certain countries from accessing the store by creating a blocker rule in the app. In the Rule Creation section, you can add the required countries or IP addresses that you want to block in the 'Blocked By' section.
{% content-ref url="/pages/DoJIDroieocbMqCnDDkA" %} [Create Blocker Rule](/geoip-country-redirect/country-blocker/create-block-rule) {% endcontent-ref %} # Can I show a custom message to blocked visitors? Yes, you can set up a custom message on the block page by customising the blocker page template with the template editor.
# How can my team members access the store from a blocked country? Yes, you can allow certain users to access your store while they are on the block country/IP list using the white list settings. {% content-ref url="/pages/Tt7jhiIbWueQseSJf6IC" %} [Whitelist - Blocker](/geoip-country-redirect/country-blocker/country-blocker-whitelist-settings) {% endcontent-ref %} # Why is my Analytics data showing discrepancies? Visitor data appears in Shopify Analytics because Shopify’s analytics script loads first when a visitor lands on the store URL. After that, our GeoIP script executes and restricts access. As a result, **Shopify records the initial visit in Analytics**, even though the visitor is ultimately blocked from accessing the store. # GeoMarket Redirect **GeoMarket Redirect** - directs users to their regional store based on their Country location and IP address. It helps businesses tailor the user experience by ensuring visitors see the most relevant content, currency, language, or product availability for their region. **Sync data from Markets:**\ In the app, you can synchronise all Shopify markets created for different regions in your store. Here you can configure any of the redirection functionalities according to your requirements. The redirection can be managed in 3 ways: **-** [**Popup**](/geoip-country-redirect/geomarket-redirect/popup)\ **-** [**Auto-redirect**](/geoip-country-redirect/geomarket-redirect/auto-redirect)\ **-** [**Switcher / Selector**](/geoip-country-redirect/geoip-switcher) [**Popup**](/geoip-country-redirect/geomarket-redirect/popup)**:** The GeoMarket popup allows you to display relevant information to visitors about their regional store. It also provides them with the option to manually select their preferred language and currency. [**Auto-Redirect**](/geoip-country-redirect/geomarket-redirect/auto-redirect)**:** The Auto-Redirect feature automatically directs visitors to their regional store while pre-selecting the appropriate language and currency based on their location. [**Switcher / Selector**](/geoip-country-redirect/geoip-switcher): This option allows visitors to manually choose their regional store, along with their preferred language and currency. # Popup This guide will help you configure the **geolocation popup** in the app to enhance user experience by showing relevant language, currency, or country options to your visitors. ### 1. Enable Geolocation Popup * Check the "Geolocation popup visibility" box to activate the popup. * This popup will allow visitors to select their local language and currency. * To customise the popup – [click here](/geoip-country-redirect/geomarket-redirect/geolocation-popup-editor)
### 2. Country-Based Display You can include or exclude specific countries for showing the popup. * Include – Show the popup only for the selected countries. * Exclude – Prevent the popup from showing in the selected countries. * Enter Country Name in the provided field. Note: If this field is left empty, the popup will display for all countries.
### **3. Display Behavior** Choose how and when the popup appears to visitors:
OptionDescription
Display when necessary (Recommended)Shows the popup whenever a visitor is on the wrong language, currency, or country.
Remember choiceShows the popup only once and saves the visitor's choice for future visits. In this case, the app will not display the popup again after the first selection for 30 days.
Display everyoneDisplays the popup for every new visitor, regardless of settings.
Display onceShows the popup only once to each visitor.
### **4. Filter by URLs** Control where the popup appears based on specific URLs: * **Include** – Show popup only on matching URLs. * **Exclude** – Hide popup on matching URLs. * Click **"+ Add path/URL"** to enter the URL paths where the popup should be included or excluded. * The added URLs will be listed below for editing or deletion.
**Quick Video:** {% embed url="" %} # Geolocation Popup Editor Using the Geolocation Popup Editor, you can customize various elements of the popup such as dropdown, button styling, popup content, and custom images to enhance the popup appearance in the store. You can check the list of sections that can customized in general template. **Basic Customizable Elements:**\ **– Resource**\ **– Dropdown Style**\ **– Label**\ **– Modal**\ **– Header**\ **– Body**\ **– Footer**\ **– Submit button**\ **– Logo Images**\ **– Backdrop**\ **– Close Button**\ **– Custom CSS**
\ \ Additionally, you can choose a theme styling from the default theme options. In case of any questions, please feel free to reach us at **** --- [Next Page](/llms-full.txt/1)