Spree Commerce documentation home pagelight logodark logo
  • Community
  • Github
  • Getting started
    • Quickstart
    • Architecture
    • Stores
    • Orders
    • Users
    • Products
    • Inventory
    • Payments
    • Taxes
    • Promotions
    • Shipments
    • Calculators
    • Adjustments
    • Addresses
    • Internationalization
    Customizing Spree
    • Quickstart
    • Configuration
    • Storefront
      • Overview
      • Themes
      • Pages
      • Sections
      • Blocks
      • Links
      • Images & Assets
      • Helper Methods
      • Custom JavaScript
      • Custom CSS
    • Admin Dashboard
    • Authentication
    • Checkout Flow
    • Permissions
    • Dependencies
    • Decorators
    • Model Preferences
    • Metadata
    • Routes
    • API
    • Custom Promotions
    • Extensions
    Use Cases
    • Multi-Tenant
    Deployment
    • Render
    • Docker
    • Environment Variables
    • Emails
    • Assets
    • CDN
    • Caching
    Upgrading
    • Quickstart
    • Upgrade Guides
    Contributing
    • Quickstart
    • Developing Spree
    • Creating an Extension
    Security
    • Security policy
    • PCI Compliance
    Advanced
    • Adding to an existing Rails app
    • Support
    • Get started
    Spree Commerce documentation home pagelight logodark logo
    • Support
    • Get started
    • Get started
    Developer Docs
    Ecommerce API
    Integrations
    User Docs
    Use Cases
    Developer Docs
    Ecommerce API
    Integrations
    User Docs
    Use Cases
    Storefront

    Storefront Overview

    Spree 5 ships with a new mobile-first storefront that is fully customizable & themeable.

    ​
    Architecture

    Spree Storefront consists of:

    Themes

    Themes are a collection of styles, scripts and templates that are used to style and layout the storefront.

    Pages

    Pages are the main building blocks of the storefront. They are used to create the structure of the storefront. Each Theme comes with a set of default pages such as Home Page, Product Listing Page, Product Page, etc, but you can create your own custom landing pages as well.

    Sections

    Sections are the building blocks of the pages. They are used to create the structure of the pages. Each Section is a collection of Blocks.

    Blocks

    Blocks are the smallest building blocks of the storefront. They are used to create the content of the pages.

    Links

    Links are used to create the navigation of the storefront. They can be assigned to Sections and Blocks.

    ​
    Page Builder

    The new storefront comes with a visual Page Builder that allows non-developers to build pages using a drag-and-drop interface, as a part of Spree Admin Dashboard (provided via spree_admin gem). This allows your team to create new pages and sections, modify existing ones, and add new blocks to the pages in a no-code way.

    You can learn more about the Page Builder in the User Documentation.

    Was this page helpful?

    Suggest editsRaise issue
    Previous
    ThemesLearn how to develop themes for your Spree storefront
    Next
    githubx
    Powered by Mintlify
    On this page
    • Architecture
    • Page Builder
    Assistant
    Responses are generated using AI and may contain mistakes.