Extending Admin Dashboard UI - Spree Commerce documentation

Spree Admin Dashboard allows you easily extend existing pages and screens with your own code, without any need to modify the core codebase. This allows you to easily inject your custom UI elements without compromising the integrity of the core codebase. Which in effect allows you to safely update your Spree installation to the latest version.

How it works

The entire system works on the basis of injection points which are declared throughout the admin dashboard and allows you to push your own code there. Each injection point is identified by a key, eg. body_end_partials. Let’s say you want to add a new footer to the admin dashboard. You’ll need to generate a template in your application:

Ensure you have the proper directory to store your templates:
```
mkdir -p app/views/spree/admin/shared
```
Create a new partial template file (partial templates file names start with underscore)
```
touch app/views/spree/admin/shared/_additional_footer.html.erb
```

Add your own code to the partial

<div class="mx-auto bg-light p-3 rounded-lg text-center w-10">
  Copyright <%= current_store.name %> <%= Time.current.year %>
</div>

Register your partial in config/initializers/spree.rb
```
Rails.application.config.spree_admin.body_end_partials << 'spree/admin/shared/additional_footer'
```
The key is the name of the injection point, eg. body_end_partials.

Remember to use the correct path to your partial and skip the _ prefix.
Restart your web server and you should see your new footer.

Making further changes to the partial template will not require you to restart the web server. They will be picked up automatically.

Admin Dashboard injection points

Here’s a list of all places you can inject your custom code:

Layout

<head>

head_partialsInjects code into the <head> tag

<body>

body_start_partialsInjects code into the <body> tag, before the main content

</body>

body_end_partialsInjects code into the <body> tag, after the main content

Dashboard

Analytics

dashboard_analytics_partials

Injects code into the dashboard analytics section, eg.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Top ERP products</h5>
  </div>
  <div class="card-footer">
    <%# ... my custom content ... %>
  </div>
</div>

Sidebar

dashboard_sidebar_partials

Injects code into the dashboard sidebar, eg.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Latest ERP syncs</h5>
  </div>
  <div class="card-footer">
    <%# ... my custom content ... %>
  </div>
</div>

Orders

Orders Actions

orders_actions_partialsInjects code into the page actions area (top right of the page) for the orders list page. This is useful for adding custom buttons, export options, or other actions.

<%= link_to "Export to ERP", export_orders_to_erp_path, class: "btn btn-secondary" %>

Orders Header

orders_header_partialsInjects code between the page header and the main content area for the orders list page. This is useful for adding notifications, alerts, or additional information.

<div class="alert alert-info">
  <strong>Processing:</strong> Orders are automatically processed and shipped within 24 hours.
</div>

Orders Filters

orders_filters_partials

Variables

ActionView::Helpers::FormBuilder

The ActionView::Helpers::FormBuilder object.

Injects code into the orders list filters, to add custom filters. This partial has access to the f variable, which is the form builder for the filters, eg.

<%= f.text_field :q_number_cont, class: "form-control", data: { filters_target: :input } %>

q_number_cont - The name of the filter field. For filtering we’re using ransack gem, so the name of the filter field is the name of the attribute we’re filtering by. Learn more about ransack search syntax.
form-control - A bootstrap class for styling the input field.
data: { filters_target: :input } - Needed for the Stimulus Filters controller to work.

Order Page Dropdown

order_page_dropdown_partials

Variables

order

Spree::Order

The Spree::Order object.

Injects code into the order page dropdown. This partial has access to the order variable.To add an additional dropdown item, you can use the following code:

<%= link_to "View Order in ERP", "https://erp.com/orders/#{order.number}", class: "dropdown-item", target: "_blank" %>

dropdown-item is a bootstrap class for styling the dropdown item
target: "_blank" is used to open the link in a new tab

Order Page Header

order_page_header_partials

Variables

order

Spree::Order

The Spree::Order object.

Injects code into the order page header.To add an additional action button near the ... button, you can use the following code:

Injects code into the order page header.To add an additional action button near the ... button, you can use the following code:

