Storefront Pages
Learn how to create and use pages in your Spree storefront
Built-in Pages
Spree Storefront comes with a full set of built-in pages that you can customize via page builder.
Page | Description | Class | Controller |
---|---|---|---|
Home | The main landing page of your store | Spree::Pages::Homepage | Spree::HomeController |
Product Details | Individual product display page | Spree::Pages::ProductDetails | Spree::ProductsController show action |
Taxon | Shows products filtered by taxon | Spree::Pages::Taxon | Spree::TaxonsController |
Search Results | Displays search results for products | Spree::Pages::SearchResults | Spree::SearchController |
Shop All | Shows all products | Spree::Pages::ShopAll | Spree::ProductsController index action |
Blog | Shows your store’s blog posts and articles | Spree::Pages::PostList | Spree::PostsController index action |
Post | Individual blog post | Spree::Pages::Post | Spree::PostsController show action |
Password | Password page, when password protected storefront is enabled | Spree::Pages::Password | Spree::PasswordController |
All of these page can be fully customized via page builder. You can add/remove sections, etc.
We’re planning to add page builder support for the following pages in the next Spree releases:
- Cart
- Checkout
- Account
Custom Landing Pages in the Admin
You can easily create your own landing pages by going to to the Admin -> Storefront -> Pages
and clicking on the New Page
button. More on this in the Create a Landing Page guide. Each custom landing page can be customized via page builder.
Under the hood they use Spree::Pages::Custom class.
Building a new Page from scratch
If you need to build a page that is not one of the built-in pages, you can create your own page class. This will allow you to create a dedicated page for your business needs and at the same time allow your non-technical team to manage the page content without bugging you :)
Let’s assume you need to create a page that displays pickup locations. You already created a new model Spree::PickupLocation
and added some data to the database. Now you want to create a page that displays these pickup locations.
First, let’s add a route for the new page.
Now, create the new page class file:
Now, let’s add the new page class:
You will need to register the new page in the config/initializers/spree.rb
file:
Now, the controller:
Lastly we need to add a view file for the page:
And add the following code to the view file:
render_page
is a helper method defined in the Spree::PageHelper module that renders the page. It fetches all page sections and renders them one by one in the order they are set in the page builder by store staff.
Passing pickup_locations
variable to the render_page
method allows you to use it in the page sections templates, eg.