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
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
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
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
Potential return on investment for design production hours alone!
(This does not factor in development, QA, or other process efficiency gains)