Petratools

Instant page load, instant interactions

Petratools went from a Shopify theme that shipped with 1,000+ kB of JavaScript to a modern Next 13 website that effortlessly loads with only 148 kB.

We kept key features such as Klaviyo's back in stock notifications and wishlist while removing 90% of now unnecessary Shopify Apps.

Pages now appear instantly and user interactions like adding an item to a cart are immediately possible upon navigation.

Theme editor → Powerful and easy CMS

In the new CMS, a simple sitemap-style navigation lets you effortlessly find and access any page in seconds.

Pages can be created in seconds, anywhere on the sitemap

Instead of being limited to the "Pages" folder, you can create unlimited pages and folders at any level of the sitemap.

Folders are automatically extracted out of URL segments, keeping the CMS organised at all times.

It's powerful yet dead simple. You just write content and the result is automatically a beautiful and fast page.

The sitemap was never a topic of discussion with the Petratools team as they were able to independently create the entire website in less than 2 weeks.

Real-time collaboration

The team collaborates in real-time, fully aware of each other's actions.

They can also give feedback to each other through comment threads on any part of the website while collaborating.

This was made possible from day 1 thanks to our CMS and deployment providers.

Foolproof SEO setup

Most technical SEO tasks are automated.

The XML sitemap automatically updates when pages are added or removed, and schema markup is generated based on the content.

The team can control the indexability of any page and implement redirects, with the sitemap reflecting these changes automatically.

They also have complete control over essential SEO fields such as title and description, which are validated according to Google's best practices.

Video management

Just like images, videos can be uploaded in any size as they get automatically optimized on the fly by MUX based on the user device.

Thumbnails are also auto-generated.

To make it easy to re-use videos, the team can tag them and quickly find them later by tag.

Monitoring downtime and errors

BetterStack monitors the website downtime and runtime errors, sending immediate alerts to a Slack channel for quick incident response.

Design approach

We redesigned the Petratools store from the ground up, following their most recent brand guidelines.

The design focuses on two key elements: first, creating a calm and peaceful atmosphere using subdued shades of beige and dark green; second, building trust with customers by featuring real user testimonials from social media.