How to brand your E-Commerce store ?
a) Customize App Bar
01. Theme Color
You can change Theme Color from Design ➝ App Bar & Theme➝ App Configuration ➝ Theme Color
02. Title Color
You can change Title Color from Design ➝ App Bar & Theme➝ App Configuration ➝ Title Color
03. App Bar Styles
You can change App Bar Styles from Design ➝ App Bar & Theme➝ App Bar
04. Search Bar Width
You can change Search Bar Width from Design ➝ App Bar & Theme➝ App Bar ➝ Search Bar Width
05. Search Bar Height
You can change Search Bar Height from Design ➝ App Bar & Theme➝ App Bar ➝ Search Bar Height
06. Search Bar Hint Text Color
You can change Search Bar Hint Text Color from Design ➝ App Bar & Theme➝ App Bar ➝ Search Bar Hint Text Color
07. Search Bar Hint Text Size
You can change Search Bar Hint Text Size from Design ➝ App Bar & Theme➝ App Bar ➝ Search Bar Hint Text Size
08. Search Bar Border Radius
You can change Search Bar Border Radius from Design ➝ App Bar & Theme➝ App Bar ➝ Search Bar Border Radius
09. Search Bar Fill Color
You can change Search Bar Fill Color from Design ➝ App Bar & Theme➝ App Bar ➝ Search Bar Fill Color
10. App Bar Height
You can change App Bar Height from Design ➝ App Bar & Theme ➝ App Bar➝ App Bar Height
11. App Bar Expanded Height
You can change App Bar Expanded Height from Design ➝ App Bar & Theme ➝ App Bar➝ App Bar Expanded Height
12. App Bar Background Color
You can change App Bar Background Color from Design ➝ App Bar & Theme➝ App Bar ➝ App Bar Background Color
13. Menu Icon
You can change Menu Icon from Design ➝ App Bar & Theme➝ Menu Icon
14. App Bar Background Image
You can change App Bar Background Image from Design ➝ App Bar & Theme➝ App Bar Background Image
Please make sure to press the Save Changes button to save the changes.
b) Customize Fonts, Colors & Text Sizes
01. Font Customization
You can select or change Font from Design ➝ Branding ➝ Font Customization
02. Button Font Size
You can change Button Font Size from Design ➝ Branding➝ Button Customization ➝ Font Size
03. Button Border Radius
You can change Button Border Radius from Design ➝ Branding➝ Button Customization ➝ Border Radius
04. Primary Button Background Color & Text Color
You can change the Primary Button Background Color & Text Color from Design ➝ Branding➝ Button Customization ➝ Primary Button
05. Secondary Button Background Color & Text Color
You can change Secondary Button Background Color & Text Color from Design ➝ Branding➝ Button Customization ➝ Secondary Button
06. Title Text Font Size & Color
You can change Title Text Font Size & Text Color from Design ➝ Branding➝ Text Customization ➝ Title
07. Subtitle Text Font Size & Color
You can change Subtitle Text Font Size & Text Color from Design ➝ Branding➝ Text Customization ➝ Subtitle
08. Secondary Text Font Size & Color
You can change Secondary Text Font Size & Text Color from Design ➝ Branding➝ Text Customization ➝ Secondary
09. Body Text Font Size & Color
You can change Body Text Font Size & Text Color from Design ➝ Branding➝ Text Customization ➝ Body
10. Highlights Text Font Size & Color
You can change Highlights Text Font Size & Text Color from Design ➝ Branding➝ Text Customization ➝ Highlights
11. Colors (Primary, Secondary, Warning, Danger, Success)
You can change Colors from Design ➝ Branding➝ Colors
Please make sure to press the Save Changes button to save the changes.
c) Customize Navigation Drawer Menu (Side Navigation)
01. Navigation Drawer Mode
You can update Navigation Drawer Mode from Design ➝ Navigation Drawer ➝ Header Settings ➝ Drawer Mode
02. Navigation Drawer Background Color
You can change Navigation Drawer Background Color from Design ➝ Navigation Drawer ➝ Header Settings ➝ Background Color
03. Navigation Drawer Text Color
You can change Navigation Drawer Text Color from Design ➝ Navigation Drawer ➝ Header Settings ➝ Text Color
04. Navigation Drawer Display Logo
You can enable Navigation Drawer Display Logo from Design ➝ Navigation Drawer ➝ Header Settings ➝ Display Logo
05. Navigation Drawer Social Media Status
You can change Navigation Drawer Social Media Status from Design ➝ Navigation Drawer ➝ Header Settings ➝ Show Social Media
06. Navigation Drawer Content Alignment
You can change Navigation Drawer Content Alignment from Design ➝ Navigation Drawer ➝ Header Settings ➝ Content Alignment
07. Navigation Drawer Layout Template
You can change Navigation Drawer Layout Template from Design ➝ Navigation Drawer ➝ Layout Template
08. Navigation Drawer Background Image
You can change Navigation Drawer Background Image from Design ➝ Navigation Drawer ➝ Assets ➝ Navigation Drawer Background Image
09. Navigation Drawer Logo Image
You can change Navigation Drawer Logo Image from Design ➝ Navigation Drawer ➝ Assets ➝ Logo Image
Please make sure to press the Save Changes button to save the changes.
d) Customize the Bottom Bar Navigation
01. Bottom Bar Navigation Icons Color
You can change Bottom Bar Navigation Icons Color from Design ➝ Bottom Bar ➝ Navigation Icons Color
02. Bottom Bar Active Tab Color
You can change the Bottom Bar Active Tab Color from Design ➝ Bottom Bar ➝ Active Tab Color
03. Bottom Bar Navigation Background Color
You can change Bottom Bar Navigation Background Color from Design ➝ Bottom Bar ➝ Navigation Background Color
04. Bottom Bar Layout Template
You can change Bottom Bar Layout Template from Design ➝ Bottom Bar ➝ Layout Template
Please make sure to press the Save Changes button to save the changes.
e) Customize Loading Icon
01. Loading Icon Style
You can change Loading Icon Style from Design ➝ Loading Icon
02. Progress Indicator Color
You can change the Progress Indicator Color from Design ➝ Loading Icon ➝ Progress Indicator Color
03. Loading Icon Width
You can change Loading Icon Width from Design ➝ Loading Icon ➝ Loading Icon Width
Please make sure to press the Save Changes button to save the changes.
f) Remove Internal Web Page Elements Inside the App
You can remove internal web page elements by adding a div class name to "Add div" from Design ➝ Web View Styles
You can Add Custom CSS for your web page elements in the "Add Custom CSS" section.
Please make sure to press the Save Changes button to save the changes.