Using Paytronix Order Experience Builder

This article outlines how you can use the pre-built experiences we provide in the Builder Edition to quickly construct an exceptional online guest ordering experience.

Overview of Order Experience Builder 

Order Experience Builder is the re-imagined front-end builder and designer for the Paytronix Order & Delivery product that allows you to customize the guest experience to your brand.  

Paytronix provides a library of pre-built experiences (templates) you can use to get started quickly. You adjust the fonts, colors, and images to align with your brand standards. You no longer need expensive designers and web developers to build a custom frontend. Order Experience Builder is designed to be self-service for our customers, reducing cost of ownership and effort required to build and maintain the guest experience. 

Order Experience Builder is provided in two (2) modules: Builder Edition and Agency Edition. Builder Edition is built to allow online ordering admins and marketing managers to quickly set up a simple guest experience that aligns with your brand. Agency Edition is designed with advanced configurations for clients who have more experienced technical resources available and who are used to independently using low code web design builders (similar to web design tools like WordPress, Webflow Wix, etc.). We recognize not all clients have access to the technical resources to customize their guest order & delivery flow and the article below outlines how you can use the pre-built experiences we provide in the Builder Edition to quickly construct an exceptional online guest ordering experience. 

How to Access Order Experience Builder 

From the top navigation of the Paytronix Ordering Platform, click “Order Experience Builder” as seen in Figure 1 below. 

Figure 1: Order Experience Platform Top Navigation 

  1. Select “Order Experience Builder” from the drop-down list, also shown in Figure 1. 
  2. The Order Experience Builder landing page will display a list of custom experiences, if any have been built, and the Paytronix Pre-Built Experience templates. See Figure 2 below. 

Figure 2: Order Experience Landing page 

How to Preview an Existing Theme You Developed 
Click the “Preview button to the right of the existing Order Experience you would like to preview. See  Figure 3 below.

Figure 3: Order Experience Preview Button 

  1. Use the keyboard shortcut CTRL+SHIFT+R (Windows) / COMMAND+SHIFT+R (Mac) to refresh the cache and pull in the latest updates to the Order Experience in the current saved view. 
  2. The system will pull in restaurant location and data for the first restaurant listed in the session. 

How To Edit an Existing Theme 
From the Order Experience Builder Landing page, click “Edit Theme”, which is found to the right of the Preview you would like to see ( Figure 4). 

Figure 4: Click to Edit Theme 

Paytronix will display the elements that can be customized in an easy-to-use form field as shown in  Figure 5 below. You can edit the Brand Colors, Base Colors, Fonts, Images, and Text from this view. 

Figure 5: Order Experience Builder Customize Theme View 

  1. Click the Brand Colors link in Figure 5 above to expand the various brand color options, Including “Primary,” “Secondary,” Warning,” and “Error.” Please note, each Paytronix Theme has different color options included. 
  2. Select the color you want to change by clicking the colored rectangle next to the color label, as shown in Figure 6 below. 

Figure 6: Select Color to Edit 

The Paytronix Color Editor will appear. You can use the Color Picker, as shown in  Figure 7 below, to select your desired color. You can also enter the hexadecimal code for the color you want to use in the design, also shown in Figure 7. You can access the RGBA value space by clicking the arrows to the right of the HEX value to display the RGBA value form. See Figure 8. 

Figure 7: Paytronix Color Editor with Color Picker and HEX Value Displayed 

Figure 8: Paytronix Color Editor with RGBA Value Displayed 

  1. Repeat Steps 1-5 for Base Colors. 
  2. You can change the Font Family from the same landing page. Simply click the drop down for the font you want to change, Accent Font or Body Font, and select your desired font from the dropdown list. See Figure 9 below. 
  3. Follow the same instructions to change the Font Style from Default to another of your choosing. 

Figure 9: Edit Fonts 

Click the arrow next to “Hero” in the “Text Content” section of the page to view the current Hero Image text. Simply type the new text you want to display into the form field as shown in  Figure 10 below. 

Figure 10: Edit Hero Image Text 

  1. Once you have made all your changes, click Save as shown in Figure 11. Upon clicking save, Paytronix Order Experience Builder will build the pages. Saving may take a few seconds to save for that reason. You will see a message indicating that your changes were saved at the top of the page (Figure 12). Once saved, you can click to Preview your changes by clicking “Save and Preview” as shown in both Figure 11 and Figure 12. You may need to click CTRL+SHIFT+R or COMMAND+SHIFT+R to see changes. 
  2. Note: Paytronix does not allow customers to Publish to the changes to the Live environment. Clients will have a sub-domain to which they will publish. Once those changes are completed on the sub-domain, Paytronix will publish the changes to the live environment.  

Figure 11: Save Changes 

Figure 12: Changes are Saved 

How To Create a New Theme 

  1. From the Top Navigation, click “Order Experience Builder” Link.  
  2. From the drop down, select “Order Experience Builder”. 
  3. Click “Use Template” from one of the pre-built experience templates provided by Paytronix as shown in Figure 13 below. 

Figure 13: Create New Experience 
Now that the theme has been created, you be able to follow the same steps outlined for editing the existing theme in the section above.