<%= content_for :page_actions do %>
  <%= link_to "Send to ERP", "#", class: "btn btn-primary" %>
<% end %>

To add an inline alert to the order page, you can use the following code:

<%= content_for :page_alerts do %>
  <% if order.sent_to_erp_at.blank? %>
    <div class="alert alert-success">Order sent to ERP at <%= local_time(order.sent_to_erp_at) %></div>
  <% else %>
    <div class="alert alert-danger">Order not sent to ERP</div>
  <% end %>
<% end %>

local_time is a helper for displaying the time in the user’s timezone in a human readable format (based on the browser’s timezone).

Order Page Body

order_page_body_partials

Variables

order

Spree::Order

The Spree::Order object.

Injects code into the order page body. This partial has access to the order variable.To add a new section to the order page, you can use the following code:

<div class="card mb-4">
  <div class="card-header">
    <h5 class="card-title">ERP Integration</h5>
  </div>
  <div class="card-body">
    <% if order.sent_to_erp_at.blank? %>
      <p class="text-muted text-center">Order not sent to ERP</p>
    <% else %>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <strong>ERP Order ID:</strong> <%= order.erp_order_id %>
        </li>
        <li class="list-group-item">
          <strong>Sent to ERP at:</strong> <%= local_time(order.sent_to_erp_at) %>
        </li>
      </ul>
    <% end %>
  </div>
</div>

Order Page Sidebar

order_page_sidebar_partials

Variables

order

Spree::Order

The Spree::Order object.

Injects code into the order page sidebar. This partial has access to the order variable.

Customers

Customers Actions

users_actions_partialsInjects code into the page actions area (top right of the page) for the customers list page. This is useful for adding custom buttons, export options, or other actions.

<%= link_to "Sync with CRM", sync_customers_path, class: "btn btn-secondary" %>

Customers Header

users_header_partialsInjects code between the page header and the main content area for the customers list page. This is useful for adding notifications, alerts, or additional information.

<div class="alert alert-info">
  <strong>Note:</strong> Customer data is synced with CRM every hour.
</div>

Customers Filters

users_filters_partials

Variables

ActionView::Helpers::FormBuilder

The ActionView::Helpers::FormBuilder object.

Injects code into the customers list filters. This partial has access to the f variable, which is the form builder for the filters.

<div class="form-group">
  <%= f.label :custom_field_eq, "Customer Type" %>
  <%= f.select :custom_field_eq, options_for_select([["VIP", "vip"], ["Regular", "regular"]]), { include_blank: true }, { class: "custom-select", data: { filters_target: :input } } %>
</div>

Use ransack search syntax for filter field names
Include data: { filters_target: :input } for proper integration with the Stimulus Filters controller

Stock Items

Stock Items Actions

stock_items_actions_partialsInjects code into the page actions area for the stock items list page.

<%= link_to "Export to WMS", export_stock_to_wms_path, class: "btn btn-secondary" %>

Stock Items Header

stock_items_header_partialsInjects code between the page header and the main content area for the stock items list page.

<div class="alert alert-warning">
  <strong>Warning:</strong> Low stock items require attention.
</div>

Stock Items Filters

stock_items_filters_partials

Variables

ActionView::Helpers::FormBuilder

The ActionView::Helpers::FormBuilder object.

Injects code into the stock items list filters.

<div class="form-group">
  <%= f.label :count_on_hand_lt, "Stock Below" %>
  <%= f.number_field :count_on_hand_lt, class: "form-control", data: { filters_target: :input } %>
</div>

Admin Users

Admin Users Actions

admin_users_actions_partialsInjects code into the page actions area for the admin users list page.

<%= link_to "Export Users", export_admin_users_path, class: "btn btn-secondary" %>

Admin Users Header

admin_users_header_partialsInjects code between the page header and the main content area for the admin users list page.

<div class="alert alert-info">
  <strong>Security:</strong> Review admin access regularly.
</div>

Classifications

Classifications Actions

classifications_actions_partialsInjects code into the page actions area for the classifications list page.

