LogoLogo
  • Appfront University
  • General FAQ
  • COVID-19
  • FAQ - Before Going Live
  • 👤Account Set Up
    • Customers Export / Import
    • Mobile App Set Up
    • Payment Processors
    • In-Store
    • Tracking: Google Analytics, GTM, Facebook Pixel
    • New Store On-Boarding Checklist
    • Online Ordering
    • order.yourdomain.com
    • Integrations
  • 🎨Design and Branding
    • Image Requirements
    • News Feed - Promotional Layout
    • Design Editor
  • 🛵Delivery Integration
    • Introduction to Dispatch
    • Initial Delivery Setup
    • Connecting 3rd Party Providers
    • Dispatch - 3rd Partys Delivery
    • Delivery Management Tools (DMT)
    • Setting up Delivery Areas
    • Delivery Troubleshooting
  • 📱Become a Digital Restaurant
    • Become a Digital Restaurant
    • Rewards, Loyalty, Auto-Triggers
    • Gift Cards
    • Gift Card - End User Experience
    • Marketing
    • A2P 10DLC SMS text marketing
    • Customers
    • Referral Program -
    • Admin
  • 📟Point of Sale Integration
    • Point of Sale Integration
    • Toast POS Setup
    • Toast Troubleshooting
    • Revel POS Setup
    • Revel Troubleshooting
    • FRS Troubleshooting
    • Speedline Troubleshooting
    • Clover POS
    • PAR-Brink
    • Mapping to Dining Options on Appfront
  • Backoffice
    • Intro to the Backoffice
    • Adding a Visit \ Points to a User
    • Advanced Serving Option Settings
    • Drop Off Configuration
    • Add Portal Users
    • Adding Additional Senders
    • Location Editor
    • Changing a Customers Email or Birthday
    • How to Refund an Order?
    • Removing an Item From a Specific Store
    • Removing a Category from the Menu
  • Campaigns & Coupons
    • Creating Campaigns
    • On Demand / Compensation Campaign
    • Social Campaign / Marketing
    • Life Cycle Campaigns
    • Setting Up a Campaign & Coupon
    • Multiple Items Selector
    • Using items for coupons (with Toast)
    • Setting Up the Campaign's E-mail
    • Advanced E-mail Editing Capabilities
    • Launching a Campaign
    • Campaign Results
    • Attaching Images to Coupons & Campaigns
    • Landing page campaigns
  • Online Ordering
    • Create Link To Order From Specific Branch
    • Set Delivery Hours
    • Dine In & Table number
  • Scanning and Sending from POS
    • Scanning with Revel
  • Store manager view
    • Store Manger View - Preview
    • Basic Location Editor
    • Customer Search
    • Activity Log
  • Loyalty & CRM
    • Revel Loyalty
  • Menu Editor
    • Intro to the Menu Editor
    • Menus
    • Category
    • Item
    • Setup Tab
    • Deals / Promo Codes / Upsales
    • POS Tab - POS Items
    • Toast tab
    • Allergens
    • Translations
  • Old Guides
    • Setting up STAR printers
    • Connecting Doordash Drive
    • Using a Scanner for In-Store
  • Troubleshooting - FRS
    • FRS - Menu Management
    • FRS - Creating New Deal
Powered by GitBook
On this page
  • Main Components
  • Button
  • Card
  • Header
  • Header Login Button
  • Desktop Footer
  • Tabs
  • Tab Selected
  • Locate Me Button
  • Input
  • Input on card background color-
  • Title On Background
  • SignupTitle\SignupGreeting
  • Gifts Header Title
  • Deal Badge (price)
  • List Card Title
  • Location Select Card
  • Slim Button
  • Warning Message Notice
  • Category Menu
  • Menu Header
  • Menu Item Price
  • Service Option Card
  • Service Option Title
  • Change Serving Option Link
  • Home Page Components
  1. Design and Branding

Design Editor

This section is used for editing the design of the app.

PreviousNews Feed - Promotional LayoutNextIntroduction to Dispatch

Last updated 9 months ago

