Customize Web & App

﻿
Looking for customization options for website and ordering apps?


For basic modifications such as text, basic colors, and content, direct settings were provided. Now this page or app builder feature enables you to personalize your website and app, making them truly yours! This functionality extends beyond website pages such as landing page, discovery page, and merchant menu pages, allowing customization even for the app screens.

Utilizing HTML and CSS, you can add a personal touch to your digital space. HTML forms the structural foundation, while CSS brings in the stylish elements. If coding isn't your forte, no worries – you can easily collaborate with any "CSS designer" for this one-time task. This guide is designed to simplify the process and make it an enjoyable experience.
﻿
To the left, click on "Settings"
﻿
﻿
Then click "Customize Web & App"
﻿
﻿
Page Selections 
Start by choosing the specific page you want to customize, whether it's the Landing or Home page, Discovery page, or the Merchant menu page. You can find this option on the top left of the editor.
﻿
﻿
Hide/Unhide Sections or Elements
Utilize the eye icon to toggle the visibility of any element on the selected page. This allows you to easily hide or unhide specific sections or elements as needed.
﻿
﻿
Rearrange Sections or Elements
To rearrange sections or elements on the selected page, simply drag and drop them into your preferred order. This intuitive process lets you customize the layout with ease.
﻿
﻿
Customize Existing Elements 
Select the specific element on the page that you want to modify from the list.
﻿
﻿
On the right side of the editor, open the code editor section designated for custom CSS.
﻿



Input the CSS code necessary to customize the selected element. After entering the CSS code, ensure to save your changes. 

Note: If you're targeting mobile-specific styles, utilize the "@media" query to ensure proper responsiveness.
﻿
﻿
Verify that the added CSS reflects correctly in the page builder content.
﻿
﻿
Finally, click the "Publish" button to apply the modifications across the ordering channels.

﻿
﻿
Stack: From the left sidebar, the Stack option directs you to the screen where you can work on customization, and all the elements of the selected page will be displayed.
﻿
﻿
Add Custom Sections or Elements
From the left sidebar, use the + icon to easily pick & add a custom element to the selected page. Similarly, you can add more elements if required. 
﻿
﻿
Add and Utilize Assets 
From the left sidebar, utilize the Image icon to upload assets. The links generated can then be used to integrate them into your Custom Code element.
﻿
﻿
Click +Add to upload an asset
﻿
﻿
Locate the uploaded asset from the list and click the settings icon
﻿
﻿
Copy the link of the image and close the popup. 
﻿
﻿
Now select your Custom Code Element
﻿
﻿
From the right panel, Select Custom HTML 
﻿
﻿
Now you can utilize the image link in the code editor to write your HTML code & the section will be added. 
﻿
﻿
Refine your image using the CSS editor for customizations or styling purposes.
﻿
﻿
Verify that the added section reflects correctly in the page builder content. Finally, click the "Publish" button to apply the modifications across the ordering channels.
﻿
﻿
Customize Merchant Menu Page 
Following the same actions as above, you can also custom-design the menu pages for specified merchants. 

From the dropdown, switch to merchant pages 
﻿
﻿
Select the Store from the list 
﻿
﻿
Add perform similar actions as explained above to customize. 
﻿
﻿
Lastly, click publish to make all changes appear on your website and ordering apps. 
﻿
﻿
﻿
﻿
 