Sections

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 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)

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 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

Documentation on content sections is coming soon

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.

Creating a new section

Documentation on creating a new section is coming soon

Getting started

Customizing Spree

Use Cases

Deployment

Upgrading

Contributing

Security

Advanced

Quick Start

Layout sections

Content sections