Custom Checkout Panes

Printer-friendly versionPrinter-friendly version

Stores have the option to create two custom checkout panes within the IndieCommerce checkout flow.

NOTE: The ‘Custom Checkout Pane’ modules need to be enabled for your site. Please send us a request from the Store Features page (Store > Configuration > Account Information and Preferences > Store Features).

CONFIGURE CUSTOM CHECKOUT PANE 1

Example use-case : Provide customers a newsletter opt-in during checkout

Navigate to:  Store > Configuration > Checkout

  1. Select ‘Custom checkout pane 1 pane’
  2. Complete the form

    • Custom checkout pane 1 header -  This is the header of the pane. Example: Newsletter Subscription
    • Custom checkout pane 1 description - This describes the purpose of the pane. Example: Would you like to subscribe to our newsletter?
    • Custom checkout pane 1 checkbox label - This is the label for the toggle the customer will mark. Example: Yes
    • Custom checkout pane 1 textarea label - This is the label for the text field the customer will complete. Example: Email address to subscribe
  3. Save Configuration
  4. Using the ‘Drag and Drop’ arrow, place the pane in the preferred order.
  5. Save

Your customer will now see this pane during the checkout process. We recommend you go through the checkout process yourself and review the new pane to confirm it appears and functions correctly.

CONFIGURE CUSTOM CHECKOUT PANE 2

Example use-case : Provide customers gift wrapping options during checkout

Navigate to:  Store > Configuration > Checkout

  1. Select ‘Free Gift Wrapping pane’
  2. Complete the form

    • Custom checkout pane 2 header -  This is the header of the pane. Example: Free Gift Wrapping
    • Custom checkout pane 2 description - This describes the purpose of the pane. Example: Free gift wrapping offered for all orders
    • Custom checkout pane 2 checkbox label - This is the label for the toggle the customer will mark. Example: Would you like free gift wrapping for your order?
    • Custom checkout pane 2 options description - This is the description for the options listed below. Example: Select the type to wrapping
    • Options to be included with the checkbox listed above: Up to five options may be provided. Example:

      • Birthday
      • Holiday
      • Graduation
      • Baby Shower
      • Plain Brown Paper
  3. Optional: You may also provide an optional radio button with text field or text area

    • Custom checkout pane #2: Radio button label - This is the label for the provided button. Example: Add a gift message?
    • Textfield or a textarea?: You may provide either a single line space or multiple lines
    • Label for the additional text field or textarea: This is the label for the textarea or field provided. Example: Gift message
  4. Save Configuration
  5. Using the ‘Drag and Drop’ arrow, place the pane in the preferred order.
  6. Save

Your customer will now see this pane during the checkout process. We recommend you go through the checkout process yourself and review the new pane to confirm it appears and functions correctly.

VIEW THE INFORMATION SUBMITTED BY THE CUSTOMER

When your customer uses this pane, the information provided by the customer during checkout will be available in a few places:

  1. From the admin side, customer provided information is available on the order view page, order edit page and in the order confirmation email.
  2. From the customer side, customer provided information is available in order confirmation email and invoices

ADJUST THE ADMIN ORDER VIEW

Customer provided information can be added to the Admin Order View as an additional field.

Navigate to: Structure > Views > uc_orders (Orders)

  1. Under ‘Fields’ select ‘Add’
  2. Search for ‘custom’ and select
  3. For Custom Checkout Pane 1:  ‘Order: Checkbox checked?’ and ‘Order: Custom checkout pane checkbox label’
  4. For Custom Checkout Pane 2: ‘Order: Custom checkout pane #2 checkbox checked?’, ‘Order: Custom checkout pane #2 checkbox label’, ‘Order: Custom checkout pane #2 options’, ‘Order: Custom checkout pane #2 radio checked?’, and ‘Order: Custom checkout pane #2 radio text’
  5. Apply (this display)
  6. Save

You will now see additional columns on the Admin Order View page (Store > Orders) indicating the information related to these fields.
 

IndieCommerce Help Documents

 

About ABA

The American Booksellers Association, a national not-for-profit trade organization, works with booksellers and industry partners to ensure the success and profitability of independently owned book retailers, and to assist in expanding the community of the book.

Independent bookstores act as community anchors; they serve a unique role in promoting the open exchange of ideas, enriching the cultural life of communities, and creating economically vibrant neighborhoods.

Contact

PRESS INQUIRIES: [email protected]

INDIECOMMERCE: [email protected]

ALL OTHER INQUIRIES: [email protected]

 

 

Copyright 2024 American Booksellers Association. BookWeb is a registered trademark of ABA.
Privacy Policy, Cookie Policy, Accessibility Statement