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

The Lokally pincode widget is the input element shoppers use to enter their delivery pincode. Once entered, Lokally activates all applicable rules: regional pricing, COD restrictions, and location-based content. The widget is the entry point for the entire Lokally feature set.

What the Widget Does

When a shopper enters their pincode:

1. Lokally checks it against all active rules
2. The correct regional price is applied to all products
3. COD restrictions for that pincode (if any) are enforced
4. Location-specific content (banners, announcements) appears
5. If COD is blocked for that pincode, the configured message appears

The pincode widget persists the shopper's location for the entire session, so they don't need to re-enter it for each product.

Step 1: Install Lokally

Install Lokally from the Shopify App Store (7-day free trial). After installation, Lokally adds itself to your theme as a Block — you activate it through Theme Editor.

Step 2: Add the Widget in Theme Editor

1. Go to Shopify Admin → Online Store → Customize (Theme Editor)
2. In the left panel, find your product page template or the home page template
3. Under "Sections" or "Header" area, click Add Block or Add Section (wording varies by theme)
4. Look for Lokally Pincode Widget in the available blocks list
5. Click to add it
6. Position it — most brands place it in the product description area or below the Add to Cart button

After adding, the widget appears on the storefront. Shoppers can enter their pincode immediately.

Step 3: Configure Widget Settings

In the Lokally app dashboard → Settings → Pincode Widget:

Placeholder text: The text shown in the empty input field. Default: "Enter your pincode". Consider localising: "पिन कोड दर्ज करें" (Hindi) for Hindi-speaking markets.

Check button text: The text on the submit button. Default: "Check".

Success message: Shown after a valid pincode is accepted. Example: "Delivering to {pincode}" or "Price updated for your area."

Invalid pincode message: Shown for unrecognised or malformed pincodes. Example: "Please enter a valid 6-digit pincode."

COD unavailable message: Shown when a shopper's pincode has COD blocked. Example: "Cash on Delivery is not available at your pincode. Prepaid payment methods are accepted."

Step 4: Choose Widget Placement

The optimal placement depends on your use case:

Product pages: Place below the product title or in the product information section. Shoppers see regional pricing before adding to cart. This is the highest-value placement for pricing rules.

Collection pages: Lokally can show a widget in collection headers. Less common, but useful if you want to show pricing tiers on the collection level.

Cart page: Place in the cart to remind shoppers who haven't entered a pincode yet. Useful as a fallback.

Announcement bar / header: Some brands add a compact widget version in the site header for persistent access.

Step 5: Test Widget Behaviour

After configuring:

1. Open your storefront in an incognito browser
2. Navigate to any product page
3. Find the pincode widget
4. Enter a pincode covered by a pricing rule — verify the price updates
5. Enter a pincode with COD blocked — verify the COD message appears
6. Enter a pincode outside all rules — verify default price shows

Test with at least 3 scenarios: rule-covered pincode, COD-blocked pincode, and no-rule pincode.

Customising Widget Appearance

The Lokally widget inherits your theme's typography and colour system by default. For additional customisation, the widget has CSS classes you can target in your theme's CSS.

Common customisations:

• Match widget border radius to your theme's button/input style
• Match button colour to your primary CTA colour
• Adjust font size for mobile viewports

Frequently Asked Questions

Does the pincode persist if the shopper leaves the site and returns? Yes, Lokally stores the entered pincode in a browser cookie for the duration of the session (and optionally longer if configured). Returning shoppers within the cookie window don't need to re-enter their pincode.

What if a shopper changes their delivery address at checkout? Shopify's checkout uses the delivery address. If a shopper enters a Mumbai delivery address at checkout but earlier entered a Jaipur pincode in the widget, the checkout price reflects the Jaipur rule (the widget-entered pincode). Address reconciliation is on the shopper's responsibility.

Can I require pincode entry before showing a price? Yes. Lokally has an option to hide pricing until a pincode is entered. This is less common but useful for brands where pricing complexity is high and showing any price without location context would be misleading.

Summary

The Lokally pincode widget is added through Shopify's Theme Editor as a Block. Configure the widget text and messages in the Lokally dashboard. Place it on product pages for maximum impact. After setup, all Lokally rules (pricing, COD, content) activate automatically based on the pincode entered by each shopper.