How to Add a Pincode Widget to Your Shopify Store with Lokally

Lokally asks shoppers for their pincode in two places: a pincode popup, and a small pincode widget ("Deliver to …") you can place anywhere in your theme. Once a shopper chooses a pincode, your storefront shows that region's prices and content.

What Happens When a Shopper Enters a Pincode

1. Lokally finds the region the pincode belongs to
2. Product prices on the storefront update to that region's price, if it has a pricing rule
3. Lokally blocks (banners, announcement bars and so on) show that region's content, and sections or collections hidden for the region are hidden
4. Lokally remembers the choice on that device, so the shopper doesn't need to re-enter it on every page

At checkout, prices and payment rules follow the pincode of the delivery address.

Step 1: Install Lokally and Turn On the App Embed

Install Lokally from the Shopify App Store (7-day free trial). Then in Shopify Admin → Online Store → Themes → Customize → App embeds, turn on Lokally's app embed. The popup and the storefront pricing need it.

Step 2: Set Up the Pincode Popup

In Lokally → Storefront content → Pincode Modal:

• Choose when it appears: First Visit Only, Every Session, Always (Every Page), or Exit Intent (when the shopper is about to leave)
• Set the delay, whether shoppers can close it, and when it appears again after being closed
• Change its layout, colours, fonts and text

Step 3: Add the Pincode Widget in the Theme Editor

1. Go to Shopify Admin → Online Store → Themes → Customize
2. Open the page template where you want it, such as the product page
3. Click Add block (wording varies by theme) and choose Lokally's Pincode Widget
4. Position it - many brands place it near the price or below the Add to Cart button

Shoppers click the widget to open the pincode popup and change their location.

Step 4: Configure the Widget

The widget's settings are in the theme editor:

• Label: the text before the location. Default: "Deliver to"
• No pincode text: shown before a shopper has chosen. Default: "Set location"
• Show region name: show the region's name next to the pincode
• Style: minimal, pill, card, icon only or banner, with icon, size, corner radius and colours
• Show on: all devices, desktop only or mobile only

Step 5: Choose Widget Placement

The best placement depends on your use case:

Product pages: Near the price. Shoppers see their regional price before adding to cart. This is the most useful placement for pricing rules.

Header or announcement area: A compact widget (for example the icon-only or pill style) gives shoppers a way to change location from any page.

Cart page: A reminder for shoppers who haven't chosen a pincode yet.

Step 6: Test Widget Behaviour

1. Open your storefront in an incognito browser
2. Enter a pincode in a region with a pricing rule - verify the price updates
3. Enter a pincode in a region with its own content - verify the content changes
4. Enter a pincode outside your regions - verify the normal price and content show
5. At checkout, enter a delivery address with a pincode in a region - verify the price and payment methods match that region

Frequently Asked Questions

Does the pincode persist if the shopper leaves the site and returns? Yes. Lokally remembers the chosen region in a cookie for 30 days, and in the browser's storage, on that device.

What if a shopper changes their delivery address at checkout? Checkout follows the delivery address. If a shopper chose a Jaipur pincode on your storefront but enters a Mumbai delivery address at checkout, the checkout price and payment methods are Mumbai's. Prices on the storefront are a preview; the delivery pincode decides.

Can shoppers use their device location instead of typing a pincode? Yes. The popup can use the browser's location (with the shopper's permission) to look up their pincode.

Summary

Lokally asks for the pincode through a popup and an optional pincode widget. Set up the popup in Lokally → Storefront content, add the widget in the theme editor, and test with pincodes inside and outside your regions, including at checkout.