<%= link_to "Bulk Update", bulk_update_classifications_path, class: "btn btn-secondary" %>

Classifications Header

classifications_header_partialsInjects code between the page header and the main content area for the classifications list page.

<div class="alert alert-info">
  <strong>Tip:</strong> Use drag and drop to reorder classifications.
</div>

Coupon Codes

Coupon Codes Actions

coupon_codes_actions_partialsInjects code into the page actions area for the coupon codes list page.

<%= link_to "Generate Bulk Codes", bulk_generate_coupons_path, class: "btn btn-secondary" %>

Coupon Codes Header

coupon_codes_header_partialsInjects code between the page header and the main content area for the coupon codes list page.

<div class="alert alert-warning">
  <strong>Notice:</strong> Expired codes will be automatically cleaned up.
</div>

Custom Domains

Custom Domains Actions

custom_domains_actions_partialsInjects code into the page actions area for the custom domains list page.

<%= link_to "Verify All Domains", verify_all_domains_path, class: "btn btn-secondary" %>

Custom Domains Header

custom_domains_header_partialsInjects code between the page header and the main content area for the custom domains list page.

<div class="alert alert-info">
  <strong>SSL:</strong> SSL certificates are automatically managed.
</div>

Customer Returns

Customer Returns Actions

customer_returns_actions_partialsInjects code into the page actions area for the customer returns list page.

<%= link_to "Export Returns Report", export_returns_path, class: "btn btn-secondary" %>

Customer Returns Header

customer_returns_header_partialsInjects code between the page header and the main content area for the customer returns list page.

<div class="alert alert-info">
  <strong>Processing:</strong> Returns are processed within 3-5 business days.
</div>

Customer Returns Filters

customer_returns_filters_partials

Variables

ActionView::Helpers::FormBuilder

The ActionView::Helpers::FormBuilder object.

Injects code into the customer returns list filters.

<div class="form-group">
  <%= f.label :reason_eq, "Return Reason" %>
  <%= f.select :reason_eq, options_for_select([["Damaged", "damaged"], ["Wrong Item", "wrong_item"]]), { include_blank: true }, { class: "custom-select", data: { filters_target: :input } } %>
</div>

Digital Assets

Digital Assets Actions

digital_assets_actions_partialsInjects code into the page actions area for the digital assets list page.

<%= link_to "Bulk Upload", bulk_upload_assets_path, class: "btn btn-secondary" %>

Digital Assets Header

digital_assets_header_partialsInjects code between the page header and the main content area for the digital assets list page.

<div class="alert alert-info">
  <strong>Storage:</strong> Assets are stored in cloud storage with CDN.
</div>

Exports

Exports Actions

exports_actions_partialsInjects code into the page actions area for the exports list page.

<%= link_to "Schedule Export", new_scheduled_export_path, class: "btn btn-secondary" %>

Exports Header

exports_header_partialsInjects code between the page header and the main content area for the exports list page.

<div class="alert alert-info">
  <strong>Retention:</strong> Export files are kept for 30 days.
</div>

Gift Cards

Gift Cards Actions

gift_cards_actions_partialsInjects code into the page actions area for the gift cards list page.

<%= link_to "Bulk Generate", bulk_generate_gift_cards_path, class: "btn btn-secondary" %>

Gift Cards Header

gift_cards_header_partialsInjects code between the page header and the main content area for the gift cards list page.

<div class="alert alert-info">
  <strong>Security:</strong> Gift card codes are encrypted at rest.
</div>

Gift Cards Filters

gift_cards_filters_partials

Variables

ActionView::Helpers::FormBuilder

The ActionView::Helpers::FormBuilder object.

Injects code into the gift cards list filters.

<div class="form-group">
  <%= f.label :balance_gt, "Balance Greater Than" %>
  <%= f.number_field :balance_gt, step: 0.01, class: "form-control", data: { filters_target: :input } %>
</div>

Integrations

Integrations Actions

integrations_actions_partialsInjects code into the page actions area for the integrations list page.

<%= link_to "Test All Connections", test_integrations_path, class: "btn btn-secondary" %>

