View Customization
Overview
View customization allows you to extend or replace any view within a Spree application both for the Customer Storefront (Frontend) and Admin Panel (Backend).
Template replacement
Spree supports the duplication of views within an application or extension that will completely replace the file of the same name in Spree.
To override any of Spree’s default views including those for the admin interface, simply create a file with the same filename in your app/views directory.
For example, to override product details page, create the file app/views/spree/products/show.html.erb
.
Storefront (Frontend)
Import storefront customizable elements into your application
You can import all customizable elements from spree frontend into your application using this command (in your application root directory):
rails g spree:frontend:copy_storefront
All of those views will be added to your app/views
directory under spree
folder. You can modify them as you wish.
Switch storefront layout
If you want to leave most of the views intact and you want to only change the layout file you can change it by setting a preference in your Spree initializer (config/initializers/spree.rb
), eg.
Spree.config do |config|
config.layout = 'application'
end
This will use the the app/views/layouts/application.html.erb
file.
This is useful when you’re not using the default Spree frontend (aka the spree_frontend
gem).
Switch storefront logo
If you want to change the Spree logo, similary to the layout you need to set a preference in config/initializers/spree.rb
file, eg.
Spree.config do |config|
config.logo = 'my_new_logo.png'
end
This will use a file under app/assets/images/my_new_logo.png
path.
Admin Panel (Backend)
Switch admin logo
You need to set a preference in config/initializers/spree.rb
file, eg.
Spree.config do |config|
config.admin_interface_logo = 'my_new_admin_logo.png'
end
Hide Spree version number
You need to set a preference in config/initializers/spree.rb
file, eg.
Spree.config do |config|
config.admin_show_version = false
end
Adding new links to the Admin Panel menu
You can easily add new links to the admin menu by adding thos code to config/initializers/spree.rb
:
Spree::BackendConfiguration::ORDER_TABS << :my_custom_orders
This will add a link to spree.admin_my_custom_orders_path
route under the Orders
tab.
You can add links to ORDER_TABS
, PRODUCT_TABS
, REPORT_TABS
, CONFIGURATION_TABS
, PROMOTION_TABS
, USER_TABS
.
Import admin views into your application
To get all of the Admin Panel views please type:
rails g spree:backend:copy_views