How to show collection based on location in Shopify

[Ak9000]

I have written code to identify location of user but I don’t know how to use it to show only specific collection to the user in Shopify 

[gr_trading]

Hi @Ak9000 

Hide all collection using CSS and add specific class to users location matched collection.

Which will make that collection visible to the user.

By this way only current location's collection will be visible to users.

Hope this will help...

[Ak9000]

But I doubt how this works if you could be but detailed thank you

[gr_trading]

I have explained you in detail. Implementation would take more changes and time.

[Transcy]

Hello @Ak9000 ,

You can try to follow these steps:

Create separate collections in your Shopify store for each location you want to target.

Ensure that the location information is stored in a variable that can be accessed on your Shopify store's front-end.

To show/hide Collections based on location, you can use a code like this as example:

{% if userLocation == 'US' %}
  {% assign targetCollection = 'US Customers' %}
{% elsif userLocation == 'UK' %}
  {% assign targetCollection = 'UK Customers' %}
{% else %}
  {% assign targetCollection = 'Default Collection' %}
{% endif %}

{% for collection in collections %}
  {% if collection.title == targetCollection %}
    <!-- Display the products from the target collection -->
    <h2>{{ collection.title }}</h2>
    {% for product in collection.products %}
      <div>{{ product.title }}</div>
    {% endfor %}
  {% endif %}
{% endfor %}

Save and preview

Let us know if you need any further support.

Transcy

[Ak9000]

Dear @Transcy 

Many Thanks for the solution given.

I have few doubts -

1. This code needs to be written in theme.liquid file ?

2. Target Collection means I should directly write the collection name?

3.How to store location in a variable in below code ? If you can write here it will be great help.

Below is my code written in theme.liquid file 

<script>
async function loadNames() {
const response = await fetch("https://api.geoapify.com/v1/ipinfo?&apiKey=8399697297be4409b9e0f9590f5ad6c0");
const geoAddress= await response.json();
console.log(geoAddress.city.name);
const currentcity=geoAddress.city.name;
const city="Bengaluru";

{%if currentcity == city %}
{% assign targetCollection = 'Bengaluru' %}
{% elsif currentcity =="Mumbai" %}
{% assign targetCollection = 'Mumbai' %}
{% elsif currentcity =="Delhi" %}
{% assign targetCollection = 'Delhi' %}
{% elsif currentcity =="Ahmedabad" %}
{% assign targetCollection = 'Ahmedabad' %}
{% else %}
{% assign targetCollection = 'Default Collection' %}
{% endif %}
}
{% for collection in collections %}
{% if collection.title == targetCollection %}
<!-- Display the products from the target collection -->
<h2>{{ collection.title }}</h2>
{% for product in collection.products %}
<div>{{ product.title }}</div>
{% endfor %}
{% endif %}
{% endfor %}
loadNames();
</script>

My collections are like this 

Appreciate your help.Thanks

[Ak9000]

@Transcy Any update please

[Transcy]

Sorry @Ak9000  for late reply,

1. No, this code shouldn't include in theme.liquid file. The exact file name might vary depending on your theme, but common names for this template to add code are collection.liquid, collection-template.liquid, or something similar.

2. Yes, in the code I provided, the "Target Collection" refers to the actual names of the collections you have set up in your Shopify store. 

3. The code you've written in the theme.liquid file looks good for fetching the user's location. To make this information available, you can create a Liquid variable using the assign tag. However, you need to embed the code inside JavaScript. Here's how:

<!-- Add this script tag in your theme.liquid file -->
<script>
  async function loadNames() {
    const response = await fetch("https://api.geoapify.com/v1/ipinfo?&apiKey=8399697297be4409b9e0f9590f5ad6c0");
    const geoAddress = await response.json();
    console.log(geoAddress.city.name);
    const currentcity = geoAddress.city.name;

    var liquidScriptTag = document.createElement('script');
    liquidScriptTag.setAttribute('data-user-location', '{{ currentcity }}');
    document.body.appendChild(liquidScriptTag);

    // Rest of your code
    // ...
  }

  loadNames();
</script>

Hope these can help.

Transcy

[techspawn]

You can tag your products with location using custom code or shopify flow and then create collections based on those tags. 

Other option is to use apps to do this for you. one of my app https://apps.shopify.com/multilocation  does tags and metafields to products based on location
Can use that info to create collections.