Skip to content
BSS B2B SuiteBSS B2B Help Center

Storefront Translation

Learn how to customize all customer-facing text and labels on your store’s Re-Order page using the Translation settings in your app admin.

Reorder page for a visitor who is not logged in: This page is for exclusive customers!

What your customers see on the storefront.

This guide explains how to translate text across all 6 storefront screens, customize button labels and warning alerts, use dynamic smart placeholders, and preview text changes in real time.

1. Overview & Where to Find Translation Settings

Section titled “1. Overview & Where to Find Translation Settings”

Translations page: Quick Order Translation, Request for Quote Translation and Reorder Translation

The Translation editor allows you to replace default English labels with your own customized brand copy or translate the storefront interface into your store’s primary language.

To access the Translation settings in your admin:

  1. In Shopify Admin, open BSS B2B Quote.

  2. In the left navigation, click Reorder.

  3. Click the Translation tab at the top of the screen.

  4. In the app, open Reorder > Translation.

  5. Pick one of the 6 view tabs.

  6. Edit the texts and placeholders.

  7. Check the live preview on the right.

  8. Click Save to publish the translations.

2. Before You Begin

Section titled “2. Before You Begin”
  • Live Preview: The right side of the Translation editor displays a live preview of the currently selected screen.
  • Saving Changes: Always click Save in the top-right corner to publish your text changes to your live storefront.
  • Language Fallbacks: If you leave any field blank, the system automatically uses the default text.

3. The 6 Translation View Tabs

Section titled “3. The 6 Translation View Tabs”

The Translation editor organizes user-facing copy into 6 distinct view tabs matching the customer journey:

3.1 Restricted Access Tab

Section titled “3.1 Restricted Access Tab”

Controls the copy displayed when an unauthenticated visitor or excluded customer visits /pages/reorder:

  • Title: Heading explaining why access is restricted (Default: Access Restricted).
  • Description: Detailed explanation prompting the user to sign in.
  • Login Button: CTA button redirecting to Shopify customer login.
  • Go Back Button: Link returning the customer to the homepage.

3.2 Order List Tab

Section titled “3.2 Order List Tab”

Controls labels and table headers on the main Order tab (/pages/reorder):

  • Tab Label: Text for the tab selector (Default: Orders).
  • Table Headers: Column labels for Order ID, Date, Line Items, Total Qty, Fulfillment Status, Financial Status, Actions.
  • Action Buttons: Text for the reorder button (Reorder), and view details tooltip.
  • Empty State: Message shown when a customer has no completed orders.

3.3 Waiting for Checkout Tab

Section titled “3.3 Waiting for Checkout Tab”

Controls labels on the pending draft order list:

  • Tab Label: Text for the draft order tab (Default: Waiting for Checkout).
  • Status Badges: Text for draft order statuses: Open, Invoice Sent, and Completed.
  • Action Buttons: Text for Reorder, Checkout, and View Details.
  • Empty State: Message shown when no pending draft orders exist.

3.4 Draft Order Detail Tab

Section titled “3.4 Draft Order Detail Tab”

Controls labels on the dedicated draft order detail page:

  • Headers & Subtitles: Labels for order summary, creation timestamp, and invoice status.
  • Product Table Headers: Column labels for Item, Variant, SKU, Price, Quantity, Subtotal.
  • Checkout Card: Labels for Subtotal, Estimated Tax, Shipping, Total, Pay Now / Checkout.
  • Back Button: Label for returning to the order list.

3.5 Reorder Review & Edit Modal Tab

Section titled “3.5 Reorder Review & Edit Modal Tab”

Controls text inside the line-item editing popup:

  • Modal Header & Subtitle: Heading and guidance copy.
  • Action Buttons: Labels for Add New Items, Place Order, Cancel, Continue Shopping.
  • Stock & Validation Banners: Error alerts for out-of-stock items, min/max quantity limits, and pack size increments.

3.6 Search & Add Item Modal Tab

Section titled “3.6 Search & Add Item Modal Tab”

Controls the search drawer used to add new products to a reorder:

  • Search Input Placeholder: Guidance text inside the search bar (Default: Search by product title or SKU…).
  • Results Table Headers: Labels for product thumbnails, variant selectors, prices, and quantities.
  • Add Button: CTA button to add selected items to the review modal.

4. Smart Dynamic Placeholders

Section titled “4. Smart Dynamic Placeholders”

Several text fields support smart placeholders that automatically fill in real customer data when displayed on your storefront:

Smart Placeholder What It Displays Supported Text Fields Real Example Input & Customer Display
{order} Order Number / Draft Name • Reorder Review Modal Subtitle

You Type: Customize your reorder based on Order {order}
Customer Sees: Customize your reorder based on Order #1042
{count} Total item count in review modal • Reorder Item Count Header

You Type: REORDER ITEMS ({count})
Customer Sees: REORDER ITEMS (5)
{email} Buyer account email address • Draft Order Email Confirmation Banner

You Type: Email sent to {email}
Customer Sees: Email sent to [email protected]
{min} Minimum allowed order quantity • Minimum Quantity Error Banner

You Type: Minimum quantity is {min}. Please adjust to continue.
Customer Sees: Minimum quantity is 10. Please adjust to continue.
{increment} Required pack size multiple • Pack Size / Increment Error Banner

You Type: Quantity must be in increments of {increment}.
Customer Sees: Quantity must be in increments of 6.
{stock} Available warehouse stock • Inventory Stock Limit Warning Banner

You Type: Only {stock} item(s) available.
Customer Sees: Only 25 item(s) available.

5. Instant Live Preview

Section titled “5. Instant Live Preview”

The admin editor includes a Live Preview Panel on the right side of the screen so you can inspect text edits instantly before publishing:

  • Real-Time Updates: As you type in any text box, the live preview updates immediately.
  • Syncs with View Tabs: Clicking any of the 6 view tabs on the left automatically switches the live preview to show that specific screen.
  • Safe Previewing: Buttons and links inside the live preview are disabled so you can test formatting safely without triggering actual orders.
Section titled “6. Related Guides”