Important:

  • Changes must be saved and published to reflect in the app!

  • Always use the preview screen to check how your change affects the app, and scroll between different app functions to make sure everything is looking well (for example check that you don't have white text on a white background).

The design editor is divided into a few sections-

The home page section controls the components that are included in the main page of the app in both desktop and mobile:

The general styles section controls all the generic settings for the whole app.

The components section overrides specific components that are not included in the general styles section.

The menu page controls the components in the menu part of the app.

Each component has fields and parameters that can be changed, such as colors, fonts, padding, borders, etc.

Main Components

Button

Controls all the buttons of the platform; editing other button components (e.g. homepage buttons) will override the changes of this component.

To change the button background color and text, go to components> button:

Card

Controls most of the 'cards' in the platform, such as the location's background image, menu items, serving option background, modifiers background, etc - below is an example of the checkout screen cards

To change the header card, go to general style> header background color:

To change the main card background color and text, go to general style> card

To edit the promo code card, visits, and points- go to components> card:

Service option Card

To change the background color of this card, and the text color- go to Components> service option card

Card Title

Controls the titles of most of the cards (see Cards above) - below is an example of a card title with uppercase

Header

Controls the header of the platform

Header Login Button

Controls the login button at the top right side of the platform - also the 'Login' version and also the human head icon version

Desktop Footer

Controls the bottom line of the desktop version, where it says 'Terms of Service, Privacy Policy

Tabs

Controls the serving option tabs in the location selection page - see example below of tabs in black color

Tab Selected

Controls the SELECTED TAB only - see the example below of the selected tab in uppercase

Locate Me Button

Controls the Locate Me button, as can be seen in the example above (under Tabs)

Input

Controls all the components that the customer can enter text in, such as the 'Enter address' text bar in the location page, order date and time (see below with gray background), Enter Promo Code bar, birthday date when signing up etc

Input on card background color-

To change this part, go to general styles. It will change those sections:

Title On Background

Controls the menu categories in the actual menu (not in the categories bar!)

SignupTitle\SignupGreeting

Controls the signup title (in gray below) and greeting (in red below)

Gifts Header Title

Controls the 'Redeem a Reward or Share' title, in the 'My Rewards' section

Deal Badge (price)

Controls the price view of deals only

List Card Title

Controls the titles of the menu items only

Location Select Card

Controls the location selection card without the image section - see in gray background below

Slim Button

Controls the 'Contact us' and 'Send a gift card' buttons on the homepage, along with the 'Order for later' button on the locations selection page, the 'Add a promo code' and 'Allergens' buttons on the menu screen

Warning Message Notice

Controls the different warnings, such as 'please enable location' - see below in pink background

Category Menu

Controls the menu categories bar (left bar on desktop, top bar on mobile)

Menu Header

Controls the '{serving option} from {location}' section - see example below in pink

Menu Item Price

Controls the prices on the menu

Service Option Card

Controls the serving option card, where you can select the time and date of the order (see below in gray background)

Service Option Title

Controls only the title of the serving option in the serving option card (see above)

Change Serving Option Link

Controls only the 'change' button in the serving option card (see above)

Home Page Components

Home Buttons Mobile\Desktop - Controls the buttons of the homepage only

Home First Title: Controls 'Welcome to' in desktop

Home Mobile First Title: Controls 'Welcome to' in mobile

Home Second Title: Controls the business name (second title, after 'Welcome to') in mobile

Home Main Title Desktop: Controls the business name (second title, after 'Welcome to') on the desktop

Home Extra Title Desktop: Controls the 'Let's get started' title

Start New Order Popup Title: Controls the 'what would you like to do' line in the 'Start New Order' popup, see below in black background

Social Links

In the home page > more> Left-Align Social Links will change the position between the middle and left side

Change the height of the social media icons (getting them closer or farther than the title logo) by going to the home page components> desktop title logo> height

To change their color background, go to general styles and change the action color

Please watch video, which explains what the different fields affect on the component. The example is on the buttons - note that some of the fields are showing too much difference, but they might be more effective in other components.

🎨
THIS