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
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.
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
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
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)
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.