shopfront

shopfront

ecommerce THEME DESIGN KIT & Custom design systems

ShopFront is a first of its kind theme design kit created specifically for Shopify eCommerce design initiatives & growth work.

For brands and agencies looking for flexibility, consistency & dramatically increased time-to-market.

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

built for

3 ways to access shopfront:

License.

License.
The only ecommerce workflow for shopify and figma
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.

Custom Systems.

Custom Systems.
We create highly tailored systems for our brand clients.
We create highly tailored systems for our brand clients.

Whether you need a Figma pattern library, full redesign, or full, custom, design system (Figma + Code) we can build what you need!

Please contact us and we will schedule a call with you and your team.

hire us.

hire us.
Agencies work with us to unlock our process and expertise.
E-commerce
pattern library

If your agency has frequent eCommerce design needs, we might be a great partner for you! Please get in touch.

Visit our studio: artofthecart.com to learn more.

Contact us for a quote

WHO IS IT FOR:

for teams on
figma & shopify

for teams on
figma & shopify

brand creative & UX Teams

brand creative & UX Teams

ShopFront is the go-to starting point for in-house projects and supports replatform, redesign, growth, CRO and on-going creative pursuits. ShopFront can be tailored for your brand by your team or ours.

Training is available on custom projects.


agencies & creative studios

Agency design
system in-a-box

Studios and agencies can work with our team to lead the creation of custom design systems, replatform and redesign projects - gaining access to our unique process.

We also license ShopFront to select agencies on a per/year, right to use agreement.

Contact us for a quote

the ultimate ecommerce
design resource for brands & agencies

A design process

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

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 - Optimized for multi-brand setups

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 - Optimized for multi-brand setups

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 - Optimized for multi-brand setups

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.

FOR STUDIOS & AGENCIES

FOR STUDIOS & AGENCIES

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)

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?


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

SHOPFRONT

SHOPFRONT

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)

shopfront

ecommerce THEME DESIGN KIT & Custom design systems

3 ways to access shopfront:
License.
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.

Custom Systems.
We create highly tailored systems for our brand clients.

Whether you need a Figma pattern library, full redesign, or full, custom, design system (Figma + Code) we can build what you need!

Please contact us and we will schedule a call with you and your team.

hire us.
E-commerce
pattern library

If your agency has frequent eCommerce design needs, we might be a great partner for you! Please get in touch.

Visit our studio: artofthecart.com to learn more.

Contact us for a quote