Integrations Header

integrations_header_partialsInjects code between the page header and the main content area for the integrations list page.

<div class="alert alert-warning">
  <strong>Status:</strong> Check integration health regularly.
</div>

Invitations

Invitations Actions

invitations_actions_partialsInjects code into the page actions area for the invitations list page.

<%= link_to "Resend All Pending", resend_pending_invitations_path, class: "btn btn-secondary" %>

Invitations Header

invitations_header_partialsInjects code between the page header and the main content area for the invitations list page.

<div class="alert alert-info">
  <strong>Expiry:</strong> Invitations expire after 7 days.
</div>

OAuth Applications

OAuth Applications Actions

oauth_applications_actions_partialsInjects code into the page actions area for the OAuth applications list page.

<%= link_to "Security Audit", oauth_security_audit_path, class: "btn btn-secondary" %>

OAuth Applications Header

oauth_applications_header_partialsInjects code between the page header and the main content area for the OAuth applications list page.

<div class="alert alert-warning">
  <strong>Security:</strong> Review OAuth applications regularly.
</div>

Option Types

Option Types Actions

option_types_actions_partialsInjects code into the page actions area for the option types list page.

<%= link_to "Import Options", import_option_types_path, class: "btn btn-secondary" %>

Option Types Header

option_types_header_partialsInjects code between the page header and the main content area for the option types list page.

<div class="alert alert-info">
  <strong>Variants:</strong> Option types are used to create product variants.
</div>

Pages

Pages Actions

pages_actions_partialsInjects code into the page actions area for the pages list page.

<%= link_to "Export Content", export_pages_path, class: "btn btn-secondary" %>

Pages Header

pages_header_partialsInjects code between the page header and the main content area for the pages list page.

<div class="alert alert-info">
  <strong>SEO:</strong> Remember to optimize page content for search engines.
</div>

Payment Methods

Payment Methods Actions

payment_methods_actions_partialsInjects code into the page actions area for the payment methods list page.

<%= link_to "Test All Gateways", test_payment_gateways_path, class: "btn btn-secondary" %>

Payment Methods Header

payment_methods_header_partialsInjects code between the page header and the main content area for the payment methods list page.

<div class="alert alert-warning">
  <strong>Configuration:</strong> Ensure all payment methods are properly configured.
</div>

Post Categories

Post Categories Actions

post_categories_actions_partialsInjects code into the page actions area for the post categories list page.

<%= link_to "Reorder Categories", reorder_post_categories_path, class: "btn btn-secondary" %>

Post Categories Header

post_categories_header_partialsInjects code between the page header and the main content area for the post categories list page.

<div class="alert alert-info">
  <strong>Organization:</strong> Use categories to organize your blog posts.
</div>

Posts

Posts Actions

posts_actions_partialsInjects code into the page actions area for the posts list page.

<%= link_to "Schedule Posts", schedule_posts_path, class: "btn btn-secondary" %>

Posts Header

posts_header_partialsInjects code between the page header and the main content area for the posts list page.

<div class="alert alert-info">
  <strong>Publishing:</strong> Posts can be scheduled for future publication.
</div>

Posts Filters

posts_filters_partials

Variables

ActionView::Helpers::FormBuilder

The ActionView::Helpers::FormBuilder object.

Injects code into the posts list filters.

<div class="form-group">
  <%= f.label :published_eq, "Publication Status" %>
  <%= f.select :published_eq, options_for_select([["Published", true], ["Draft", false]]), { include_blank: true }, { class: "custom-select", data: { filters_target: :input } } %>
</div>

Promotions

Promotions Actions

promotions_actions_partialsInjects code into the page actions area for the promotions list page.

<%= link_to "Clone Selected", clone_promotions_path, class: "btn btn-secondary" %>

Promotions Header

promotions_header_partialsInjects code between the page header and the main content area for the promotions list page.

<div class="alert alert-info">
  <strong>Scheduling:</strong> Promotions can be scheduled to start and end automatically.
</div>

Promotions Filters

