shopfront

shopfront

ecommerce THEME DESIGN KIT

ShopFront is a first of its kind system crafted specifically for the eCommerce industry and aligns with Shopify design and development processes.

Preorder Now

built for

MENU

entire library connected to global styles

entire library connected to global styles

40-80 hours

saved per projects

40-80 hours

saved per projects

reduce wireframe

design by 75%

reduce wireframe

design by 75%

deliver faster

& tighter work

hundreds of

configurable components

complete checkout flows

deliver faster

& tighter work

hundreds of

configurable components

complete checkout flows

for design teams

using figma & shopify

for design teams

using figma & shopify

The only ecommerce workflow for shopify and figma

ShopFront is the go-to project starting point for in-house or agency teams who want to design Shopify and other eCommerce web experiences in their favorite tool - Figma.

Agency design system in-a-box
Agency design
system in-a-box

Start every design project with a copy of ShopFront OR publish as a library to use across your organization.

E-commerce pattern library
E-commerce
pattern library

Whatever you need, there is a component in this file that comes close. And we're continually updating the library to be better and more complete.

Recreate any E-commerce theme
Recreate any
E-commerce theme

Either match to a Shopify theme or create your own.
Choose a hero, menu, filter, product card, checkout flow, you name it. Mix and match to create the ultimate solution for your client or brand.

Professional Consistency
Decrease design production time
Spend less time on repetitive design tasks
Decrease development time
An own-able design asset
Eliminate revision friciton
An own-able design asset
Eliminate revision friciton
Eliminate the need for full redesigns
Optimized UX in every component
Easier for developers to develop
Efficient wire to design process
Adaptable for any platform
Landing pages in record time
An ownable design asset
Reduce development confusion
Eliminate the need for full redesigns
Optimized UX in every component
Easier for developers to develop
Efficient wire to design process
Adaptable for any platform
Landing pages in record time
Aligns with frameworks like Tailwind
Efficient wireframe to design
Platform agnostic, but also Shopify specific
Faster to market

for design teams

using figma & shopify

The only ecommerce workflow for shopify and figma

ShopFront is the go-to project starting point for in-house or agency teams who want to design Shopify and other eCommerce web experiences in their favorite tool - Figma.

Agency design
system in-a-box

Start every design project with a copy of ShopFront OR publish as a library to use across your organization.

E-commerce
pattern library

Whatever you need, there is a component in this file that comes close. And we're continually updating the library to be better and more complete.

Recreate any
E-commerce theme

Either match to a Shopify theme or create your own.
Choose a hero, menu, filter, product card, checkout flow, you name it. Mix and match to create the ultimate solution for your client or brand.

CONNECTED

global theming

Unlike typical UI kits, our system is completely connected making your work easier and faster.

- Margin & padding variables - Global type styles optimized for ecommerce - Global color variables (lean & ecommerce oriented) -Global iconography

CONNECTED

global theming

Unlike typical UI kits, our system is completely connected making your work easier and faster.

- Margin & padding variables - Global type styles optimized for ecommerce - Global color variables (lean & ecommerce oriented) -Global iconography

CONNECTED

global theming

Unlike typical UI kits, our system is completely connected making your work easier and faster.

- Margin & padding variables - Global type styles optimized for ecommerce - Global color variables (lean & ecommerce oriented) -Global iconography

What you're loosing by not using shopfront

What you're loosing by not using shopfront

Try out you own figures to calculate the return on investment for design production.

Try out you own figures to calculate the return on investment for design production.

Our figures don't even take into account time and frustration savings from design handoff onward. We've set conservative figures in these examples.

Our figures don't even take into account time and frustration savings from design handoff onward. We've set conservative figures in these examples.

STUDIO

AGENCY

40

Hours

Saved / project

x

5

Projects
this year

x

$100
Your
Billable Rate

x

2

If you typically
deliver wireframes

$40,000

Potential return on investment for design production hours alone!

(This does not factor in development, QA, or other process efficiency gains)

STUDIO

AGENCY

40

Hours

Saved / project

x

5

Projects
this year

x

$100
Your
Billable Rate

x

2

If you typically
deliver wireframes

$40,000

