How to Customize Block and Section Styles
Platforms: All platforms Plans: Premium, Enterprise
This guide provides step-by-step instructions for customizing the styles of individual blocks and sections on your branded tracking page. You can define styles for different sections, including the header, order lookup, compact tracking info, Instagram feed, subscription, shipment items, product recommendations, and footer. Customizing block and section styles allows businesses to highlight key areas while maintaining a cohesive brand identity.
Select the Header section of the page and the settings and style window will be shown.
Go to Style and customize the following:
Layout
Background color
Text and icons color
Select the Header message section and the settings and style window will be shown.
Go to Style and customize the following:
Background color
Text
a. Font
b. Text color
c. Alignment
Select the Order Lookup section and the settings and style window will be shown.
Go to Style and customize based on the section type:
If the section type is Column:
a. Layout
b. Background color
If the section type is Hero banner:
a. Lookup fields container - Background color
b. Border - Color, Width
c. Shadow color
d. Shape
e. Title - Font, Font size, Text color
Select the Compact tracking info section, and the settings and style window will expand.
Go to Style and customize the following:
Container: Background color, border color, and border width, shadow color, shape
Title: Font, font size, text color, alignment
Progress Bar: Color, background bar, text (Font, current stage color, other stages color)
Select the Instagram feed section, and the settings and style window will be shown.
Go to Style and customize the following:
Container: Background color, border color and width, shadow color, shape
Title: Font, font size, text color, alignment
Select the Subscription section, and the settings and style window will be shown.
Go to Style and customize the following:
Background Color
Container: Background color, border color, border width, shadow color, shape
Title: Font, font size, text color
Select the Shipment items section and the settings and style window will be shown.
Go to Style and customize the following:
Background color
Container: Background color, border color, border width, shadow color, shape
Title: Font, font size, text color, alignment
Click the Product recommendations section, and the settings and style window will be shown.
Go to Style and customize the following:
Background color
Title: Font, font size, text color, alignment
Product image: Background color, shape, aspect ratio
Select the Shipment review section and the settings and style window will be shown.
Go to Style and customize the following:
Background color
Container
a. Background color
b. Border color
c. Border width
d. Shadow color
e. Shape
Title
a. Font
b. Font size
c. Text color
Select the Footer section and the settings and style window will be shown.
Go to Style and customize the following:
Background color
Text: Font, font size, text color
Social media logos color
Highlighting important sections:
Set a different background color for the subscription section to make it stand out from the rest of the page.
Customize the compact tracking info section progress bar with unique colors to enhance visibility.
Brand consistency:
Match the footer text font and color with the brand theme to ensure a uniform look.
Hero banner: A large visual element used as a prominent section on a webpage.
Container: A structured layout element that holds content, often used to group similar elements.
Progress Bar: A graphical representation of a process that indicates completion status.
Aspect Ratio: The proportional relationship between the width and height of an image.
Overview
This guide provides step-by-step instructions for customizing the styles of individual blocks and sections on your branded tracking page. You can define styles for different sections, including the header, order lookup, compact tracking info, Instagram feed, subscription, shipment items, product recommendations, and footer. Customizing block and section styles allows businesses to highlight key areas while maintaining a cohesive brand identity.
Steps to customize block and section styles
Customizing the style of the header section
Select the Header section of the page and the settings and style window will be shown.
Go to Style and customize the following:
Layout
Background color
Text and icons color
Customizing the style of the header message
Select the Header message section and the settings and style window will be shown.
Go to Style and customize the following:
Background color
Text
a. Font
b. Text color
c. Alignment
Customizing the style of order lookup
Select the Order Lookup section and the settings and style window will be shown.
Go to Style and customize based on the section type:
If the section type is Column:
a. Layout
b. Background color
If the section type is Hero banner:
a. Lookup fields container - Background color
b. Border - Color, Width
c. Shadow color
d. Shape
e. Title - Font, Font size, Text color
Customizing the style of the compact tracking info section
Select the Compact tracking info section, and the settings and style window will expand.
Go to Style and customize the following:
Container: Background color, border color, and border width, shadow color, shape
Title: Font, font size, text color, alignment
Progress Bar: Color, background bar, text (Font, current stage color, other stages color)
Customizing the style of Instagram feed
Select the Instagram feed section, and the settings and style window will be shown.
Go to Style and customize the following:
Container: Background color, border color and width, shadow color, shape
Title: Font, font size, text color, alignment
Customizing the style of subscription
Select the Subscription section, and the settings and style window will be shown.
Go to Style and customize the following:
Background Color
Container: Background color, border color, border width, shadow color, shape
Title: Font, font size, text color
Customizing the style of shipment items
Select the Shipment items section and the settings and style window will be shown.
Go to Style and customize the following:
Background color
Container: Background color, border color, border width, shadow color, shape
Title: Font, font size, text color, alignment
Customizing the style of product recommendations
Click the Product recommendations section, and the settings and style window will be shown.
Go to Style and customize the following:
Background color
Title: Font, font size, text color, alignment
Product image: Background color, shape, aspect ratio
Customizing the style of the shipment review section
Select the Shipment review section and the settings and style window will be shown.
Go to Style and customize the following:
Background color
Container
a. Background color
b. Border color
c. Border width
d. Shadow color
e. Shape
Title
a. Font
b. Font size
c. Text color
Customizing the style of the footer section
Select the Footer section and the settings and style window will be shown.
Go to Style and customize the following:
Background color
Text: Font, font size, text color
Social media logos color
Use cases
Highlighting important sections:
Set a different background color for the subscription section to make it stand out from the rest of the page.
Customize the compact tracking info section progress bar with unique colors to enhance visibility.
Brand consistency:
Match the footer text font and color with the brand theme to ensure a uniform look.
Appendix
Hero banner: A large visual element used as a prominent section on a webpage.
Container: A structured layout element that holds content, often used to group similar elements.
Progress Bar: A graphical representation of a process that indicates completion status.
Aspect Ratio: The proportional relationship between the width and height of an image.
Updated on: 28/03/2025
Thank you!