The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Just solved one of the trickiest Shopify Plus challenges I've faced and I'm proud to share how we did it.
The problem:
We needed to restrict app-exclusive discount codes (used in a Buildnatively mobile app) so they ONLY work inside the app ā and are completely blocked on web browsers.
Sounds simple, right? It wasn't.
Here's what made it complex:
š Shopify's checkout runs on a separate domain ā you can't inject JavaScript there
š± iOS WebView and Safari look almost identical to the server
āļø Shopify Functions API has very limited access to discount codes and cart attributes together
Here's how we solved it ā a 3-layer approach:
1ļøā£ Cart Page (Theme JS)
Used the Buildnatively user agent string (contains "natively") to detect whether the user is on the app or a web browser. Set a cart attribute checkout_context = mobile_app for app users. Blocked app-only codes instantly on the cart page for web users with a clear error message.
2ļøā£ Checkout Page (Shopify UI Extension)
Built a custom Checkout UI Extension using @shopify/ui-extensions/checkout/preact that reads both the cart attribute AND the user agent as a fallback. If an app-only code is detected on web, it automatically removes the code, shows an error message for 12 seconds, and blocks checkout progression using useBuyerJourneyIntercept.
3ļøā£ iOS + Android both covered
Android was straightforward. iOS was the real challenge ā Safari and iOS WebView look identical. The fix? Buildnatively injects "natively" into the user agent on ALL platforms, so one simple check covers both.
Final result:
ā
Web browsers ā fully blocked on cart AND checkout
ā
App users on iOS and Android ā discount works perfectly
ā
Zero impact on store performance
This was a unique challenge that pushed me deep into Shopify Functions, Checkout UI Extensions, and WebView detection. If you're building app-exclusive features on Shopify Plus, I hope this helps!
Happy to answer any questions or share more details. š
#Shopify #ShopifyPlus #ShopifyDeveloper #MobileApp #CheckoutExtensions #WebDevelopment #Ecommerce #BuildNatively #TechSolution
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Hello, everyone, I want to share this work with you.
Premium Shopify Supplement E-Commerce Store
This project is a Shopify-based e-commerce website built for a premium health, wellness, and supplement brand. The store was designed with a clean, modern, and high-end visual style, using soft product imagery, strong typography, and a minimal layout to create a trustworthy shopping experience.
The website includes a polished homepage, product collection pages, product filtering, product cards, detailed product pages, add-to-cart functionality, cart drawer interaction, subscription and one-time purchase options, and a B2B inquiry form. The user experience was focused on making the buying journey simple, clear, and conversion-friendly while still presenting the brand as scientific, refined, and premium.
I worked on the Shopify storefront structure, responsive layout, product presentation, e-commerce flow, cart experience, and overall UI/UX refinement. The result is a professional Shopify store that combines brand storytelling with practical online shopping functionality.
Skills & Tools:
Shopify, Shopify Theme Customization, Liquid, HTML, CSS, JavaScript, E-commerce Development, Product Page Design, Cart Flow, Responsive Web Design, UI/UX Design, Conversion-Focused Store Design.
You did a great job on this project š„ Very modern and visually appealing.
Recently worked on BES Vinyl - a large-scale ecommerce infrastructure project built around Shopify, FileMaker Server, and AWS to support a rapidly growing online vinyl record business.
The project involved restoring and stabilizing a mission-critical FileMaker PIM system, rebuilding backend workflows, and implementing automated API-driven synchronization between Shopify and the internal product database for inventory, pricing, metadata, supplier imports, and catalog management.
Beyond the storefront experience, the real focus was operational scalability - reducing manual processes, improving data reliability, and creating a centralized commerce ecosystem capable of handling large product volumes efficiently.
Projects like this are where ecommerce, automation, and systems architecture come together to create measurable business impact. š
Everything feels balanced, refined, and professionally designed šÆ
Shopify E-commerce Website for Premium Textiles & Lifestyle Products
Hamam is a Shopify e-commerce website focused on premium towels, bathrobes, home textiles, and lifestyle products. The website presents a clean shopping experience where customers can explore collections, view product details, add items to cart, and purchase products through a smooth online store flow.
I worked on this project as a Shopify Developer, focusing on storefront development, theme customization, responsive design, product page improvements, and e-commerce functionality. My main goal was to create a polished and user-friendly Shopify website that reflects a premium lifestyle brand while making the shopping journey simple and conversion-focused.
The website required strong attention to design quality, product presentation, mobile responsiveness, and checkout usability. I worked on Shopify theme customization, product collection layouts, reusable sections, app/plugin configuration, performance improvements, and frontend bug fixing.
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid.Ā Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. Whatās yours right now?