Update your site's look with our newest template!
This design reflects a clean, modern look with an emphasis on images and simplicity. It's designed to look great on mobile devices. The new "Pizza Builder" option lets you walk users through a step by step ordering process, and the "Coupon Header" lets you promote your current specials with a direct-to-coupon-walkthrough banner image.
Switching to this design is easy, just follow the steps below. Or, if you need assistance, contact your Customer Success Manager to learn about our design packages.
If you'd like to get a quick preview of the modern design before you make the recommended customizations, just add &modern to the end of your site's URL. So, for instance, if your URL is https://orderonline.granburyrs.com:443/slice/index.html?accountId=11 you would add &modern so it would be https://orderonline.granburyrs.com:443/slice/index.html?accountId=11&modern
Step 1: Activate Modern Design
In Thrive Online Admin, navigate to the Design > Look page. Click on "Advanced Features" link at the bottom and turn on the Design Style = "Modern" option.
If your site is currently in use, you may wish to start with the Preview Modern setting. This allows you access to all the new configuration options in Admin, and you can use the "Preview Modern Design" link below to see the result without impacting your live site. Once everything is configured as desired, change to the "Modern" setting to make it live.
Step 2: Choose your Color Palette
This design uses 4 colors. To customize these, navigate to the Design > Look page. Click on Customize Colors to select your color choices. You don't have to pick 4 different ones - you can just pick two as shown below for a clean look.
When you select Customize Colors you'll see a preview of your site, so as you change a color you can easily see how it will impact the design.
In some areas of the site, a variation of your selected color will be used (lighter or darker). You can click on "Edit All Colors" to see all the shades that will be used. We recommend that you leave the "Compute Shades" checked.
Step 3: Choose Your Background Image for the Header
A large background image across the page allows you to achieve a custom branded look. Since the middle of the image is mostly covered by the ordering screens, try to use an image that has important visuals such on the sides & top rather than centered. The portions of the image that are seen will vary based on the customer's screen size, resolution and zoom level on their browser. We recommend the dimensions 1920 x 1080 pixels, but saved for "screen quality" so the file size is small enough to load quickly.
Navigate to Images and upload the image to Thrive online, then right click on the image to "Copy Image Address".
Navigate to Design, Header/Footer and in the Header area, replace your current Header with the new image by clicking on Insert > Image. Paste the image URL here.
Note: The footer will still be displayed at the bottom of the screen.
We recommend that you remove any "Pop up message for 1st time visitors" at this time.
Press NEXT to save your changes.
Step 4: Review Category & Item Images
This design uses rounded image placeholders which may crop your current images in unexpected ways. Review your category and item images to make sure they all look good. An image which is zoomed out a bit and 600 x 600 pixels (but saved for "screen quality" for small file size). Here's an example of a good image composition.
If you decide to replace any images, the best way is to go to Image >My Images, find the image you wish to change, and use the "Replace" function. This will update the image while keeping it connected to all the buttons & items where it is used.
Step 5: Optional Settings
Review the optional settings if desired.
The following 3 settings are available on a category basis. To change these settings, navigate to Items & Menus > Menu Category. Select your category to Edit. You'll see these 3 options which are designated only for Modern design.
Note: If you have multiple locations, you'll need to set these options for each location individually.
Pizza Builder: (Use "Builder" Layout for this category). Walk users through customizing their pizza. Instead of displaying a long list of options, the pizza builder will show a series of steps. First, select size & style, then move through each topping category using the 'Next' button or by clicking on the steps at the top of the screen. The user can choose 'Add to cart' at any time in the process as long as all requirements have been fulfilled.
Note: The modifier categories are shown according to their sort order in the POS.
"Use Numerical Control for Modifiers": This setting will include a numeric + and - option for all modifiers in the category.
.png "Image: https://tol.uservoice.com/assets/225265321/image%20(7).png")
Show half & half Specialty Drop Down: Controls whether users have the option for this category to create a half & half with another item in that category (i.e. half Veggie / Half Combo). It will appear like this:
Coupon Header: This design offers an option for an attention-grabbing coupon header image that will lead your customer directly into a coupon walk through. The display area for this image will range from 450 x 140 pixels to 590 x 130 pixels, based on screen size, zoom level, browser, etc. Because of this variation, its best not to use logos or images but instead use food shots that can be cut off a bit on either side as the screen zooms in.
Save your image in "screen quality" so it is not too large. Here's what it will look like on the site.
To add a coupon header, first go to Images > My Images and upload the image you'll use for the coupon header. Then, navigate to Items & Menus > Menu Categories.
Select "New Category" at the bottom of the page.
On the New Category screen, select category type "Subheader Offer"
Use "Browse Image" to select your image, and choose your Offer. The POS Offer Display Name will appear in the upper left of the image. The POS offer description appears in smaller text below. This always displays in white text, so consider the appropriate contrast when selecting your image and your color scheme. An "order now" button will appear automatically in the lower right.
When you've completed all your design changes, navigate to the Publish menu and select Publish for all locations. Your changes will be reflected shortly.
Suggestive Selling - Now Shows 2 Options. The item-based suggestive selling now will show 2 item options in the pop up. To learn more about setting up suggestive selling, review this article.
FAQs about the Modern Design
Can I modify the images to be square instead of circles? At this time, circles are the standard and that can not be configured in this design. Use images with a white background and set your secondary color to white for a free floating look.
Can I change the font? Support for multiple fonts will be coming soon.
Can I use CSS to customize my site? Modern design does not support custom CSS.
Can I use Location Finder with the new design? Yes! Location Finder has been redesigned with an improved workflow to help your customers find the proper location to order from.
