This site has limited support for your browser. We recommend switching to Edge, Chrome, Safari, or Firefox.

{ Course }

Figma to Shopify

Convert a Figma design mockup into a fully operational Shopify store. You'll learn the basics of Shopify and how to customize a Shopify 2.0 theme with HTML, CSS, JSON, and Liquid.

What You'll Learn

Course Curriculum

With the Figma to Shopify course, you’ll learn all the skills you need to get started with the Shopify platform and modifying themes.

Module 1 1 hour

Design for Developers

Understand the design to development process and how to choose the best Shopify theme for your store. Then take a tour of Figma and the new Dev Mode interface.

  • Design to Development Process
  • Choosing a Shopify Theme
  • Figma for Developers
 
Module 2 1 hour 20 minutes

Shopify Store Setup

You'll create a Shopify Partner account and use Shopify’s generated test data to create your very own development store. Then you’ll learn how to set up your theme’s settings and templates to match the Figma design.

  • Creating a Development Store
  • Adding Pages and Navigation
  • Configuring Theme Settings
  • Setting up the Theme's Templates
  • Integrating a Reviews App
 
Module 3 1 hour 11 minutes

Styling Sections

Learn the basics of HTML and CSS and use your new knowledge to add a custom font and style the theme’s existing sections. 

  • HTML Basics
  • CSS Basics
  • Quiz: HTML & CSS
  • Using Chrome DevTools
  • Adding Custom Fonts
  • Styling Existing Sections
 
Module 4 1 hour 8 minutes

Creating New Sections

Never be limited by your theme again! In this module, you’ll learn the basics of Liquid and JSON so you can modify existing sections and create new ones with the help of AI. 

  • Theme Architecture
  • Liquid Basics
  • JSON Settings
  • Quiz: Liquid & JSON
  • Modifying an Existing Section: Testimonials
  • Creating a New Section: Marquee
  • Adding and Displaying Metafields
 
Module 5 15 minutes

Project Wrap Up

We’ll wrap up the project with website testing and learn how to hand off the website to your client.

  • Website Testing
  • Website Handover
 

Figma

Shopify Basics

HTML

CSS

Liquid

Hear From Students

Hear from some of our 100+ students who have found success with Camp Liquid.

If you don't want to spend time google how to develop/design on Shopify, this course helps cut through a lot of the scattered information out there. Everything you need to start learning and feel comfortable with Shopify is in the course.

- Tam M.

I would tell anyone considering Camp Liquid to join ASAP. After looking over the course work, there is tons of valuable information that can really be a game changer for your skill set!

- Krystal C.

If you are serious about learning all you can about Shopify Development. Camp Liquid and the community is a must have resource. It's helped me in so many ways.

- Mike H.

You'll Also Get

In addition to the course lessons and access to the student-only Slack channel, you will also receive these cheatsheets and checklists to simplify your web development projects.

Web Development Process Checklist

Website Questionnaire

Shopify Theme Selection Cheat Sheet

Shopify Website Testing Checklist

{ Meet Your Instructor }

Erin Vaage

After completing a coding bootcamp in 2017, Erin focused on learning Shopify and it was pivotal in landing her first job at a theme development company. She now runs her own freelancing business designing and developing websites for health and wellness brands.

FAQs

Who is this course for?

This course is for anyone who wants to learn how to build websites on Shopify!

You could be a designer who wants to learn how to code, a developer who wants to specialize in Shopify, or even a Shopify merchant who wants to DIY their Shopify theme.

Do I need to know how to code?

Sort of! Having a basic understanding of HTML and CSS will help accelerate your learning.

But if you're a complete beginner we will give you a crash course in HTML and CSS and provide resources for learning more.

We also cover Liquid and JSON and show you how all these languages are used in Shopify themes.

Please email us at hello@campliquid.com if you'd like help assessing if your level of skill will be enough for the course.

What if I design using Adobe XD or Sketch?

The concepts from this course will still apply If you or a designer you partner with uses Adobe XD, Sketch, or another mockup tool. These design tools share many similarities in terms of their interface, functionality, and purpose.

Does Figma to Shopify use the Shopify CLI?

In this course, we use Shopify's code editor as it's geared toward beginners. If you'd like to learn how to develop locally check out Shopify Developer Tools.

How will the content be delivered?

You'll get immediate access to the entire course as soon as you sign up. The course materials are a mix of videos, written content, quizzes, and course worksheets. The community is hosted via Slack.

Do I need to purchase a Shopify theme to take this course?

Nope! All lessons will be taught with Shopify's free theme, Dawn. You'll be able to apply the skills you learn to any Shopify theme.

Do you offer any refunds or guarantees?

We do! All incomplete courses will be eligible for a full refund within 14 days of course purchase.

To return a course, please email customer service at hello@campliquid.com.

Please note: Our support hours are Monday - Friday between 9am - 3pm CT

Enroll

What You'll Get

4 hours 54 minutes of video lessons
Learn at your own pace anytime, anywhere.

Access the community
Join our Slack to ask questions and connect with other students.

Real world projects
So you can build your portfolio.

Figma to Shopify

Beginner
  • Design for Developers
  • Shopify Store Setup
  • Styling Sections
  • Creating New Sections
  • Project Wrap Up

SPLIT PAY

3 Payments Of

$96 $120

PAY IN FULL

1 Payment Of

$280 $349

Camp Liquid courses are risk-free. I'm sure you are going to love it. But if you join us and decide Figma to Shopify isn't for you, you can get a full refund within 14 days.

Use coupon code WELCOME10 for 10% off your first order.

Cart

Congratulations! Your order qualifies for free shipping You are $200 away from free shipping.
No more products available for purchase

Your Cart is Empty