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

deliver faster

& tighter work

Preview in Figma

for design teams

using figma & shopify

for design teams

using figma & shopify

for design teams

using figma & shopify

built for

built for

you're invited to license shopfront for use in your own brand, studio, agency or consultancy.

you're invited to license shopfront for use in your own brand, studio, agency or consultancy.

ShopFront is a membership driven, vetted licensing partnership that puts a professional design system into the hands of design teams - who typically wouldn't be able to access or build a resource like this within their own businesses. We want every eCommerce business to thrive and we know they have a greater chance at that with a system at their center.

Read Our Story

FLEXIBLE COMPONENTS

work smarter

work smarter

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

We designed a flexible variable color setup that in finely-tuned to be everything you need for an eCommerce site design, nothing you don't and is intuitive.

VARIABLE COLOR

on-brand in minutes

on-brand in minutes

Changing the global color variable takes just a few minutes and you will see your designs cascade across the file. Our color variables make easy work of quickly modifying a components background fill, type, icon and border colors.

We designed a flexible variable color setup that in finely-tuned to be everything you need for an eCommerce site design, nothing you don't and is intuitive.

VARIABLE COLOR

designed for ecommerce

designed for ecommerce

Pre-configured type styles are applied to every element in the file making quick work of typeface changes

We've created a straight forward type style setup that maps to real world needs of an eCommerce experience including product name and pricing styles.

TEMPLATES

shopify checkout flows

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.

in the wild

in the wild

in the wild

the return

on investment

of just $499

per design seat

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

(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

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

the return

on investment

of just $499

per design seat

the return

on investment

of just $499

per design seat

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

(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

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

HEY CRO!

HEY CRO!

shopfront is perfect

for growth-focused teams

shopfront is perfect

for growth-focused teams

Because ShopFront becomes your design source of truth within an 'on-brand' ecosystem, your growth teams can quickly create A/B test ideas or audit annotations and examples with both speed and confidence that they are not introducing bad actors into the site experience.

Because ShopFront becomes your design source of truth within an 'on-brand' ecosystem, your growth teams can quickly create A/B test ideas or audit annotations and examples with both speed and confidence that they are not introducing bad actors into the site experience.

ANNOTATION KIT IS INCLUDED

ANNOTATION KIT IS INCLUDED

Because ShopFront becomes your design source of truth within an 'on-brand' ecosystem, your growth teams can quickly create A/B test ideas with both speed and confidence that they are not introducing bad actors into the site experience.

FAQS

FAQS

FAQS

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

SHOPFRONT

VARIABLE COLOR

on-brand in minutes

Changing the global color variable takes just a few minutes and you will see your designs cascade across the file. Our color variables make easy work of quickly modifying a components background fill, type, icon and border colors.

We designed a flexible variable color setup that in finely-tuned to be everything you need for an eCommerce site design, nothing you don't and is intuitive.

VARIABLE COLOR

designed for ecommerce

Pre-configured type styles are applied to every element in the file making quick work of typeface changes

We've created a straight forward type style setup that maps to real world needs of an eCommerce experience including product name and pricing styles.

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.

We designed a flexible variable color setup that in finely-tuned to be everything you need for an eCommerce site design, nothing you don't and is intuitive.

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.

40-80 hours

saved per projects

reduce wireframe

design by 75%

deliver faster

& tighter work

Preview in Figma