APIDeveloperUserReleasesDemoContact
  • Core

    • Stores
    • Orders
    • Products
    • Payments
    • Shipments
    • Inventory
    • Promotions
    • Adjustments
    • Taxation
    • Calculators
    • Addresses
    • Preferences
  • Customization

    • Storefront
    • Templates
    • Assets (JS & CSS)
    • Images
    • Dependency system
    • Business Logic
    • Checkout Flow
    • Permissions
    • API v2
    • API v1
    • Authentication
    • Internationalization
    • Extensions
    • Emails
  • Security

    • Security
    • PCI Compliance
    • Authentication and Authorization
    • API
  • Source

    • About the Code
    • Getting Help
    • Navigating the Source
  • Tutorials

    • Getting Started with Spree
    • Add Spree to an existing Ruby on Rails application
    • Developing Spree
    • Improve SEO
    • Creating an Extension
    • Deface Overrides
    • Extend Product Attributes
    • Testing Spree Applications
    • Updating Extensions to Rails 6 and Spree 4
  • Upgrades

    • Upgrading Spree 4.1 to 4.2
    • Upgrading Spree 4.0 to 4.1
    • Upgrading Spree 3.7 to 4.0
    • Upgrading Spree from 3.6 to 3.7
    • Upgrading Spree from 3.5 to 3.6
    • Upgrading Spree from 3.4 to 3.5
    • Upgrading Spree from 3.3 to 3.4
    • Upgrading Spree from 3.2 to 3.3
    • Upgrading Spree from 3.1 to 3.2
    • Upgrading Spree from 3.0 to 3.1

Table Of Contents

OverviewTemplate replacementStorefront (Frontend)Import storefront customizable elements into your applicationSwitch storefront layoutSwitch storefront logoAdmin Panel (Backend)Switch admin logoHide Spree version numberAdding new links to the Admin Panel menuImport admin views into your application

Templates

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
Propose changes to this page
Maintained bySpree Commerce & Ruby on Rails developers© Spree Commerce. 2021 All Rights Reserved.