How to map specific endpoint for redirecting QR code in virtual store?

Technical Q&A

Topic summary

A developer needed to map a dynamic endpoint /card/{id} on their Shopify store to redirect QR code scans from physical cards to an external website with the card ID as a parameter.

Initial Approach:

  • Attempted to build a Shopify app using Node.js/Express with a route handler to capture the card ID and perform redirects
  • The solution worked locally via ngrok but failed when installed on the actual Shopify store
  • The endpoint mapping didn’t function as expected in the live environment

Working Solution:

  • Abandoned the app-based approach after unsuccessful attempts
  • Implemented JavaScript directly in the theme.liquid file
  • The script runs on any page, captures the current URL, checks if it matches the target pattern, and redirects accordingly when a match is found

Status: Resolved through theme-level JavaScript implementation rather than a custom Shopify app.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

I need to map a specific endpoint on my shopify virtual store. There’s a QRcode on a physical card that redirects to my shopify store with an id as a parameter (i.e. www.my-store.com/card/ABDK-GTR). The thing is that each card has its own id, so I need to map the endpoint /card/{id} and use this id to redirect to another site (i.e. www.another-website.com/path/ABDK-GTR). Is there a way I can do that?

I’ve tried implementing a shopify app with a controller in node.js

import express from "express";
const app = express();

...

app.get('/card/:id', (req, res) =>{
  const cardId = req.params.id;

  const redirectUrl = 'https://www.another-website.com/path/' + cardId;
  res.redirect(redirectUrl);
})

...

but got no success with it. When I run my app everything goes just fine, if I try to access in a local server via ngrok and pass a ID, it does what it should do (https://d584-201-73-178-100.ngrok-free.app/card/ABC-DEF redirects to https://www.another-website.com/path/ABC-DEF). But then I installed this app on the virtual store to map the endpoint in the store (www.my-store.com/card/{id}) and it just doesn’t work.

Am I missing something? Is there another way of doing this? Any help would be appreciated!

1 Like
2

In case someone in the future has the same problem, I didn’t find a way to solve it by implementing an app. So I wrote some javascript inside theme.liquid, that will run in any page the user’s at. Basically it takes the current url, verifies if it matches to the one I’m analyzing, and then redirect in positive case.