Skincare portfolio project - custom section

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.
Enroll Now

Custom section for colordept.com

Color dept custom section

Web design by ByAriel.

Get insights into my personal techniques borne out of tight project timelines and high expectations for customisable designs

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.

Imagine if you could...

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

One section, Multiple looks on refineskin.com.au

Web design by Rachel Holly Design Co

The Curriculum

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

Enroll Now

Custom section for jungalow.com

Designed and developed for Empowered Ecommerce

Education Approach

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

One section, Multiple looks for jungalow.com

Designed and developed for Empowered Ecommerce

Who is this for?

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

Custom section for anfisaskin.com

Web design by Oh Sierra

Who is this not for?

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

Custom section for shop.byluciadiaz.com

Web design by Piccolo Paradiso

Start building your
one-of-a-kind designs

$250

Enroll Now

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

Thank you! We'll be in touch soon!
Oops! Something went wrong while submitting the form.