Sections
Learn how to utilize sections to build your Spree Storefront
Quick Start
Sections are the building blocks of all pages in Spree Storefront.
There are two types of sections:
Layout sections
- eg. Header, Footer
- Present on all pages
Content sections
- eg. Hero, Featured Products
- Present on specific pages
- can be managed via the Page Builder
Let’s take a look at the page structure of Spree Storefront:
As you can see, the page is divided into sections. Each section is a component that is used to create the page. Most sections are containers that consist of multiple blocks which you can manage via the Page Builder (add/customize/remove/change their order).
Each section consists of:
| File | Description | Example |
|---|---|---|
| ActiveRecord model | Defines the section’s preferences | Spree::PageSections::ImageWithText |
| Storefront view | Renders the section in the storefront - each theme can have its own view | image_with_text.html.erb |
| Admin page builder form | Configures the section in the admin panel | image_with_text/_form.html.erb |
Layout Sections
We have two types of layout sections - Header and Footer. As the name suggests, they are rendered at the top and bottom of the page respectively. Between them, we have a main content area that is used to render the page sections.
Header sections
Announcement Bar
A simple announcement bar section that displays a message to the users.
Header
Header is one of the most important sections in the storefront. It is used to display the store’s logo, navigation menu, search bar, cart icon, and user menu.
Header can have a simple one-level navigation menu or a more complex multi-level menu (aka mega menu)
Footer sections
Newsletter
A newsletter section that allows users to subscribe to the store’s newsletter. If you connected your store to a newsletter provider (eg. Klaviyo, Mailchimp, etc.), you can use this section to collect emails and send them to your provider (Only in Spree 5.1+).
Footer
Footer is a section that is used to display the store’s footer. It is typically used to display the store’s logo, copyright information, store policies, and other important links.
Content Sections
Architecture
Let’s dive into the details of how sections work.
Active Record Model
Each section’s model inherit from Spree::PageSection abstract model class.
Associations
Each sections has many blocks and links. You can call them via section.blocks and section.links respectively.
Section belongs to a polymorphic parent model called pageable which can be either Spree::Page (content sections) or Spree::Theme (layout sections).
You can access section’s theme by calling section.theme.
Preferences
Each section has set of default preferences
| Name | Description | Default Value |
|---|---|---|
text_color | Color of text in the section | nil - uses theme’s text color |
background_color | Background color of the section | nil - uses theme’s background color |
border_color | Color of section borders | nil - uses theme’s border color |
top_padding | Padding space above section content (in pixels) | 40 |
bottom_padding | Padding space below section content (in pixels) | 40 |
top_border_width | Width of top border (in pixels) | 1 |
bottom_border_width | Width of bottom border (in pixels) | 0 |
Particular sections can introduce their own preferences. For example, Spree::PageSections::ImageWithText has desktop_image_alignment and vertical_alignment preferences.