promotions_filters_partials

Variables

ActionView::Helpers::FormBuilder

The ActionView::Helpers::FormBuilder object.

Injects code into the promotions list filters.

<div class="form-group">
  <%= f.label :active_eq, "Active Status" %>
  <%= f.select :active_eq, options_for_select([["Active", true], ["Inactive", false]]), { include_blank: true }, { class: "custom-select", data: { filters_target: :input } } %>
</div>

Properties

Properties Actions

properties_actions_partialsInjects code into the page actions area for the properties list page.

<%= link_to "Import Properties", import_properties_path, class: "btn btn-secondary" %>

Properties Header

properties_header_partialsInjects code between the page header and the main content area for the properties list page.

<div class="alert alert-info">
  <strong>Usage:</strong> Properties are used to add custom attributes to products.
</div>

Refund Reasons

Refund Reasons Actions

refund_reasons_actions_partialsInjects code into the page actions area for the refund reasons list page.

<%= link_to "Export Reasons", export_refund_reasons_path, class: "btn btn-secondary" %>

Refund Reasons Header

refund_reasons_header_partialsInjects code between the page header and the main content area for the refund reasons list page.

<div class="alert alert-info">
  <strong>Analytics:</strong> Track refund reasons to identify common issues.
</div>

Reimbursement Types

Reimbursement Types Actions

reimbursement_types_actions_partialsInjects code into the page actions area for the reimbursement types list page.

<%= link_to "Configure Defaults", configure_reimbursement_defaults_path, class: "btn btn-secondary" %>

Reimbursement Types Header

reimbursement_types_header_partialsInjects code between the page header and the main content area for the reimbursement types list page.

<div class="alert alert-info">
  <strong>Processing:</strong> Define how customers are reimbursed for returns.
</div>

Reports

Reports Actions

reports_actions_partialsInjects code into the page actions area for the reports list page.

<%= link_to "Schedule Report", schedule_report_path, class: "btn btn-secondary" %>

Reports Header

reports_header_partialsInjects code between the page header and the main content area for the reports list page.

<div class="alert alert-info">
  <strong>Automation:</strong> Reports can be scheduled to run automatically.
</div>

Return Authorization Reasons

Return Authorization Reasons Actions

return_authorization_reasons_actions_partialsInjects code into the page actions area for the return authorization reasons list page.

<%= link_to "Export Reasons", export_return_reasons_path, class: "btn btn-secondary" %>

Return Authorization Reasons Header

return_authorization_reasons_header_partialsInjects code between the page header and the main content area for the return authorization reasons list page.

<div class="alert alert-info">
  <strong>Policy:</strong> Define clear return reasons to streamline the process.
</div>

Return Authorizations

Return Authorizations Actions

return_authorizations_actions_partialsInjects code into the page actions area for the return authorizations list page.

<%= link_to "Bulk Process", bulk_process_returns_path, class: "btn btn-secondary" %>

Return Authorizations Header

return_authorizations_header_partialsInjects code between the page header and the main content area for the return authorizations list page.

<div class="alert alert-info">
  <strong>Processing:</strong> Returns are processed in order of submission.
</div>

Roles

Roles Actions

roles_actions_partialsInjects code into the page actions area for the roles list page.

<%= link_to "Export Permissions", export_role_permissions_path, class: "btn btn-secondary" %>

Roles Header

roles_header_partialsInjects code between the page header and the main content area for the roles list page.

<div class="alert alert-warning">
  <strong>Security:</strong> Review role permissions regularly for security.
</div>

Shipping Categories

Shipping Categories Actions

shipping_categories_actions_partialsInjects code into the page actions area for the shipping categories list page.

<%= link_to "Calculate Rates", calculate_shipping_rates_path, class: "btn btn-secondary" %>

Shipping Categories Header

shipping_categories_header_partialsInjects code between the page header and the main content area for the shipping categories list page.

<div class="alert alert-info">
  <strong>Organization:</strong> Use categories to group products with similar shipping requirements.
</div>

Shipping Methods

Shipping Methods Actions

