Commerce Course

Blocs Commerce Course

Learn everything you need to know to build a fully functional e-commerce website in Blocs app and popular payment processors.

The Curriculum

Blocs Commerce Course Overview
Part 1. Commerce Website Basics

1-1. Course Introduction
⁃ Overview of this course
⁃ Learning Recommendations
⁃ Limitations of Blocs 4 Commerce Course

1-2. Different Ways to Create a Commerce Website
⁃ Possible ways to build a commerce website in Blocs
⁃ Three scenarios I am covering in this course

1-3. Payment Processors and Ecommerce Platforms
⁃ The need for payment processor or commerce platform
⁃ Two payment processors I recommend
⁃ Commerce platforms recommendations
⁃ The difference between payment processors and commerce platforms
⁃ Fees and Subscriptions

1-4. Choosing the Right Ecommerce Platform
⁃ How to determine the right platform for you
⁃ Things to consider (geographical limitations)
⁃ Recommendations for different product types

1-5. Commissions & Fees – Real-world Example
⁃ What’s included in the price
⁃ Possible commissions, fees, and subscriptions
⁃ Real-world example (Blocs Master course)

1-6. The Role of Blocs App
⁃ Why the version of Blocs is not that important
⁃ Your responsibility as a Blocs designer

1-7. Pages for Commerce Websites
⁃ Essential pages to include in your commerce website
⁃ Recommended pages to add to commerce website
⁃ Legal recommendations

Part 2. Selling a Single Product or Service
2-1. Overview of the Part 2
⁃ Overview of this part

2-2. How to Build an Effective Product Landing Page
⁃ What to include on a product landing page
⁃ Blocs app website example
⁃ Blocs Templates website example
⁃ Page design tips and recommendations

2-3. Setting Up Purchase Buttons with Gumroad
⁃ Duplicating blocs across different pages
⁃ Adding a product in Gumroad
⁃ Embedding the Gumroad purchase buttons
⁃ Linking Blocs buttons to Gumroad Overlay checkout

2-4. Setting Up Purchase Buttons with Stripe
⁃ Adding a product in Stripe
⁃ Creating payment links in Stripe
⁃ Linking buttons in Blocs to Stripe
⁃ Setting Stripe account in Blocs Project Settings
⁃ Using Ecommerce Interaction in Blocs 4

2-5. Sell Services with Acuity (Squarespace) Scheduling
⁃ Acuity (Squarespace) Scheduling Basics
⁃ Adding Appointment Types
⁃ Embedding Options for Acuity Scheduling
⁃ Customizing the Intake forms
⁃ Setting up payments in Acuity Scheduling
⁃ Embedding the Acuity scheduler
⁃ Embedding the overlay scheduling button
⁃ Booking & calendar syncing example

2-6. Setting Up Purchase Buttons with Paddle
⁃ Adding a product in Paddle
⁃ Using Ecommerce Interaction in Blocs

Part 3. Building Small to Medium Commerce Website

3-1. Overview of Part 3
⁃ Overview of this part
⁃ Introduction of Blocs Brics website

3-2. Planning a Commerce Website
⁃ Putting together a list of things to include on our website
⁃ Deciding on the format for each page
⁃ Deciding what to include in the global content areas

3-3. Building a Structure of Blocs Website
⁃ Overview of our product
⁃ Creating a project in Blocs 4
⁃ Bootstrap 4 vs Bootstrap 5
⁃ Creating pages in Blocs project
⁃ Putting together a simple page layout
⁃ Importing the images to Asset Manager

3-4. Designing a Home Page
⁃ Setting default typography settings
⁃ Setting Project Settings for our Project
⁃ Designing the page (speeded up)
⁃ Bugs & Crashes in Blocs
⁃ Recommendations for saving a project
⁃ Creating a grid of products
⁃ Adding hover effects using CSS filters

3-5. Building a simple FAQ section
⁃ Adding tooltips to images (coming soon products)
⁃ Adding Blocs Edge Dividers
⁃ Building a simple FAQ section
⁃ Using Toggle Visibility feature
⁃ Fixing a problem with fathom spacing

