Build custom Shopify sections with Webflow
Learn how to elevate existing themes with unique, customisable sections with ease and reduced development time.
Thank you! We'll be in touch soon!
Oops! Something went wrong while submitting the form.
Learn how to elevate existing themes with unique, customisable sections with ease and reduced development time.
Web design by ByAriel.
What I'm sharing in this course is a process that I came up with on a client project where I had very little time to create a fully custom theme.
Over the years, I've experimented and refined the process on my client projects, even for websites that were very much theme-based. It's hard not to when it's made such an impact on my workflow and service offerings.
Offer theme-based sites that stand out
Build new sections visually on Webflow
Reduce development workload and speed up project turnaround
Have more creative freedom to create unique websites
Stop telling clients 'we can't do that'
Provide a higher level of value to your client
Make your project an easy 'yes' for brands
Enroll Now
Web design by Rachel Holly Design Co
Chapter 1: Planning and preparing
We'll start by introducing the design of our custom section in Figma, and working out how we'll go about building it. Once we've broken it down, we'll explore the Designer interface of Webflow.
Chapter 2: Building the section on Webflow
There's no better way to learn how to develop than just doing it. Here we'll build the section together in Webflow, work out how to overcome certain Webflow limitations, and make the section responsive.
Chapter 3: Migrating to Shopify
Once our section is built in Webflow, we'll tidy things up and migrate it over to Shopify. We'll then test the section in Shopify and address any inheritance issues (not the legal kind - I'm talking about CSS here).
Chapter 4: Optimise, optimise, optimise!
You could just end things in the previous chapter but there's so much more you can do to optimise it! This is where you can really set yourself apart from other designers/developers by thinking ahead and building things in a smart way. Know that anytime you can deliver a website that is going to pay for itself in saved future developer costs, clients will love you for it and trust your expertise.
In this chapter, we'll optimise our section over six iterations and talk about how to increase flexibility and reduce workload through my case studies.
Base knowledge
Here you'll find references to the key knowledge you'll need. It's separate from the chapters so you can jump into it only if you need to, or easily refer back to it later on in the future.
CSS layout tool: Positioning
CSS layout tool: Flex
CSS layout tool: Grid
CSS layout tool: Positioning
Liquid: Objects
Liquid: Basics
Liquid: Logic
Liquid: Filters
Designed and developed for Empowered Ecommerce
Learn by watching me do it instead of going over theory first.
Learn concepts as the need arises so you can see their immediate purpose and application.
No need to mentally retain information ahead of time, wondering how to apply it in the real world.
Start from the simplest solution and optimise it iteration by iteration.
Enroll Now
Designed and developed for Empowered Ecommerce
Webflow designers who want to offer Shopify
Shopify designers who want to learn development but feel jumping straight into code is very overwhelming
Shopify developers who want to build sections faster or are more visual-oriented
Enroll Now
Web design by Oh Sierra
If you are completely unfamiliar with HTML and CSS – start with the basics first and then come back.
Shopify designers who are brand new to Shopify – do a few semi-custom projects first before coming back.
Shopify designers who have zero interest in development – you can always outsource it to me :)
Shopify designers who prefer to stick to CSS-only semi-custom themes
Web design by Piccolo Paradiso
$250
Enroll NowThis is a one-time purchase for lifetime access. Content will start dripping out in March on Teachable. As this is a digital product, the purchase is non-cancelable and the fee is non-refundable.