shipping_methods_actions_partialsInjects code into the page actions area for the shipping methods list page.

<%= link_to "Test Integrations", test_shipping_integrations_path, class: "btn btn-secondary" %>

Shipping Methods Header

shipping_methods_header_partialsInjects code between the page header and the main content area for the shipping methods list page.

<div class="alert alert-info">
  <strong>Configuration:</strong> Ensure shipping methods are properly configured for all zones.
</div>

Stock Locations

Stock Locations Actions

stock_locations_actions_partialsInjects code into the page actions area for the stock locations list page.

<%= link_to "Sync Inventory", sync_all_locations_path, class: "btn btn-secondary" %>

Stock Locations Header

stock_locations_header_partialsInjects code between the page header and the main content area for the stock locations list page.

<div class="alert alert-info">
  <strong>Management:</strong> Stock locations help manage inventory across multiple warehouses.
</div>

Stock Transfers

Stock Transfers Actions

stock_transfers_actions_partialsInjects code into the page actions area for the stock transfers list page.

<%= link_to "Bulk Transfer", bulk_stock_transfer_path, class: "btn btn-secondary" %>

Stock Transfers Header

stock_transfers_header_partialsInjects code between the page header and the main content area for the stock transfers list page.

<div class="alert alert-info">
  <strong>Tracking:</strong> All stock transfers are logged for audit purposes.
</div>

Stock Transfers Filters

stock_transfers_filters_partials

Variables

ActionView::Helpers::FormBuilder

The ActionView::Helpers::FormBuilder object.

Injects code into the stock transfers list filters.

<div class="form-group">
  <%= f.label :status_eq, "Transfer Status" %>
  <%= f.select :status_eq, options_for_select([["Pending", "pending"], ["Completed", "completed"]]), { include_blank: true }, { class: "custom-select", data: { filters_target: :input } } %>
</div>

Store Credit Categories

Store Credit Categories Actions

store_credit_categories_actions_partialsInjects code into the page actions area for the store credit categories list page.

<%= link_to "Set Default Category", set_default_credit_category_path, class: "btn btn-secondary" %>

Store Credit Categories Header

store_credit_categories_header_partialsInjects code between the page header and the main content area for the store credit categories list page.

<div class="alert alert-info">
  <strong>Organization:</strong> Use categories to organize different types of store credits.
</div>

Store Credits

Store Credits Actions

store_credits_actions_partialsInjects code into the page actions area for the store credits list page.

<%= link_to "Bulk Issue Credits", bulk_issue_credits_path, class: "btn btn-secondary" %>

Store Credits Header

store_credits_header_partialsInjects code between the page header and the main content area for the store credits list page.

<div class="alert alert-info">
  <strong>Management:</strong> Store credits can be issued for returns, promotions, or customer service.
</div>

Tax Categories

Tax Categories Actions

tax_categories_actions_partialsInjects code into the page actions area for the tax categories list page.

<%= link_to "Update Tax Rates", update_all_tax_rates_path, class: "btn btn-secondary" %>

Tax Categories Header

tax_categories_header_partialsInjects code between the page header and the main content area for the tax categories list page.

<div class="alert alert-warning">
  <strong>Compliance:</strong> Ensure tax categories comply with local regulations.
</div>

Tax Rates

Tax Rates Actions

tax_rates_actions_partialsInjects code into the page actions area for the tax rates list page.

<%= link_to "Import Tax Updates", import_tax_updates_path, class: "btn btn-secondary" %>

Tax Rates Header

tax_rates_header_partialsInjects code between the page header and the main content area for the tax rates list page.

<div class="alert alert-warning">
  <strong>Updates:</strong> Tax rates should be reviewed and updated regularly.
</div>

Taxonomies

Taxonomies Actions

taxonomies_actions_partialsInjects code into the page actions area for the taxonomies list page.

<%= link_to "Rebuild Tree", rebuild_taxonomy_tree_path, class: "btn btn-secondary" %>

Taxonomies Header

taxonomies_header_partialsInjects code between the page header and the main content area for the taxonomies list page.

