Custom Checkout Panes

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.