About the Brand
Medical Outfit is Saudi Arabia’s first dedicated chain of medical apparel stores, offering premium uniforms and accessories under one roof.
Sourcing from globally renowned manufacturers, they combine comfort, quality, and professional style, serving healthcare professionals with the very best. Whether shopping online or in-store, their motto stands strong: “Value at Best Price.”
The Challenge: Shopify Checkout Has Limits
Out of the box, Shopify’s checkout is locked down, especially on standard plans. Brands can’t freely add fields, apply conditional logic, or display custom messages. This is done by Shopify to ensure speed, security, and a consistent experience.
But for Medical Outfit, that wasn’t enough.
Their checkout flow needed to reflect important brand-specific policies and regional shopping behaviors. And to do that, we had to go beyond native Shopify functionality, using Checkout UI Extensions and Shopify Functions to customize the flow without compromising performance or platform compliance.
Here’s what they needed, and how we made it happen:
Solution 1: City Selection Dropdown (Checkout UI Extension)
Saudi Arabia-based customers needed to select their city from a dropdown not type it, so that logistics could be standardized and error-free.
We implemented a Checkout UI Extension that displays a mandatory city dropdown, specific to Saudi Arabia. If a customer skips this step, the checkout won’t proceed. This technique is called a buyer journey intercept, it ensures critical inputs are captured before payment.
This helped Medical Outfit:
-
Reduce delivery issues
-
Improve data consistency
-
Guide users through a more polished checkout flow
Solution 2: 5% Charge on Tabby & Tamara Payments (Shopify Payment Function)
Tabby and Tamara are popular Buy Now, Pay Later options in the region, but they come with added fees for the brand. Medical Outfit wanted to charge an additional 5% when customers choose these methods, and clearly show this on the checkout screen.
We implemented a Shopify Payment Function that:
-
Detects when Tabby or Tamara is selected.
-
Dynamically calculates 5% of the cart total.
-
Applies the surcharge.
-
Displays it in the payment summary for full transparency.
This logic happens in real-time and works perfectly with Shopify’s existing payment structure, no disruptions, just smarter checkout.
Solution 3: “Non-Returnable Product” Acknowledgement (Custom Logic)
To protect the brand from unnecessary returns, products on sale (or marked with a specific tag) were to be declared non-returnable. Medical Outfit needed a way to:
-
Detect if such products are in the cart.
-
Show a checkbox with a message:
“This product cannot be returned.” -
Make the checkbox mandatory before payment is processed.
This too was achieved with a custom checkout UI extension, which dynamically checks the cart’s contents and triggers the checkbox when required. If the user doesn’t tick it, they can’t proceed, ensuring clarity and reducing post-purchase confusion.
The Outcome
-
Customized & Compliant Checkout: Every policy was implemented while staying within Shopify’s ecosystem rules.
-
Higher Trust: Customers are fully informed of fees and policies upfront.
-
Better Operations: Shipping errors decreased with dropdown cities, and returns for ineligible products dropped significantly.
Conclusion
Shopify’s default checkout is intentionally limited. But with the right technical approach, Checkout UI Extensions and Shopify Functions, you can tailor the experience to your business needs.
That’s what we did for Medical Outfit, and it made all the difference.
Want to power a checkout that works your way, without breaking Shopify's framework?
Let’s build it together.
Book a free consultation: https://calendly.com/garima-dhebana-propero/30min?month=2025-07