<div class="alert alert-info">
  <strong>Navigation:</strong> Taxonomies are used to create product category navigation.
</div>

Themes

Themes Actions

themes_actions_partialsInjects code into the page actions area for the themes list page.

<%= link_to "Preview All", preview_all_themes_path, class: "btn btn-secondary" %>

Themes Header

themes_header_partialsInjects code between the page header and the main content area for the themes list page.

<div class="alert alert-info">
  <strong>Customization:</strong> Themes control the visual appearance of your storefront.
</div>

Webhooks Subscribers

Webhooks Subscribers Actions

webhooks_subscribers_actions_partialsInjects code into the page actions area for the webhooks subscribers list page.

<%= link_to "Test All Webhooks", test_all_webhooks_path, class: "btn btn-secondary" %>

Webhooks Subscribers Header

webhooks_subscribers_header_partialsInjects code between the page header and the main content area for the webhooks subscribers list page.

<div class="alert alert-warning">
  <strong>Monitoring:</strong> Monitor webhook delivery status and failures.
</div>

Zones

Zones Actions

zones_actions_partialsInjects code into the page actions area for the zones list page.

<%= link_to "Import Zones", import_zones_path, class: "btn btn-secondary" %>

Zones Header

zones_header_partialsInjects code between the page header and the main content area for the zones list page.

<div class="alert alert-info">
  <strong>Geography:</strong> Zones define geographic regions for shipping and taxation.
</div>

Products

Products Actions

products_actions_partialsInjects code into the page actions area (top right of the page) for the products list page. This is useful for adding custom buttons, export options, or other actions.

<%= link_to "Sync with PIM", sync_products_path, class: "btn btn-secondary" %>

Products Header

products_header_partialsInjects code between the page header and the main content area for the products list page. This is useful for adding notifications, alerts, or additional information.

<div class="alert alert-info">
  <strong>Inventory:</strong> Product inventory is synced with warehouse systems every 15 minutes.
</div>

Products Filters

products_filters_partials

Variables

ActionView::Helpers::FormBuilder

The ActionView::Helpers::FormBuilder object.

Injects code into the products list filters. This partial has access to the f variable, which is the form builder for the filters.To add a new filter field, you can use the following code:

<%= f.text_field :q_name_cont, class: "form-control", data: { filters_target: :input } %>

q_name_cont is the name of the filter field. For filtering we’re using ransack gem, so the name of the filter field is the name of the attribute we’re filtering by. Learn more about ransack search syntax.
form-control is a bootstrap class for styling the input field.
data: { filters_target: :input } is needed for the Stimulus Filters controller to work.

Products Page Dropdown

product_dropdown_partials

Injects code into the products page dropdown. This partial has access to the product variable.To add an additional dropdown item, you can use the following code:

<%= link_to "View Product in WMS", "https://wms.com/products/#{product.id}", class: "dropdown-item", target: "_blank" %>

Your code will be placed before the dropdown divider.

Products Page Form

product_form_partials

Variables

ActionView::Helpers::FormBuilder

The ActionView::Helpers::FormBuilder object.

product

Spree::Product

The Spree::Product object.

Injects code into the product form. This partial has access to the f variable, which is the form builder for the product form, and the product variable.To add a new section to the product form, you can use the following code:

<div class="card mb-4">
  <div class="card-header">
    <h5 class="card-title">ERP Integration</h5>
  </div>
  <div class="card-body">
    <%= f.text_field :erp_product_id, class: "form-control" %>
  </div>
</div>

The partial will be displayed for both new product form and edit product form.

If you want to display the partial only on the edit product form, you can use the following code:

<% if product.persisted? %>
  <%# ... your code ... %>
<% end %>

And similarly for the new product form.

<% if product.new_record? %>
  <%# ... your code ... %>
<% end %>

Products Page Sidebar

product_form_sidebar_partials

Variables

ActionView::Helpers::FormBuilder

The ActionView::Helpers::FormBuilder object.

product

Spree::Product

The Spree::Product object.

