How I Built a Self-Service Price Check Kiosk for a Shopify-Powered Retail Store

Shopify Connected Retail: How I Built A Self-Service Barcode Price Scanner

I recently built a self-service barcode scanner for a hybrid brick-and-mortar Shopify store. It turned out to be a genuinely useful solution, and also a project I enjoyed more than I expected, so I thought it was worth sharing.

The Problem

This client operates a large retail outlet with thousands of SKUs and an outlet pricing model. Products display a list (compare-at) price, with discounts applied dynamically. On top of that, the store frequently runs short-duration promotions, for example, “all 11-inch plates are 50% off for two days.”

Online, this model works well because we can present all the data to support the offer. But in the physical store, it creates friction: Customers see a list price and maybe a sale sign, then have to do mental math. Staff end up answering the same pricing questions repeatedly or doing manual lookups at the register. Confusion slows things down and makes customers overthink the price, which is surely adverse to purchasing.

Early Ideas

We explored a few obvious options:

• Printed signage near products
  Hard to maintain, easy to clutter, and prone to becoming outdated.
• E-Ink shelf pricing systems like those used by big-box retailers
  Interesting technology, but expensive and adds another complicated operational system to manage.

Both approaches could work, but neither felt especially lightweight or flexible.

The Idea That Made Sense

Eventually, the idea came up to let customers check prices themselves.

Place barcode scanners around the store. A customer scans an item and immediately sees:

• The current price
• Any active promotions
• A clear breakdown of how the final price is calculated

That reduces cashier interruptions and gives customers clarity without needing help. The more we talked about it, the more reasonable it sounded.

Looking for an Existing Solution

I assumed something like this already existed for Shopify. Surprisingly, it mostly doesn’t.

So the approach became straightforward:

1. Find suitable scanner hardware
2. Build a real-time price lookup interface powered by Shopify data

Most available hardware options were Android-based devices, typically around $500. They would likely work, but long-term support and maintenance felt heavier than necessary. Alla devices in their store are already iOS-based, so it seemed optimal to find an iOS-based alternative.

Hardware Selection

I found a secure iPad enclosure from CTA Digital on Amazon with an integrated USB barcode scanner for under $250. It allows an 11" iPad to be securely mounted to any VESA-compatible mount, of which there are a myriad of desk, floor, wall, & ceiling mount options available.  

Pairing that with a refurbished five-year-old iPad Air, roughly $300, put the total cost in the same range as the Android units, but on a platform I’m more comfortable supporting.

As the barcode scanner included with the enclosure conveniently came with no documentation, setup required a bit of trial and error/googling to get it to work with the ipad:

• Enable external keyboard input in iPadOS
• Scan a configuration barcode to put the scanner into Mac keyboard mode
• Result: scanning a barcode types the value and submits it automatically

I then used iPadOS Guided Access to lock the device into Safari with a single URL loaded at all times. At that point, the hardware behaves as a dedicated retail kiosk.

Building the Price Lookup Interface

The software side was simple:

• HTML and JavaScript for the frontend
• Make.com for automation
• Shopify GraphQL API to access real-time product data

The flow looks like this:

1. Barcode scanner inputs a SKU or barcode into a form
2. The form submits data to a Make.com webhook
3. The Make automation scenario queries Shopify for product, variant, and promotion data
4. Pricing is computed and returned as a JSON object
5. The interface renders the results immediately

Using AI to Speed Things Up

Rather than hand-coding everything, I started by defining the JSON structure for rendering the results screen. That model became the contract between the frontend and the automation.

Using Windsurfer IDE, I placed the JSON model in a comment and asked the AI to:

• Build a basic HTML form
• POST data to the webhook
• Parse the response
• Render the results cleanly

Within a short time, I had a functional form that not only worked and looked pretty good, but was also easy to refine. 

Hosting on Shopify

For simplicity & reliability, I hosted the interface directly on the client's Shopify store as a page:

• Created a page template with a blank layout
• Embedded the form HTML and JavaScript into the template
• Assigned the template to a new Shopify page. 

This keeps everything in one place and allows fast development iteration using the Shopify CLI.

The Automation Layer

The Make.com scenario accepts a single string input and returns a fully computed pricing object. Internally, it:

• Runs multiple Shopify GraphQL queries
• Pulls product, variant, and promotion data
• Performs pricing calculations
• Formats the result to match the predefined JSON model

The newer Shopify GraphQL API really takes a lot of patience to grasp, and for me, the learning curve has been steep. But it is efficient and way more capable, so I get why it is better. Fortunately, Shopify’s developer tools and AI assistance make it bearable to stumble through. 

Using those tools, I built several GraphQL queries that efficiently retrieve all the necessary data.

During this, I discovered that metaobjects can be used as API query filters; in this particular use case, I was able to avoid building additional scenario steps by using these GraphQL query filters to only return results from our custom 'promotions' metaobject where the start date < today < end date AND where the promotion was assigned to a collection that matched one of the collections the product belonged to. You definitely couldn't do anything like that in the old REST API!  

Here's what the finished Make scenario looks like:

Putting It Together

At this point, all the pieces were in place:

1. A physical kiosk using an iPad with an integrated barcode scanner
2. A simple, fast web-based user interface
3. An automation layer driven by real-time Shopify data

I printed a few test barcodes to test, and lo and behold, and everything worked on the first try! The scanner displayed the product image, the current price, and the active promotion in an easy-to-understand way.

After some tuning and cleanup, the system is now fast, stable, and easy to maintain. Because it's just a website loading on an ipad, updates to it can be deployed remotely without requiring hardware access.

Next Steps

After refining the interface a bit, I realized these kiosks could serve additional purposes on the sales floor, such as letting customers sign up for the email newsletter.

So, I added a secondary 'email signup mode' that could be accessed by tapping a new mode select button. 

Final Thoughts

This was a relatively small project, but it solved a real retail problem in a clean way. It combines physical devices with Shopify’s real-time data without adding unnecessary complexity. It empowers retail customers to shop confidently without having to ask for help. 

I love projects like this! If you’re interested in building practical, connected interfaces for a Shopify-powered retail environment, I’d be happy to explore what might make sense for your store.