Skip to content
WorkServicesSEOArticlesAboutFAQFind a Domain Get a quote WhatsApp us
← All articles Case Studies

iOrganic: A Website Case Study

By Shane Snyman, JWD Website Design 18 September 2026
Follow JWD on Google Visit the live site: iorganic.co.za
iOrganic: A Website Case Study

iOrganic sells nuts, raw honey, dried fruit, biltong and droewors sourced from South African farmers, trading as iOrganics (Pty) Ltd. The brand sells direct to the public online and supplies distributors.

The old site was WordPress and WooCommerce. It looked good, but it did not run well, and it was worst on a phone. In September 2026 we replaced it with a custom ecommerce application built on Laravel, and the new store went live on 18 September 2026.

This is the larger kind of project we take on: not a theme with plugins bolted to it, but a shop written for one business.

Why rebuild instead of optimise

Plenty of slow WooCommerce stores can be fixed. The question is always whether the weight is in the theme, the plugins, or the platform doing work the shop does not need.

Here, the store was carrying a page builder, a stack of plugins and the general-purpose machinery WooCommerce brings whether a shop uses it or not. Every page a customer opened paid for all of it. Our guide on why a WordPress website is slow covers how that accumulates.

A rebuild was the right call because the catalogue is small and well defined, the business needed things WooCommerce plugins would have to be bought and maintained to provide, and the owners wanted an admin built around how they actually work rather than around WooCommerce’s screens.

Built from the designer’s concept art, not from a template

The whole site was built to concept art from the client’s own graphic designer. They supplied full page design masters, and the build follows them closely rather than treating them as loose inspiration.

That changes how the front end is written. There is no theme underneath this, so nothing had to be fought or overridden to match the artwork: the layout, spacing and type were built to the masters from the start.

The promotional adverts on the home page show how far that was taken. The artwork arrived as finished images with the words baked into them. Shipping them as flat pictures would have meant text that no one can select, search engines cannot read and screen readers cannot announce, and that turns to mush when scaled.

Instead the photograph is used without its text, and every line is set as real HTML over it, positioned to match the original. The designer’s typeface was subset and the wording placed line by line against the artwork, then checked by screenshotting each advert and comparing it with the master. As built, all 24 lines sit within 3px of the artwork, most within 1 to 2px.

The result looks like the designer’s file at any screen size, but the words are selectable, readable by search engines and AI answer engines, and sized in units that scale with the photograph. The same discipline runs through the rest of the site: where artwork was reissued mid-project, every file was compared against the previous delivery before anything was rebuilt.

Moving the catalogue without losing anything

The live store’s data was read through its public API rather than guessed at: 9 products and 80 variations, with prices taken verbatim into a snapshot file that the new site seeds from.

Two things were checked rather than assumed. Price and stock parity was compared product by product against the live store, with zero mismatches. Then the old sitemap was pulled and all 33 URLs tested against the new build.

Nine of those 33 returned 404. All six recipes, which the old site published at the root under longer addresses, the WordPress category archive, and two renamed pages. Left alone, every one of those would have lost its ranking and broken any link pointing at it on the day of the switch. They are now 301 redirects, handled before routing, and the test suite asserts that each redirect still lands on a real page, so renaming something later fails a test instead of quietly creating a redirect to nowhere.

After the fix, 0 of 33 returned 404.

What the shop does

The storefront runs the catalogue, recipes, an about page, FAQs, a distributor enquiry page and six policy pages. On the commerce side:

Quick buy, without ever opening a product page. This is the part of the shop that does the most work, and it is worth describing properly.

Almost everything in the range sells in several sizes and in more than one style, so a nut is not one price but a grid of them. Almonds alone run from a 60g bite bag to a 1kg culinary pack, in raw, roasted and salted, or roasted and seasoned.

On the shop page, “Select Options” opens a panel in place. It shows the product photo, the price range, the sizes, the styles and a quantity stepper, and the button stays inactive, reading “Select your options”, until enough has been chosen to identify a real variant.

The moment it can, the price resolves. Choosing a 100g snack pack in roasted and salted turns “R35,00 to R270,00” into “R50,00” before the customer commits to anything. Add to cart then becomes available, the side cart slides out to confirm, and the header count updates. The page never navigates. The shopper is still on the shop, in the same scroll position, ready to add the next thing.

That matters for a catalogue like this one, where the realistic order is four or five items rather than one. The older pattern, where every size choice means opening a product page and coming back, quietly taxes every extra item in the basket.

For anyone who wants the full story on a product there is still a link through to the product page, and the panel carries a “Back to the range” control rather than stranding people.

Delivery is quoted live. The checkout calls the courier aggregator and returns real rates for the customer’s actual address, re-quoting as the city, suburb and postal code are typed. The server re-prices against the full address before the order is taken, so what is charged is never just what the browser was shown.

Two ways to pay. Card through Yoco, plus SnapScan. Both confirm through signed webhooks rather than trusting the browser’s return trip, and refunds can be issued in full or in part from the admin.

Every product page carries four tabs: description, health benefits, nutritional information and reviews. Reviews are moderated: every submission is saved unpublished and the shop is emailed a link to approve it. There is deliberately no auto-publish setting.

Product pages emit Product and Offer structured data with delivery and returns information inside the offer, which is what search engines now expect from a shop.

The admin is the part clients feel every day

A shop owner spends far more time in the admin than any customer spends on the storefront, so it was built as a real part of the project rather than an afterthought.

It carries products with inline price and stock editing, bulk repricing with a preview before anything is written, coupons, customers, orders with fulfilment actions, moderated reviews, recipes, pages, FAQs, shipping zones, and a settings screen where gateway keys are stored encrypted.

