Use Custom CSS to Personalize Your Tracking Page
Plans: Enterprise Platforms: Ecommerce platforms, Commerce API, Tracking API, and CSV
With Custom CSS, you can personalize your branded tracking pages to match your brand’s unique style and look. The feature lets you go beyond the default theme settings and customize your entire page or specific sections.
Cascading Style Sheets (CSS) control how elements appear on your page and can affect multiple pages simultaneously. Customizing CSS requires some knowledge of CSS and HTML. Ensure you understand these languages, as errors in code can cause display issues on your page.
In this article, we will discuss:
Prerequisites
Add custom CSS to branded tracking page
Class selector usage
Use cases
Additional resources
Custom CSS functions by overriding your theme's settings, ensuring that any changes you make take precedence over the built-in styles. Before adding custom CSS to your page, please consider the following guidelines:
CSS Rules and Constraints:
Only `@media` and `@font-face` at-rules are allowed.
For page-level CSS, `id selectors` and `class selectors` are not allowed.
For section-level CSS, you can apply styles directly in the editor, which will target the outermost level of the section.
For section-level CSS, you can use the provided `id selectors`, `class selectors`, and `tag selectors`:
a.You can enter `#` or `.` in the editor, and available `id` and `class selectors` will be suggested.
b. Supported tags include `input` and `img`.
Some sections may not support `id` and `class selectors` due to their complex structure, which limits the available selectors.
CSS variables cannot use `--btp` as a prefix.
Font usage:
Only URLs from `https://fonts.googleapis.com` are allowed for custom CSS. If you need to use other URLs, please contact us for evaluation.
While custom fonts aren’t restricted, keep in mind that they are separate resources that browsers download before rendering text, which can affect page performance. Ensure that the use of custom fonts doesn’t negatively impact your page. Learn how to use custom fonts.
Selector hierarchy:
If a custom CSS rule is applied to a tag wrapping the parent section element, it is treated as a descendant tag, and the style will be applied to that section. By default, the parent section is wrapped in a `<div>` tag.
Combinatorial electors:
We do support combinatorial selectors, but use them cautiously, as complex selectors can complicate issue resolution on our end.
If you encounter an error related to these limitations in your custom CSS and can't determine what's causing the error, you can contact us for assistance.
You can add custom CSS to your entire branded tracking page for a more consistent experience throughout, or to a specific section of the tracking page within that section’s style section.
CSS rules that apply to the entire page are limited to 1500 characters.
You can add custom CSS that affects all sections of your page. For instance, you can modify how images are displayed throughout the page.
Go to Tracking page variations in your AfterShip Tracking admin.
Select the page variation where you want to do custom CSS modifications. Click Actions and select Edit to access the tracking page editor.
Since we are adding custom CSS rules to modify the style settings of the entire tracking page, go to the main Style tab.
Enable the Custom CSS option.
Decide in advance what changes you would like to make to the page and accordingly prepare or write the CSS code. Add that CSS code to the Custom CSS code box.
For example, if you want to add a 2px green border to the images on the order tracking page with 8px rounded corners and a subtle shadow, this is what the CSS snippet would look like.
The custom CSS code option allows you to style the branded tracking page how you want. It will be prioritized over other style settings. It is advisable only to use custom CSS to change fonts, colors, backgrounds, and section layouts. Other changes could potentially harm your tracking page.
Click Save once you are satisfied with the changes.
CSS rules for a specific section are limited to 500 characters.
You can also add Custom CSS to individual sections of your page. This CSS will only apply to the selected section. For instance, you can change the font color or background color for that specific area.
Go to Tracking page variations in your AfterShip Tracking admin.
Select the page variation where you want to do custom CSS modifications. Click Actions and select Edit to access the tracking page editor.
Since we are adding custom CSS rules to modify the style settings to a specific section’s style settings, click on that section in the Sections tab.
Go to the Style tab and enable the Custom CSS option.
Decide in advance what changes you would like to make to the section and accordingly prepare or write the CSS code. Add that CSS code to the Custom CSS code box.
For example, if you want to personalize the title of the product recommendation section on your branded tracking page with a red background color, 20px of padding around the content, rounded corners with a 10px radius, and a subtle shadow using a black color with 10% capacity, this is what the CSS snippet would look like.
Click Save once you are satisfied with the changes.
The .class selector selects elements with a specific class attribute with the page or a section of the page. Currently, we only support a limited number of auto-generated class selectors for every section and the overall tracking page. You can utilize the selector prefix in a section/page to see these options automatically.
When you type a period (.) character, all available classes will be displayed.
This restriction is in place because custom CSS allows for significant customization. If we didn’t impose these limits, it could complicate future maintenance of our functions or might potentially harm the functioning and layout of your tracking page.
1. Overlay fade
2. Gallery with horizontal scroll
3. Image grid
If you're interested in learning more about CSS, then you can explore some of the following resources:
CSS basics
Learn to style HTML using CSS
CSS reference
CSS selectors
Overview
With Custom CSS, you can personalize your branded tracking pages to match your brand’s unique style and look. The feature lets you go beyond the default theme settings and customize your entire page or specific sections.
Cascading Style Sheets (CSS) control how elements appear on your page and can affect multiple pages simultaneously. Customizing CSS requires some knowledge of CSS and HTML. Ensure you understand these languages, as errors in code can cause display issues on your page.
What you'll learn
In this article, we will discuss:
Prerequisites
Add custom CSS to branded tracking page
Class selector usage
Use cases
Additional resources
Notable considerations before using custom CSS
Custom CSS functions by overriding your theme's settings, ensuring that any changes you make take precedence over the built-in styles. Before adding custom CSS to your page, please consider the following guidelines:
CSS Rules and Constraints:
Only `@media` and `@font-face` at-rules are allowed.
For page-level CSS, `id selectors` and `class selectors` are not allowed.
For section-level CSS, you can apply styles directly in the editor, which will target the outermost level of the section.
For section-level CSS, you can use the provided `id selectors`, `class selectors`, and `tag selectors`:
a.You can enter `#` or `.` in the editor, and available `id` and `class selectors` will be suggested.
b. Supported tags include `input` and `img`.
Some sections may not support `id` and `class selectors` due to their complex structure, which limits the available selectors.
CSS variables cannot use `--btp` as a prefix.
Font usage:
Only URLs from `https://fonts.googleapis.com` are allowed for custom CSS. If you need to use other URLs, please contact us for evaluation.
While custom fonts aren’t restricted, keep in mind that they are separate resources that browsers download before rendering text, which can affect page performance. Ensure that the use of custom fonts doesn’t negatively impact your page. Learn how to use custom fonts.
Selector hierarchy:
If a custom CSS rule is applied to a tag wrapping the parent section element, it is treated as a descendant tag, and the style will be applied to that section. By default, the parent section is wrapped in a `<div>` tag.
Combinatorial electors:
We do support combinatorial selectors, but use them cautiously, as complex selectors can complicate issue resolution on our end.
If you encounter an error related to these limitations in your custom CSS and can't determine what's causing the error, you can contact us for assistance.
Add custom CSS to the branded tracking page
You can add custom CSS to your entire branded tracking page for a more consistent experience throughout, or to a specific section of the tracking page within that section’s style section.
1. Add custom CSS to the entire branded tracking page
CSS rules that apply to the entire page are limited to 1500 characters.
You can add custom CSS that affects all sections of your page. For instance, you can modify how images are displayed throughout the page.
Go to Tracking page variations in your AfterShip Tracking admin.
Select the page variation where you want to do custom CSS modifications. Click Actions and select Edit to access the tracking page editor.
Since we are adding custom CSS rules to modify the style settings of the entire tracking page, go to the main Style tab.
Enable the Custom CSS option.
Decide in advance what changes you would like to make to the page and accordingly prepare or write the CSS code. Add that CSS code to the Custom CSS code box.
For example, if you want to add a 2px green border to the images on the order tracking page with 8px rounded corners and a subtle shadow, this is what the CSS snippet would look like.
img {
border: 2px solid #4CAF50; /* Adds a green border */
border-radius: 8px; /* Rounds the corners of the images */
max-width: 100%; /* Ensures images are responsive */
height: auto; /* Maintains aspect ratio */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
}The custom CSS code option allows you to style the branded tracking page how you want. It will be prioritized over other style settings. It is advisable only to use custom CSS to change fonts, colors, backgrounds, and section layouts. Other changes could potentially harm your tracking page.
Click Save once you are satisfied with the changes.
2. Add custom CSS to a specific section within your tracking page
CSS rules for a specific section are limited to 500 characters.
You can also add Custom CSS to individual sections of your page. This CSS will only apply to the selected section. For instance, you can change the font color or background color for that specific area.
Go to Tracking page variations in your AfterShip Tracking admin.
Select the page variation where you want to do custom CSS modifications. Click Actions and select Edit to access the tracking page editor.
Since we are adding custom CSS rules to modify the style settings to a specific section’s style settings, click on that section in the Sections tab.
Go to the Style tab and enable the Custom CSS option.
Decide in advance what changes you would like to make to the section and accordingly prepare or write the CSS code. Add that CSS code to the Custom CSS code box.
For example, if you want to personalize the title of the product recommendation section on your branded tracking page with a red background color, 20px of padding around the content, rounded corners with a 10px radius, and a subtle shadow using a black color with 10% capacity, this is what the CSS snippet would look like.
.as-btp__product-recommendations-title{
background-color: #ff0000; /* Red
background */
padding: 20px; /* Adds padding around the section */
border-radius: 10px; /* Rounds the corners */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}Click Save once you are satisfied with the changes.
Class selector usage
The .class selector selects elements with a specific class attribute with the page or a section of the page. Currently, we only support a limited number of auto-generated class selectors for every section and the overall tracking page. You can utilize the selector prefix in a section/page to see these options automatically.
When you type a period (.) character, all available classes will be displayed.
This restriction is in place because custom CSS allows for significant customization. If we didn’t impose these limits, it could complicate future maintenance of our functions or might potentially harm the functioning and layout of your tracking page.
What else you can do with Custom CSS code
1. Overlay fade
2. Gallery with horizontal scroll
3. Image grid
Additional resources for CSS
If you're interested in learning more about CSS, then you can explore some of the following resources:
CSS basics
Learn to style HTML using CSS
CSS reference
CSS selectors
Updated on: 18/10/2024
Thank you!