Store Framework

Learning how to build a store using the Store Framework blocks language, powered by VTEX IO.

Start free course Join 1454 others!

social preview

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
  1. Basic configurations

    Store Framework development prerequisites

  2. Store Framework 101

    Store Framework quick and introductory definitions

  3. Course functioning

    How to interact with the course

  4. Hello, World!

    Compose and reference your first block in Store Framework

  5. Info Card: Store Framework's call to action

    Defining a block's call to action on our homepage

  6. CSS Handles and the power of customizing blocks

    Customize the styles of your blocks

  7. Flex Layout: create layouts using the power of Flexbox

    Let's create complex layouts in a simple way

  8. Product shelf

    How to intuitively display a product window display

  9. Blocks carousel

    Insert content into a carousel layout

  10. Making your content responsive

    Use responsive layout to adapt your content to different devices

  11. Product page

    First steps to creating a product details page

  12. Evolving your product page (pdp)

    Adding new blocks and making the page more interactive

  13. Finishing your pdp

    Using related products and editing properties

  14. Search page

    Getting to know a search page's blocks

  15. Adjusting the search page's layout

    Adding lines and columns to improve the search layout

  16. Global styles

    Editing semantic classes to change your store's style

  17. Creating custom templates

    Create a path and link a customized template

  18. Tab layout

    Using tabs layout on the about us page

  19. Exploring the power behind rich text

    Advanced Markdown usage

  20. Inserting an Iframe on our about us page

    Displaying an Instagram post in your store

  21. Building a custom search landing page

    Defining pages for events that have customized products

  22. Header

    Defining header blocks and editing the iconography

  23. Menu

    Creating your store's browsing

  24. Advanced menu with Flex Layout

    Enriching the menu with additional blocks

  25. Footer

    Defining footer blocks

Share Store Framework
Average time to complete

5763 minutes


All public courses on Learning Lab are free.

Latest release

What is GitHub Learning Lab?

Learn new skills by completing fun, realistic projects in your very own GitHub repository.

Ready to start learning?

Start Store Framework