NOW Foods sells natural products online: roughly a thousand of them across supplements, natural foods, sports nutrition, essential oils, beauty & health and more. I was the lead front-end developer on a ground-up rebuild of the site. It started in 2019 as a move from Drupal 7 to Drupal 8, took long enough that Drupal 9 arrived in the meantime, and launched on Drupal 9 in December 2021. The upgrade was going to break the old theme and modules anyway, so NOW took the chance to rebuild everything, with a focus on usability, accessibility and making products easy to find. It was also the perfect moment to fix an accessibility problem that had turned into a legal one.
About a thousand hand-edited, screen-reader-hostile nutrition tables, parsed into structured Drupal fields and swapped for clean, accessible templates, with an admin signing off on every product. It’s big enough to get its own case study.
Each product line (Supplements, Natural Foods, Sports Nutrition, Essential Oils, Beauty & Health and more) got matching product listings, on-sale pages and category info, and each has its own color scheme. Compare Supplements with Beauty & Health.
The trick is a single class: each section sets a class on the <body>, and the Sass maps that class to its brand colors for headings, buttons and other key elements. One set of templates, multiple distinct looks.
Most pages are built with Drupal’s Layout Builder and a set of custom blocks, so editors can lay out pages freely without ever touching code. The blocks include a Mailchimp signup, carousels of related content, and customizable WYSIWYG sections.
Products and articles suggest related content using Drupal entity queries. The matching is based on shared taxonomies (several levels deep) plus NOW’s own business rules, so a vitamin page points to the right articles, and an article points back to the right products.
A single, unified menu that behaves differently depending on screen size and scroll position, built from one set of templates, jQuery and SCSS rather than separate desktop and mobile menus. It all meets WCAG accessibility standards.
For shopping, one Views-powered product search serves the whole catalog of about a thousand products in several versions. The full versions, like All Supplements and All Natural Foods, give shoppers keyword search, sorting, and checkbox filters for On Sale, In Stock and category. Other versions, like the category and health-need pages (Digestive Support, for one), are the same view, pre-filtered by the URL.
The Sale page shows the idea best. It’s the same view with “on sale” built into the URL and the checkbox hidden, because nobody on the sale page is going to uncheck “on sale.” It’s a small thing, but it means one listing to maintain instead of a dozen, and no pointless controls for shoppers.
Where the listings help you find a product you already have in mind, the finders work more like a recommendation engine. They’re guided, multi-page quizzes built as Drupal webforms, like the Probiotic & Gut Health Product Finder. Shoppers answer one question per page, starting with their age group, and land on products that fit. Because they’re webforms, NOW’s team can build and edit finders without a developer.
The Smoothie Builder is built around a health coach’s formula of protein, fat, fiber and greens, plus a liquid and a few optional extras. The ingredient types and the ingredients in each one are managed in the CMS, and each type becomes its own carousel of selectable thumbnails. There are also a few featured smoothies you can load in and customize.
Pick one from each carousel, and your choices are saved under a random token, so the results page gets its own URL that you can bookmark, share or email to yourself. That email option doubles as a signup for NOW’s newsletter, with a consent checkbox. The results page lays out the full recipe, with amounts, and a shopping list of the NOW products in it, each with an add-to-cart button.
Every product page carries schema.org Product and BreadcrumbList data as JSON-LD, filled in automatically from the commerce fields: price, SKU, category, brand and availability. It powers rich results in search, and it also feeds a third-party integration that crawls NOW’s product data, so it had to be accurate across the whole catalog.
A custom, session-based PHP shopping cart hooked up to Braintree Hosted Fields, so card details go straight to Braintree and never touch NOW’s servers, which keeps PCI compliance simple. A lot of the work went into the multi-page checkout flow itself, and it all ends in nicely styled HTML receipt emails.
Pick a size or dosage and the product slideshow jumps straight to the matching photo. The size and amount options in the add-to-cart form each got an extra click handler, added with JavaScript, that advances the slideshow to the right image.
The slideshows across the site are built on Slick, Ken Wheeler’s carousel library and a favorite of mine across many projects.
In December 2022, with the site by then on Drupal 9, I ran a site-wide accessibility audit: Pa11y with aXe against WCAG 2.1 AA across roughly 2,500 URLs, which is most of the catalog. Everything it found boiled down to 13 issue types, from critical (missing alt text, invalid ARIA, duplicate IDs that labels depend on) down to minor.
Each issue type became its own ticket with an effort estimate and an owner: NOW’s content team, our developers, or Bazaarvoice, whose embedded reviews widget brought a few ARIA problems of its own. Most fixes came in at one to four hours. That’s the unglamorous side of accessibility. It’s not one big rescue, just the steady work of keeping a big site honest.