Potential return on investment for design production hours alone!

(This does not factor in development, QA, or other process efficiency gains)

FLEXIBLE COMPONENTS

work smarter

Our components have built in settings for the most widely used eCommerce patterns, anticipating your needs before you even have them.

Notice our components are packed with e-commerce features from the start. You can remix components or choose from a range of starting points.

FLEXIBLE COMPONENTS

work smarter

Our components have built in settings for the most widely used eCommerce patterns, anticipating your needs before you even have them.

Notice our components are packed with e-commerce features from the start. You can remix components or choose from a range of starting points.

FLEXIBLE COMPONENTS

work smarter

Our components have built in settings for the most widely used eCommerce patterns, anticipating your needs before you even have them.

Notice our components are packed with e-commerce features from the start. You can remix components or choose from a range of starting points.

TEMPLATES

shopify checkout flows

Checkout design mockups are critical for team and client sign-off but rarely worth the time needed to produce mock-ups; it's generally left up to developers. We don't think this is a good process, so we created entire checkout flows for you to start with.

Our Shopify checkout flows take the guess work out of the various steps and states in a checkout flow, saving you valuable time and reducing headaches.

TEMPLATES

shopify checkout flows

Checkout design mockups are critical for team and client sign-off but rarely worth the time needed to produce mock-ups; it's generally left up to developers. We don't think this is a good process, so we created entire checkout flows for you to start with.

Our Shopify checkout flows take the guess work out of the various steps and states in a checkout flow, saving you valuable time and reducing headaches.

TEMPLATES

shopify checkout flows

Checkout design mockups are critical for team and client sign-off but rarely worth the time needed to produce mock-ups; it's generally left up to developers. We don't think this is a good process, so we created entire checkout flows for you to start with.

Our Shopify checkout flows take the guess work out of the various steps and states in a checkout flow, saving you valuable time and reducing headaches.

built for

access a $200k+ investment

for just $499/design seat

shopfront in use

shopfront in use

shopfront in use

frequently asked

frequently asked

Can I use ShopFront for commercial use?

Is ShopFront specific to eCommerce?

Does ShopFront include the latest Figma updates?

Which eCommerce platforms does ShopFront work with?


Does ShopFront include UI for Dawn or other Shopify themes?


Is The ShopFront only for Figma?

Can you create a custom kit for our brand?

Can I create and sell themes using ShopFront?


Can I use ShopFront for commercial use?

Is ShopFront specific to eCommerce?

Does ShopFront include the latest Figma updates?

Which eCommerce platforms does ShopFront work with?


Does ShopFront include UI for Dawn or other Shopify themes?


Is The ShopFront only for Figma?

Can you create a custom kit for our brand?

Can I create and sell themes using ShopFront?


Can I use ShopFront for commercial use?

Is ShopFront specific to eCommerce?

Does ShopFront include the latest Figma updates?

Which eCommerce platforms does ShopFront work with?


Does ShopFront include UI for Dawn or other Shopify themes?


Is The ShopFront only for Figma?

Can you create a custom kit for our brand?

Can I create and sell themes using ShopFront?


SHOPFRONT

SHOPFRONT

designed by Art of the cart, an ecommerce design partner to agencies across north america

designed by Art of the cart,

an ecommerce design partner to agencies across north america

designed by Art of the cart,

an ecommerce design partner to agencies across north america

40-80 hours

saved per projects

reduce wireframe

design by 75%

deliver faster

& tighter work

built for

What you're loosing by not using shopfront

Try out you own figures to calculate the return on investment for design production.

Our figures don't even take into account time and frustration savings from design handoff onward. We've set conservative figures in these examples.

STUDIO

AGENCY

40 Hours Saved / project

x

5 Projects this year

x

$100 Your Billable Rate

x

2 If you typically deliver wireframes

$40,000

Potential return on investment for design production hours alone!

(This does not factor in development, QA, or other process efficiency gains)

STUDIO

AGENCY

40 Hours Saved / project

x

5 Projects this year

x

$100 Your Billable Rate

x

2 If you typically deliver wireframes

$40,000

Potential return on investment for design production hours alone!

(This does not factor in development, QA, or other process efficiency gains)