When I'm searching for a new soap brand, finding a functional and informative website can make all the difference in my shopping experience. I found that I appreciate soap websites that offer an ingredients glossary, customer reviews, sustainability pledges, and an informative blog, as these provide valuable insight into the brand and its products.
Usability and accessibility are also important factors, so I valued having access to a personal account, pricing information, and shipping details. If you're planning to build your own website, Zarla's AI soap website builder is a great tool — it can set you up with a polished website, complete with images and content, within minutes.
Zarla checks that sites meet basic web standards for mobile and desktop. We also use Google's PageSpeed Insights, and WAVE, a service that evaluates accessibility for individuals with disabilities. PageSpeed scores and accessibility are important factors for search engine rankings. PageSpeed scores may not match user experience and can vary substantially.
New York, New York, U.S.
Soapology, a bath and body brand specializing in natural, handmade products, boasts a concise but thoughtfully designed website that I found captivating. The home page, in particular, impressed me with its airy but engaging layout, complete with a trackable shopping cart, a search tool, and secure account access, all of which made accessibility a breeze.
The content blocks that thoughtfully separated each category were more than just a design choice — they helped me quickly hone in on exactly what I needed without getting lost in a sea of options. Additionally, the ability to sort items out alphabetically, by price from low to high, or according to best sellers, made my search for the perfect soap effortless.
I liked how airy and direct the website felt, free from unnecessary distractions. The reviews beneath individual products were a fantastic touch, giving me a clear sense of what each bar of soap had to offer, while brief descriptions outlined their benefits. Moreover, a floating accessibility tool allowed me to adjust how I viewed the site at any time.
I was a bit let down by the website's formal tone, as the absence of personal touches, such as founder photos, a blog, or insights into the team, made it hard for me to connect with the brand. I also wished it provided more information about its ingredients and soap-making process. While WAVE only flagged a few minor errors on various pages, it did detect quite a few contrast issues.
The desktop website felt like a breath of fresh air, with its airy design and floating menu making navigation effortless. Although I appreciated the simplicity of the layout, I felt like the images on the home page were a touch too big. As a result, I found myself scrolling more than I would have liked to view the full images and categories.
On the shopping pages, I appreciated the hover feature, where images would shift to show a different angle of the product — a delightful touch that felt like unwrapping a gift. However, the inconsistency of this was noticeable; not all product images offered this feature, and some images even appeared grainy and unpolished, detracting from the overall desktop experience.
The mobile website won me over with its linear menu, which was neatly tucked behind a hamburger icon for convenience. Here, drop-down options were indicated with plus symbols, which made them easier to identify, and navigating these options felt more intuitive. I also loved that the menu included social media icons for easy connection.
However, the categories' carousel feature on the home page didn't quite hit the mark for me. While I appreciated that the images did not require excessive scrolling, I found myself wishing for a grid-like presentation to see all my options. That said, the home page performance score of 35/100 on Google's PageSpeed Insights was a bit of a surprise, but the 86/100 accessibility score was reassuring.
Chicago, Illinois, U.S.
Abbey Brown is a Chicago-based soap brand specializing in producing all-natural, handmade soaps, skincare products, and modest home care. The company's website offers a spacious layout that I found simple to navigate, thanks to its handy floating menu, back-to-top button, and trackable shopping cart.
I also appreciated that the website included visible contact details and access to blog posts, as these two sections helped me connect with the brand faster. As I explored the "SHOP" menu, I was impressed by the option to choose how I want my soap delivered — naked, packaged, or sliced. Each entry also conveniently provided insights into the product's ingredients and related products.
One thing I truly loved about the Abbey Brown website was the postcard sticker effect on their photographs, as I felt this gave the website an approachable charm and unique aesthetic. I also liked that the "NEWS" page included articles covering various bath and body-related topics, as well as blog posts featuring stories about the Abbey Brown team.
The home page, in my opinion, lacked engaging content and trust-building elements, like the brand's sustainability pledges, testimonials, owner(s) or team photos, blog posts, or a "customers favorites" section. Moreover, WAVE identified several accessibility issues, including contrast errors, missing alternative text for images, and broken ARIA references across several pages.
The Abbey Brown desktop website was a delight to explore, with cohesive branding and a spacious layout helping me stay focused on important content. I particularly loved the floating effect of the images, as this helped create a minimalist aesthetic that I found especially refreshing on desktop. The hover effects on certain images and menu selections were another bonus, with the latter helping me to focus on my movements better.
However, I felt like some design choices detracted from the overall experience. For instance, since most of the individual pages were concise, I really didn't feel the need for a back-to-top button. This feature also took up unnecessary space and its dark tone made the payment options in the bottom menu unreadable at first.
When I first clicked on the mobile site, I was struck by how neat the top of the home page looked. This spacious welcome was thanks to the neat hamburger icon, which conveniently opened a side menu that I found fit the screen well. This clean design carried over to the individual shop pages as well, where floating images with transparent backgrounds created a minimalist look that I felt mirrored the purity and cleanliness I'd expect from a soap brand.
Overall, my mobile experience was simple and straightforward, and I really liked that the shopping cart would open a little pop-up in the center of the screen, as this helped facilitate a smooth online shopping experience. The mobile site's home page performed fairly well on PageSpeed Insights, scoring a moderate 69/100 for performance and 96/100 for best practices.
Gydynap Lane, Stroud, U.K.
Soap Folk is a soap brand specializing in handcrafted, organic soaps with a strong focus on sustainability. Their website does a fantastic job of showcasing their primary offerings, and I was particularly impressed by how well they highlighted their sustainability commitments through artwork and a dedicated page.
Navigating the website was a breeze with features like a trackable shopping cart and account access, which helped me track my budget. While I would have liked to see more than two customer reviews, I appreciated their inclusion on the home page, as it helped me get a better sense of the brand. Adding to this, the "Your Favourites" section, coupled with the image of the Soap Folk team, added a lovely personal touch.
I loved the currency converter in the top and bottom menus, as it ensured prices were clear for customers worldwide. The website also features a comprehensive blog with posts about Soap Folk's ingredients and other company updates. While the home page only featured two customer reviews, I appreciated that the individual soap pages also included reviews.
The "Subscribe now!" sticky button felt intrusive in the middle of the screen, and there was no close option to help clean it up. While I was initially impressed by the blog, I was a bit disappointed to see it was last updated in 2021. Despite WAVE only identifying a few empty buttons and missing form labels, there were also several contrast errors throughout the site.
Upon arrival, I was immediately struck by the spacious layout, which provided ample visual breathing room on desktop. However, instead of being captivated by the large images, I found them quite lackluster, and some were too big for the screen.
Although the hover effects on selections helped track my movements, I couldn't help but wish for more hover effects on images, as this would have helped them appear more appealing. Despite these minor issues, I found the site well-organized and easy to navigate. On PageSpeed Insights, the home page performed impressively, earning 96/100 in the performance category, as well as 89/100 for accessibility.
In an unexpected move, the mobile site opened with a different hero image, initially catching me off guard. However, I found myself preferring this introduction. The vibrant hero image, free of the text or CTA on the desktop version, was more visually appealing. This clean hero image also complimented the hamburger icon, which helped keep the top of the pages tidy and organized.
Additionally, I liked that the footer menu was tucked behind drop-down options, as this also helped clean up the bottom of the pages as well. Despite my overall positive experience, the home page earned a modest 56/100 in the performance category on PageSpeed Insights.
Hastings, Nebraska, U.S.
Pacha Soap Co. is known for producing high-quality, handmade soaps and bath products. Upon arrival, I quickly felt like their website was designed with the customer in mind, prioritizing efficiency with a well-structured home page, a floating menu, and a trackable shopping cart. I also appreciated the floating accessibility tool, which let me adjust my viewing preferences for more comfortable browsing.
The shop section was well-spaced and organized, and I loved that I could sort the items alphabetically, chronologically, or according to my preferred price point. The brand's social media is prominently displayed at the bottom of the home page, and the playful "SOAP-SCRIBE" prompt by the newsletter signup form added some personality to the site.
The website had many design choices and features that made my experience enjoyable. I especially appreciated being able to add products to my cart directly from the home page, and I loved that I could see each item's rating before scrolling to its page. Moreover, on accessScan, the website was labeled as "Accessible," with no other serious issues flagged.
As a newcomer to the brand, the absence of a traditional "About" page was quite noticeable, as I would have loved to read about Pacha Soap's history. Additionally, the video on the "OUR MISSION" page failed to play, making the brand's personal pages feel like an afterthought. I also felt like the floating menu's three layers of options were too excessive.
The Pacha Soap Co. desktop website offers a vibrant and engaging user experience. I found myself particularly drawn to the playful hover effects, where images would transform into lively visuals that I felt captured the brand's personality. The floating menu was another highlight, especially with the "SHOP+" option opening on the left side, keeping the screen clean and uncluttered.
However, despite my positive real-world tests, the home page did fall short on performance, scoring just 48/100 on PageSpeed Insights, which was a bit disappointing given the overall experience.
When I first clicked on the mobile site, I immediately noticed how compact it felt, cutting down on scrolling time and making on-the-go browsing a breeze. This was thanks to the tidy presentation of both the top and bottom menus. The footer menu had drop-down options, while the top menu transformed into a neat hamburger icon that, when clicked, took over the entire screen.
I loved this effect — it made it easier to focus on the menu without any distractions. Contrasting our pleasant real-world experience, the mobile site's home page performed rather poorly on PageSpeed Insights, scoring 7/100 for performance. However, it did score 89/100 for accessibility and 79/100 for best practices.
Bighorn No. 8, Alberta, Canada,
O'Canada Soapworks is a soap brand that offers handcrafted soap and bath products. When I first saw the website, I was captivated by its editorial-inspired design — it stood out to me as both professional and trustworthy, setting the tone for a great browsing experience.
What really stood out to me were the thoughtful features sprinkled throughout the site. I appreciated how the email address and wholesale information were easy to find in both the top and footer menus, and I loved that I could always keep an eye on my shopping cart and wishlist as I scrolled. Plus, being able to add items to my cart straight from the home page was a nice touch.
I appreciated how easy it was to find everything I needed. The pricing is clear from the start, and I didn't have to dig around for details on wholesale or shipping — it was all easy to access. I also liked being able to filter the shop according to my preferences. As a bonus, each bar of soap's page offered reviews, ingredients, and social media sharing options.
I didn't find much wrong with the O'Canada Soapworks website. However, while it was visually appealing and made shopping a breeze, I wanted a bit of a personal connection. A blog or a team introduction page could have added that extra touch, but this wasn't a big issue for me. On WAVE, empty links, broken skip links, and contrast issues were detected on multiple pages.
I was a bit disappointed by the lack of hover effects on some images, but the zoom-in feature on the individual soap pages made up for it. The floating menu, which boasted a mix of text and visual elements, added a dynamic touch that made my desktop browsing enjoyable. Moreover, the various images and headings appeared crisp on desktop and helped keep the website airy but professional.
One feature I really appreciated was the drop-down menu arrows that showed when it was open or closed — it's a small detail, but it made navigating so much smoother. Matching the site's strengths, the home page performed well on PageSpeed Insights, scoring 85/100 for performance and 90/100 for accessibility.
I was quickly impressed by how well the images translated on the O'Canada Soapworks mobile site — they kept their crisp, polished look, which really made the site shine. Although I missed the text and visual menu from the desktop version, I think its absence here actually helped keep things efficient.
The floating menu remains within easy reach, and I loved the clever touch of it turning transparent when I scrolled down, making sure it didn't obstruct my view. However, there were a few moments where the company logo clashed with a heading, which was a bit distracting. Despite performing well in real-world tests, the home page scored a modest 40/100 in the performance category.
We've compiled a list of soap website examples with comprehensive reviews of each site's pros and cons. Among these, The Cape Soap Co. and Soapology are two excellent examples of handmade soap website examples, as they both share streamlined navigation, secure online stores, and a commitment to natural ingredients.
You can use Zarla's AI-powered website builder to create a soap website template for free. Payment is only required once you decide to publish the website, making it a risk-free way to start designing your ideal website.
