Designing the Design Process: WooCommerce & PrestaShop

How can we approach design efficiently when working with platforms like WooCommerce or PrestaShop—both known for their affordability and quick-to-launch templates? Recently, I was brought into two projects that didn’t yet have a defined tech stack. After a week of research and comparison—looking into platforms like Shopify, Shopware, PrestaShop, and WooCommerce—we decided on PrestaShop for one project and WooCommerce for the other.

This post isn’t about how we chose those platforms over the others. Instead, I want to focus on how to design effectively within the context of launching a shop on WooCommerce or PrestaShop—particularly when budget and time constraints require a fast and cost-efficient approach. How do we ensure the design process aligns with the expected development scope and cost? I want to build on the previous posts that discuss the effective design process in different contexts (AI as designer enabler and designer in Ai World).

Understanding the Platforms

WooCommerce is an open-source platform built on WordPress, offering flexible and affordable options to launch eCommerce stores using prebuilt themes. It’s especially popular among small and medium-sized businesses for its ease of use and broad plugin ecosystem.

PrestaShop, also open-source, is slightly less mainstream but provides more advanced scalability options than WooCommerce. It can be a better fit for larger product catalogs or more complex business logic.

According to recent market data, WooCommerce remains the second most popular eCommerce platform globally. This popularity often influences the perception that setting up a WooCommerce-based store is easy, fast, and cheap—especially when using off-the-shelf themes.

The Reality Behind “Fast and Cheap”

When first considering design for WooCommerce, and after speaking with a few eCommerce specialists, I quickly learned a key insight: most WooCommerce stores are built from base WordPress templates, not fully custom designs. That’s because deviating too far from a theme introduces complexity, bugs, and extra cost. A shop built from scratch on WordPress no longer fits the “affordable” model—it becomes a bespoke build with higher dev effort.

In one of the projects I joined, the timeline for implementation was very tight—around one to two weeks. The shop owner also had a previous store, so we had some baseline expectations. With a short timeline and limited budget, custom design and development were off the table. That led me to look into theme-based implementations.

The Theme-Based Design Process

To match the speed and cost constraints of a WooCommerce (or PrestaShop) implementation, I developed a lightweight and efficient design process that keeps expectations aligned across stakeholders—especially the shop owner and the developer. Here’s how we approached it:

1. Curate Moodboards from Existing ThemesI explored several existing themes and built a moodboard to spark discussion. This step quickly helped align on visual language, layout expectations, and possible UI features—without committing to any development work yet.
2. Discuss the Moodboard with the ClientTogether with Marta and Ola, we walked through the moodboard with the client. This discussion helped surface what the client truly liked and disliked. Based on their input, we narrowed down the options to a single theme.
3. Craft a Simple Landing Page Using the Selected ThemeFrom there, we created a simple landing page mockup directly based on the selected theme. The goal here wasn’t perfection, but speed and clarity—matching the client’s requirements while staying within theme constraints.
4. Get Owner Sign-Off or Iterate Up to Two TimesOnce the initial landing mockup was ready, we reviewed it with the shop owner. If the vibe felt right, we moved forward. If not, we allowed for up to two more theme-based iterations. If none of those worked, we agreed to revisit the possibility of a custom template—though that was the fallback, not the plan.
5. Define Site Architecture via WorkshopWith the look and feel somewhat settled, we held a workshop to define the structure of the site: navigation, page hierarchy, category breakdowns, and key content.
6. Deliver Design Artifacts to DevelopmentOnce the site architecture and visuals were confirmed, we prepared the final material and handed it over to the developers to implement using the chosen platform.
7. Enter a Feedback Loop with Dev & OwnerAs development progressed, we established a feedback loop between the developer and the shop owner. The aim was to align on final copy, visual tweaks, and plugin use—while staying within the technical limits of the theme. This was critical to avoid scope creep and unexpected delays.

Benefits of This Approach

The main benefit of this lean design process is that it minimizes the time spent aligning between designer and developer on what’s feasible within a given theme. When working with templates, trying to fully custom-design every page up front often leads to tension—either the design can’t be implemented easily, or the developer needs to refactor theme logic, which burns both time and budget.

Of course, if there is a PrestaShop or WooCommerce developer with strong design intuition, many of these pitfalls can be avoided. A tech/design hybrid can already foresee what will or won’t work. But in teams where the roles are split, this type of process creates shared understanding and faster execution.

Wrapping Up

Designing for WooCommerce and PrestaShop should reflect the platform’s purpose: affordability and speed. Designing a beautiful store with custom layouts and advanced UI is absolutely possible—but once you go that route, the simplicity advantage of WooCommerce or PrestaShop often disappears.

The better way? Design within constraints, align on themes early, keep design iterations lean, and embed feedback directly into the dev cycle. That way, you’re not just designing a store—you’re designing a design process that matches the real goals of the project.