{ 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.
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
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
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
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
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
Hear From Students
Hear from some of our 100+ students who have found success with Camp Liquid.
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
$100
PAY IN FULL
1 Payment Of
$297
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.