3-6. Building a Website Footer
⁃ Building a simple banner with button for Newsletter
⁃ Using Custom Blocs to quickly build the footer
⁃ Adjusting the typography style for footer links
⁃ Completing the product landing page

3-7. Building a Support Page
⁃ Using Acuity Scheduling for call scheduling
⁃ Building a simple page structure
⁃ Using Email interaction
⁃ Using Emoji instead of icons

3-8. Building a Thank You Page
⁃ Creating a layout for a thank you page
⁃ What to include on a Thank You page

3-9. Building and Managing Product Pages
⁃ What to include on a product page
⁃ Designing the product page
⁃ Building the preview gallery section
⁃ Creating groups in Asset Manager
⁃ Adjusting the Scroll to Top button
⁃ Adding and linking a new product to the product grid

3-10. Building a Pricing Page
⁃ Creating a simple layout for the pricing page
⁃ Creating a 3-tier pricing table
⁃ Creating gradient text styles

3-11. Creating and Linking a Product with Paddle
⁃ Packaging our digital product
⁃ Adding a product to Paddle
⁃ Linking a Thank You page in Paddle
⁃ Setting up Paddle purchase buttons
⁃ Checking all purchase links and images

3-12. Creating and Linking a Product with Podia
⁃ Creating a products in Podia
⁃ Changing the settings for Podia products
⁃ Embedding Podia purchase buttons
⁃ Embedding Podia product cards
⁃ Embedding Podia purchase links
⁃ Podia plans comparison and recommendations

3-13. Finalizing & Publishing
⁃ Finalizing the look for all pages
⁃ Checking all of the links
⁃ Exporting our project
⁃ Publishing to FTP server

Part 4. Building Large Commerce Websites with Ecwid

4-1. Overview of Part 4
⁃ When I recommend to use Ecwid with Blocs
⁃ Other similar ways to create similar websites (WP)
⁃ What’s included in this part

4-2. Creating an Ecwid Account
⁃ Creating an Ecwid account
⁃ Setting up our Store
⁃ List of products you can sell on Ecwid
⁃ Ecwid pricing plans comparison and recommendations

4-3. Getting Started with Ecwid Settings
⁃ Ecwid Dashboard overview
⁃ Reviewing the regional settings
⁃ Linking Ecwid to our URL
⁃ Setting Basics store settings
⁃ Enabling GDPR cookie consent banner

4-4. Setting Up Payment & Shipping Methods
⁃ Many ways to embed the Ecwid shop page
⁃ Setting up payments with PayPal, Stripe, and other options
⁃ Adding shipping methods to our store
⁃ Setting automatically calculated shipping rates
⁃ Deleting demo products

4-5. Creating Products & Categories in Ecwid
⁃ Downloading copyright-free images from Shopify
⁃ Importing products to Ecwid in bulk
⁃ Adding new products in Ecwid
⁃ Adding different options to products
⁃ Setting up Tax rates
⁃ Setting Product Categories

4-6. Changing the Look of the Ecwid Store
⁃ Adding and reordering images in product pages
⁃ Assigning categories for products
⁃ Adjusting the layout and design of the Ecwid Store
⁃ Changing the layout of product pages

4-7. Embedding the Ecwid Shop Page
⁃ Adjusting the shop page on Startup template
⁃ Embedding the whole Ecwid shop using Code Widget bric
⁃ Ecwid shop experience overview
⁃ Applying changes to our Store via Ecwid Dashboard

4-8. Adjusting the Typography Colors
⁃ Using Color Adaptation feature in Ecwid
⁃ Setting font colors in Blocs app
⁃ Adjusting the footer menu of the Ecwid Store

4-9. Adding the Shopping Cart Icon & Product Search
⁃ Embedding a shopping cart icon
⁃ Using the Ecwid shopping cart
⁃ Footer menu options overview
⁃ Embedding a product search box

4-10. Finalizing the Settings of the Ecwid Shop
⁃ Setting up the Legal section
⁃ Adding content to Terms and Conditions, etc
⁃ Disabling/Enabling email marketing consent
⁃ Checking the notification emails
⁃ Customizing the Invoice formats
⁃ Adding related products in Ecwid
⁃ Final thoughts on Ecwid & Blocs workflow