Two pieces are worth calling out.

Live preview. The Pages, Products and Recipes editors render the real front end with the unsaved form state laid over the saved record, at desktop, tablet and phone widths. Nothing is written while previewing.

The home page is editable without a developer. The hero slider and the promotional adverts are both managed from the admin, including which products appear in an advert and the price shown, which is read live from the product rather than typed twice.

Speed, measured on the live site

Measured with PageSpeed Insights on the live store on the day it launched:

MobileDesktop
Performance9396
Total Blocking Time0 ms0 ms
Cumulative Layout Shift00
Largest Contentful Paint2.9 s0.6 s
Best Practices100100
SEO100100

Nothing exotic produced that. It came from not shipping what is not needed.

The animation library was removed entirely and replaced with an IntersectionObserver and a single animation frame loop. Images are built into AVIF and WebP at several widths, and the fallback in each image tag points at the smallest rendition, because the browser’s preload scanner picks a file before it knows how wide the image will be: point it at the largest and a phone downloads a desktop hero. Fonts are subset to the characters the site uses, and set to swap in only if they arrive in time, so the typeface never visibly changes mid-load.

Layout shift is zero because the space for every image is reserved before it loads.

Built so it can be run safely

The forms that cost money or attract abuse are protected: contact, distributor enquiries, reviews, the checkout and the admin sign-in all verify a Cloudflare Turnstile token on the server. Actions a shopper repeats naturally, like adding to the cart or fetching delivery rates, are rate limited per visitor instead, because a challenge on each one would get in the way.

Order emails are queued rather than sent during the checkout, so a slow mail server cannot add its delay to a customer’s payment. Measured against an unreachable server, that difference was 6.6 seconds inline against 0.111 seconds queued.

The build carries 136 passing automated tests, concentrated on the places where a silent failure costs real money: the payment webhooks, refunds, the delivery rate parsing and the catalogue pricing rules.

What this kind of project is actually like

Three honest observations for any business weighing up the same move.

The data migration is the risky part, not the design. Nobody notices a beautiful rebuild that lost nine indexed URLs. Test the old sitemap against the new site before cutover, not after.

A custom build earns its place when the shop needs things the platform does not do well. Live courier rates, a second payment method, moderated reviews, bulk repricing and an editable home page would each have been a plugin, and every plugin is another thing to license, update and hope stays compatible.

Speed is mostly subtraction. The gains here came from removing an animation library, serving modern image formats at the right size and subsetting the fonts, not from a caching plugin.

The result

The iOrganic store is live at iorganic.co.za, running a custom Laravel ecommerce application in place of WordPress and WooCommerce, with live courier rates, card and SnapScan payments, a moderated review system and an admin built for the people who use it. It is one of the businesses featured on our portfolio.

Considering something similar?

If you are weighing a WooCommerce store against a custom build, our guide to custom website development in South Africa sets out when each one is the right answer, and our e-commerce website cost guide covers the running costs either way. For a smaller shop our e-commerce package is the usual starting point. Request a quote and we can scope the work around your catalogue.

Frequently Asked Questions

Should I move my WooCommerce store to a custom build?

Not automatically. If a theme and a handful of plugins do what you need, keep them. A custom build starts to pay when you are buying plugins for core parts of the business, when the admin is fighting how you actually work, or when performance problems come from the platform rather than from one slow page.

Will I lose my Google rankings if I rebuild my online store?

Only if the addresses change without redirects. Pull the old sitemap, test every URL against the new site before the switch, and 301 anything that moved. On this project nine of thirty three URLs would have returned 404 without that step.

Can a custom ecommerce site still be easy to update?

Yes, and that is largely an admin design question rather than a platform one. Here the owners can edit products, prices, stock, pages, recipes, FAQs, the home page slider and the promotional adverts themselves, with a live preview of the real page before saving.

How do live courier rates work at checkout?

The checkout sends the delivery address to a courier aggregator and shows the rates that come back, so the customer sees real prices for their address rather than a flat fee. The important detail is that the server re-quotes against the full address before the order is accepted.

Why does page speed matter so much for an online store?

Core Web Vitals are among the page experience signals Google’s ranking systems consider, and good scores do not guarantee rankings on their own. The stronger argument is commercial: a shopper on a phone on mobile data will leave a slow product page, and that is a sale rather than a ranking.

What does a custom ecommerce website cost in South Africa?

It depends on the catalogue, the integrations and how much of the admin needs building. Our e-commerce package covers a standard online store, and a custom application is quoted on scope. Our cost guide sets out what drives the number either way.

Can you build a website from my graphic designer’s artwork?

Yes, and it is a good way to work when a brand already has a designer it trusts. iOrganic was built from full page design masters supplied by the client’s own designer. Where artwork arrives with the words baked into the image, we set the text as real HTML over the photograph instead, so it stays selectable, readable by search engines and AI answer engines, and sharp at every size.

Should shoppers be able to add to the cart without opening a product page?

For a catalogue sold in several sizes and styles, yes. Every trip to a product page and back is friction on an order that was going to be four or five items. A panel that opens in place, resolves the exact price once the options are chosen, and confirms in a side cart lets someone fill a basket without ever losing their place on the shop page.

How long does a custom online store take to build?

Considerably longer than a brochure site, because the catalogue, payments, delivery and admin all have to be built and then tested with real money and real addresses. The schedule is usually set by how quickly product data, photography and gateway accounts come together.

We use cookies to run this site and, with your consent, to understand traffic and improve your experience. See our Privacy Policy.