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. 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
- Spree 5.2+
- Spree 5.1 and below
config/initializers/spree.rb
Spree.admin.partials.body_end << 'spree/admin/shared/additional_footer'
config/initializers/spree.rb
Rails.application.config.spree_admin.body_end << 'spree/admin/shared/additional_footer_partials'
For older versions of Spree you need to add _partials suffix for all injection points, eg. body_end_partials instead of body_end.
The key is the name of the injection point, eg. body_end.

Remember to use the correct path to your template file 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.

Partials API

The Spree.admin.partials object provides a clean API for registering partials to injection points. This API is available in Spree 5.2 and later.

Accessing Available Injection Points

You can list all available injection points programmatically:

# In Rails console or initializer
Spree.admin.partials.keys
# => ["head", "body_start", "body_end", "dashboard_analytics", "product_form", ...]

Registering Partials

Each injection point is an array that you can append to:

config/initializers/spree.rb

# Add a single partial
Spree.admin.partials.product_form << 'spree/admin/products/erp_section'

# Add multiple partials
Spree.admin.partials.dashboard_sidebar << 'spree/admin/dashboard/analytics_widget'
Spree.admin.partials.dashboard_sidebar << 'spree/admin/dashboard/inventory_widget'

Viewing Registered Partials

To see which partials are registered for a specific injection point:

Spree.admin.partials.product_form
# => ["spree/admin/products/erp_section"]

Replacing All Partials

You can also replace all partials for an injection point:

Spree.admin.partials.product_form = ['my/custom/partial']

Replacing all partials will remove any partials registered by other extensions. Use this with caution.

List of all injection points

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

Layout

<head>

headInjects code into the <head> tag

<body>

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

</body>

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

Dashboard

Analytics

dashboard_analytics

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

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

Variables

Spree::Admin::FormBuilder

The Spree::Admin::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.spree_text_field :q_number_cont, 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.
data: { filters_target: :input } - Needed for the Stimulus Filters controller to work.

Order Page Dropdown

order_page_dropdown

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

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

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

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

Variables

ActionView::Helpers::FormBuilder

The Spree::Admin::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.

<%= f.spree_select :custom_field_eq, [["VIP", "vip"], ["Regular", "regular"]], { include_blank: true }, { data: { filters_target: :input } } %>

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

Variables

Spree::Admin::FormBuilder

The Spree::Admin::FormBuilder object.

Injects code into the stock items list filters.

<%= f.spree_number_field :count_on_hand_lt,
    label: "Stock Below",
    data: { filters_target: :input } %>

Use ransack search syntax for filter field names (e.g., _lt for “less than”).

Admin Users

Admin Users Actions

admin_users_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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

Variables

Spree::Admin::FormBuilder

The Spree::Admin::FormBuilder object.

Injects code into the customer returns list filters.

<%= f.spree_select :reason_eq,
    [["Damaged", "damaged"], ["Wrong Item", "wrong_item"]],
    { include_blank: true, label: "Return Reason" },
    { data: { filters_target: :input } } %>

Use ransack search syntax for filter field names (e.g., _eq for “equals”).

Digital Assets

Digital Assets Actions

digital_assets_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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

Variables

Spree::Admin::FormBuilder

The Spree::Admin::FormBuilder object.

Injects code into the gift cards list filters.

<%= f.spree_number_field :balance_gt,
    label: "Balance Greater Than",
    step: 0.01,
    data: { filters_target: :input } %>

Use ransack search syntax for filter field names (e.g., _gt for “greater than”).

Integrations

Integrations Actions

integrations_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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

Variables

Spree::Admin::FormBuilder

The Spree::Admin::FormBuilder object.

Injects code into the posts list filters.

<%= f.spree_select :published_eq,
    [["Published", true], ["Draft", false]],
    { include_blank: true, label: "Publication Status" },
    { data: { filters_target: :input } } %>

Use ransack search syntax for filter field names.

Promotions

Promotions Actions

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

Variables

Spree::Admin::FormBuilder

The Spree::Admin::FormBuilder object.

Injects code into the promotions list filters.

<%= f.spree_select :active_eq,
    [["Active", true], ["Inactive", false]],
    { include_blank: true, label: "Active Status" },
    { data: { filters_target: :input } } %>

Use ransack search syntax for filter field names.

Properties

Properties Actions

properties_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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

Variables

Spree::Admin::FormBuilder

The Spree::Admin::FormBuilder object.

Injects code into the stock transfers list filters.

<%= f.spree_select :status_eq,
    [["Pending", "pending"], ["Completed", "completed"]],
    { include_blank: true, label: "Transfer Status" },
    { data: { filters_target: :input } } %>

Use ransack search syntax for filter field names.

Store Credit Categories

Store Credit Categories Actions

store_credit_categories_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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_actionsInjects 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_headerInjects 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

Variables

Spree::Admin::FormBuilder

The Spree::Admin::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.spree_text_field :q_name_cont, 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.
data: { filters_target: :input } is needed for the Stimulus Filters controller to work.

Products Page Dropdown

product_dropdown

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

Variables

Spree::Admin::FormBuilder

The Spree::Admin::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.spree_text_field :erp_product_id %>
  </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

Variables

Spree::Admin::FormBuilder

The Spree::Admin::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.spree_text_field :erp_product_id %>
  </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

Variables

Spree::Admin::FormBuilder

The Spree::Admin::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.spree_text_field :erp_shipping_method_id %>
  </div>
</div>

Store Settings

Store Settings Form

store_form

Variables

Spree::Admin::FormBuilder

The Spree::Admin::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.spree_text_field :erp_store_id %>
  </div>
</div>

Getting started

Tutorial

Core Concepts

Admin Dashboard

Storefront

Customization Reference

Use Cases

Deployment

Upgrading

Contributing

Security

​How it works

​Partials API

​Accessing Available Injection Points

​Registering Partials

​Viewing Registered Partials

​Replacing All Partials

​List of all 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

Partials API

Accessing Available Injection Points

Registering Partials

Viewing Registered Partials

Replacing All Partials

List of all 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