Injects code into the product form sidebar. This partial has access to the f variable, which is the form builder for the product form, and the product variable.To add a new section to the product form sidebar, you can use the following code:

<div class="card mb-4">
  <div class="card-header">
    <h5 class="card-title">ERP Integration</h5>
  </div>
  <div class="card-body">
    <%= f.text_field :erp_product_id, class: "form-control" %>
  </div>
</div>

The partial will be displayed for both new product form and edit product form.

If you want to display the partial only on the edit product form, you can use the following code:

<% if product.persisted? %>
  <%# ... your code ... %>
<% end %>

And similarly for the new product form.

<% if product.new_record? %>
  <%# ... your code ... %>
<% end %>

Shipping Methods

Shipping Methods Form

shipping_method_form_partials

Variables

ActionView::Helpers::FormBuilder

The ActionView::Helpers::FormBuilder object.

shipping_method

Spree::ShippingMethod

The Spree::ShippingMethod object.

Injects code into the shipping method form. This partial has access to the f variable, which is the form builder for the shipping method form, and the shipping_method variable.To add a new section to the shipping method form, you can use the following code:

<div class="card mb-4">
  <div class="card-header">
    <h5 class="card-title">ERP Integration</h5>
  </div>
  <div class="card-body">
    <%= f.text_field :erp_shipping_method_id, class: "form-control" %>
  </div>
</div>

Store Settings

Store Settings Form

store_form_partials

Variables

ActionView::Helpers::FormBuilder

The ActionView::Helpers::FormBuilder object.

store

Spree::Store

The Spree::Store object.

Injects code into the store settings form. This partial has access to the f variable, which is the form builder for the store form, and the store variable.To add a new section to the store form, you can use the following code:

<div class="card mb-4">
  <div class="card-header">
    <h5 class="card-title">ERP Integration</h5>
  </div>
  <div class="card-body">
    <%= f.text_field :erp_store_id, class: "form-control" %>
  </div>
</div>

Getting started

Customizing Spree

Use Cases

Deployment

Upgrading

Contributing

Security

Advanced

​How it works

​Admin Dashboard injection points

​Layout

​Dashboard

​Orders

​Variables

​Variables

​Variables

​Variables

​Variables

​Customers

​Variables

​Stock Items

​Variables

​Admin Users

​Classifications

​Coupon Codes

​Custom Domains

​Customer Returns

​Variables

​Digital Assets

​Exports

​Gift Cards

​Variables

​Integrations

​Invitations

​OAuth Applications

​Option Types

​Pages

​Payment Methods

​Post Categories

​Posts

​Variables

​Promotions

​Variables

​Properties

​Refund Reasons

​Reimbursement Types

​Reports

​Return Authorization Reasons

​Return Authorizations

​Roles

​Shipping Categories

​Shipping Methods

​Stock Locations

​Stock Transfers

​Variables

​Store Credit Categories

​Store Credits

​Tax Categories

​Tax Rates

​Taxonomies

​Themes

​Webhooks Subscribers

​Zones

​Products

​Variables

​Variables

​Variables

​Shipping Methods

​Variables

​Store Settings

​Variables

How it works

Admin Dashboard injection points

Layout

Dashboard

Orders

Variables

Variables

Variables

Variables

Variables

Customers

Variables

Stock Items

Variables

Admin Users

Classifications

Coupon Codes

Custom Domains

Customer Returns

Variables

Digital Assets

Exports

Gift Cards

Variables

Integrations

Invitations

OAuth Applications

Option Types

Pages

Payment Methods

Post Categories

Posts

Variables

Promotions

Variables

Properties

Refund Reasons

Reimbursement Types

Reports

Return Authorization Reasons

Return Authorizations

Roles

Shipping Categories

Shipping Methods

Stock Locations

Stock Transfers

Variables

Store Credit Categories

Store Credits

Tax Categories

Tax Rates

Taxonomies

Themes

Webhooks Subscribers

Zones

Products

Variables

Variables

Variables

Shipping Methods

Variables

Store Settings

Variables