Articles on: Branded Tracking Page

How to Customize Block and Section Styles

Platforms: All platforms Plans: Premium, Enterprise


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


  1. Select the Header section of the page and the settings and style window will be shown.
  2. Go to Style and customize the following:
  • Layout
  • Background color
  • Text and icons color


Customizing the style of the header message


  1. Select the Header message section and the settings and style window will be shown.
  2. Go to Style and customize the following:
  • Background color
  • Text

a. Font

b. Text color

c. Alignment


Customizing the style of order lookup


  1. Select the Order Lookup section and the settings and style window will be shown.
  2. 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


  1. Select the Compact tracking info section, and the settings and style window will expand.
  2. 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


  1. Select the Instagram feed section, and the settings and style window will be shown.
  2. 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


  1. Select the Subscription section, and the settings and style window will be shown.
  2. 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


  1. Select the Shipment items section and the settings and style window will be shown.
  2. 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


  1. Click the Product recommendations section, and the settings and style window will be shown.
  2. 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


  1. Select the Shipment review section and the settings and style window will be shown.
  2. 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



  1. Select the Footer section and the settings and style window will be shown.
  2. Go to Style and customize the following:
  • Background color
  • Text: Font, font size, text color
  • Social media logos color


Use cases


  1. 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.


  1. 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