Store Framework
Learning how to build a store using the Store Framework blocks language, powered by VTEX IO.
Start free course Join 615 others!
Building stores using Store Framework
This course will show you how to use Store Framework, a storefront low-code commerce development tool, designed to build a functional VTEX store's theme from scratch. Store Framework speeds theme creation by reusing visual blocks present in most stores without requiring any additional development. The blocks, however, do not provide a repetitive visual that would make stores very alike, but instead provide ample opportunity for customization through CSS properties and styling.
Learn to use Store Framework and be more productive than ever before in building and maintaining VTEX stores.
Steps to complete this course 25
-
Basic configurations
Store Framework development prerequisites
-
Store Framework 101
Store Framework quick and introductory definitions
-
Course functioning
How to interact with the course
-
Hello, World!
Compose and reference your first block in Store Framework
-
Info Card: Store Framework's call to action
Defining a block's call to action on our homepage
-
CSS Handles and the power of customizing blocks
Customize the styles of your blocks
-
Flex Layout: create layouts using the power of Flexbox
Let's create complex layouts in a simple way
-
Product shelf
How to intuitively display a product window display
-
Blocks carousel
Insert content into a carousel layout
-
Making your content responsive
Use responsive layout to adapt your content to different devices
-
Product page
First steps to creating a product details page
-
Evolving your product page (pdp)
Adding new blocks and making the page more interactive
-
Finishing your pdp
Using related products and editing properties
-
Search page
Getting to know a search page's blocks
-
Adjusting the search page's layout
Adding lines and columns to improve the search layout
-
Global styles
Editing semantic classes to change your store's style
-
Creating custom templates
Create a path and link a customized template
-
Tab layout
Using tabs layout on the about us page
-
Exploring the power behind rich text
Advanced Markdown usage
-
Inserting an Iframe on our about us page
Displaying an Instagram post in your store
-
Building a custom search landing page
Defining pages for events that have customized products
-
Header
Defining header blocks and editing the iconography
-
Menu
Creating your store's browsing
-
Advanced menu with Flex Layout
Enriching the menu with additional blocks
-
Footer
Defining footer blocks
Average time to complete
5763 minutes
Free
All public courses on Learning Lab are free.
Get help
Latest release
What is GitHub Learning Lab?
Learn new skills by completing fun, realistic projects in your very own GitHub repository.