ArticleIntroductionText

Nimara essentially gives you a front end that’s ready to go but also highly customizable. In other words, you don’t have to reinvent the wheel, yet you can still adjust the checkout to suit different scenarios (like our digital products example).

Text

<p>Have you ever had that moment when your client says, “<em>By the way, we’re adding digital products, so no shipping is needed</em>,” and you just know the checkout flow is about to get weird?&nbsp;</p><p>One minute, you’re handling physical goods (quite standard), and the next, you’re wrangling shipping forms for items that live in the cloud.&nbsp;</p><p>Customers end up scratching their heads over why they have to enter a shipping address for a file they’ll download or stream.&nbsp;</p><p>You start hacking conditionals into your code; hiding shipping steps, jumping around the standard flow… and pretty soon the checkout feels like a maze.</p><p>We’ve all been there.</p>

<p>Instead of forcing you to rip out shipping logic by the roots, Saleor gives you a neat switch - <code>isShippingRequired</code> - so you can elegantly adapt your checkout for digital items.&nbsp;</p><p>Below is a step-by-step tutorial that shows exactly <a href="https://mirumee.com/blog/optimize-ecommerce-checkout-nimara-storefront?utm_campaign=article&amp;utm_medium=internal_link&amp;utm_source=how_build_custom_checkout_nimara_storefront" rel="noopener noreferrer" target="_blank">how to update Nimara’s checkout</a> flow to skip shipping for digital items.</p>

<h2>Add the <code style="color: rgb(24, 128, 56);">isShippingRequired</code> Field to the Checkout Fragment</h2>

<p>Begin by telling your front end whether shipping is needed. Modify your <strong>checkout GraphQL</strong> fragment by adding the <code style="color: rgb(24, 128, 56);">isShippingRequired</code> field like so:</p>

CodeBlock

<p>Without this field, your front end has no clue that some items don’t require shipping. Since Saleor can differentiate between physical and digital items, that field will tell <a href="https://nimara.store/?utm_campaign=article&amp;utm_medium=external_link&amp;utm_source=how_build_custom_checkout_nimara_storefront" rel="noopener noreferrer" target="_blank">Nimara</a> whether or not to show the shipping steps.</p>

<p>Anytime you modify a GraphQL fragment, you must regenerate your TypeScript types:</p>

<p>This keeps your codebase typesafe, so you can rely on the fact that the <code style="color: rgb(24, 128, 56);">isShippingRequired</code> is recognized everywhere.</p>

<h2>Extend the Checkout Domain Object</h2>

<p>Next, open up your <strong>checkout domain object</strong>. Since your GraphQL fragment now has a new field, your domain object should reflect that:</p>

<p>Your domain layer is critical—it’s where your application’s business logic comes together.&nbsp;</p><p>This step assures your domain layer aligns perfectly with the data coming from Saleor. It’s a small but crucial detail in maintaining a clean architecture.</p>

<h2>Serialize <code style="color: rgb(24, 128, 56);">isShippingRequired</code> in Nimara’s Infrastructure</h2>

<p>Before the front-end can properly use <code style="color: rgb(24, 128, 56);">isShippingRequired</code>, make sure to serialize it in the Nimara infrastructure.</p>

<p>We’re mapping the GraphQL data into our Checkout type. </p><p>The double-bang <code style="color: rgb(24, 128, 56);">!!</code> operator is a neat way of converting whatever value <code style="color: rgb(24, 128, 56);">isShippingRequired</code> into a strict boolean value:<code style="color: rgb(24, 128, 56);">true</code> or <code style="color: rgb(24, 128, 56);">false</code>.&nbsp;</p><p>So downstream components don’t have to guess or handle nullish values.</p>

<h2>Customize the Checkout Flow for Digital Products</h2>

<p>Now comes the fun part: letting Nimara know that the user shouldn’t be forced through shipping screens as it’s unnecessary in this case. We’ll start on the main checkout page:</p>

<ul><li>We check <code style="color: rgb(24, 128, 56);">checkout.isShippingRequired</code> to see if we need to redirect the shipping address and delivery method steps.</li><li>If it’s not required (i.e., a digital product), we skip those steps altogether, and the users go to the next relevant step.</li></ul>

<h2>Redirect from Shipping-Related Pages When Unneeded</h2>

<p>If a user manually navigates to the shipping or delivery method pages for a digital-only checkout, we’ll politely send them back to the main checkout page.&nbsp;</p><p>It's a good user experience - there is no sense in letting them wonder into a shipping page if they don't need it.</p>

<p>Keeping users on the correct path means reducing confusion and fewer errors. It’s a small detail that contributes to a smoother overall experience.</p>

<h2>Send Users Directly to Payment When Shipping Isn’t Required</h2>

<p>Now, let's update the <code style="color: rgb(24, 128, 56);">updateUserDetails </code>action to handle what happens after users update their details.&nbsp;</p><p>By default, Nimara sends them to the shipping address step, but if shipping isn't required, they should go straight to payment:</p>

<h2>Adjust the Payment Step for Digital Products</h2>

<p>Finally, let’s hide any irrelevant shipping sections, such as the shipping address form: <code style="color: rgb(24, 128, 56);">ShippingAddressSection</code> and the delivery method selector: <code style="color: rgb(24, 128, 56);">DeliveryMethodSection</code>.</p>

<h2>Keep the Billing Section on the Payment Page</h2>

<p>Some forms, like billing address, are still crucial for taxes and compliance (especially if you’re selling internationally). Hide or show relevant sections in <strong>payment/page.tsx:</strong></p>

<p>It’s good to mention that digital goods will be delivered electronically, especially if your customers are used to shipping for all purchases.</p><p>Where to include such information on the checkout page - is up to you. Just make sure it’s hard to miss so buyers know exactly how they’ll receive their digital products.</p>

<h2>That's it! Now Your Checkout Will Support Digital Products</h2>

<p>If you’ve followed all these steps, you should now have a working checkout that streamlines the process for non-shippable products.&nbsp;</p><p>The changes revolve around a single property <code style="color: rgb(24, 128, 56);">isShippingRequired </code>that influences multiple screens in your app, guiding customers to the right place.</p><p>There’s always room for more customization, but hopefully, this guide gives you a solid, real-world example of extending Nimara for a digital-first shopping experience.</p><p>If you have any questions or want to share your own checkout customizations, feel free to <a href="https://discord.com/invite/w4V3PZxGDj?utm_campaign=article&amp;utm_medium=external_link&amp;utm_source=how_build_custom_checkout_nimara_storefront" rel="noopener noreferrer" target="_blank">reach out in the Nimara community</a>. We’d love to see what you build next!</p>

m-zine

Author

Piotr Grundas

Articles

How to Build a Custom Checkout for Digital Products Using Nimara Storefront?

Author

Articles

Piotr Grundas

How to Build a Custom Checkout for Digital Products Using Nimara Storefront?

Let’s engineer great products and systems together