Help with Geolocation Redirect Code in Pipeline Theme

[aianne]

Hi everyone,

I'm currently working on implementing a geolocation redirect for my Shopify store using the Pipeline theme. I want visitors from Toronto to be redirected to a specific Toronto content page, while users from other locations see the existing homepage.

Here's the code I implemented in the theme.liquid file:

<script>
window.onload = function() {
// Function to get the user's location
fetch('https://ipapi.co/json/')
.then(response => response.json())
.then(data => {
const city = data.city; // Get the city from the API response
// Check if the city is Toronto
if (city && city.toLowerCase() === 'toronto') {
// Redirect to the Toronto page
window.location.href = 'https://www.gitanokit.com/pages/toronto'; // Update with your Toronto page URL
}
})
.catch(err => console.error('Error fetching location:', err));
};
</script>

And heres the separate page template I created in templates/page.toronto.liquid:

<!-- page.toronto.liquid -->
{% layout 'page' %}

<div id="toronto-content" style="display: none;">
    <!-- Toronto-Specific Banner -->
    <div class="toronto-banner">
        <img src="{{ 'banner-image.jpg' | asset_url }}" alt="Exclusive Toronto Offers" style="width: 100%; height: auto;">
    </div>

    <!-- Toronto-Specific Content -->
    <div class="toronto-offers" style="text-align: center; padding: 20px;">
        <h1>Welcome, Toronto Customers!</h1>
        <p>Explore exclusive offers available only in Toronto.</p>
        
        <!-- UberEats Link -->
        <a href="https://www.ubereats.com/ca/toronto" target="_blank" class="btn">Order on UberEats</a>
    </div>
</div>

<!-- Geolocation Script -->
<script>
    fetch("https://ipinfo.io/json?token=myAPIkey")
        .then(response => response.json())
        .then(data => {
            if (data.city === "Toronto") {
                document.getElementById('toronto-content').style.display = "block";
            }
        })
        .catch(error => console.error("Error fetching geolocation data:", error));
</script>

I’ve replaced '/pages/your-toronto-page' with the actual URL of my toronto page. However, the redirect doesn’t seem to be working as expected.

Has anyone encountered a similar issue or can anyone suggest what might be wrong with my code? I’d really appreciate any help or guidance!

Thank you!