Step 2: Create a New Tracking Page 📦
Updated 4 months ago
by
Julie
- 1.) Create a tracking page from Wonderment Templates:
- 2.) Add HTML Block for Order Status
- 3.)Add HTML Block for Product Header:
- 4.) Select Products in Product Block
- 5.) Update FAQ Content & FAQ background:
- 6.) Update tracking Block:
- 7.) Click Publish & View In Store!
- Preview and test your page
- Next Steps
1.) Create a tracking page from Wonderment Templates:
Notes: I personally recommend the “Accomplished” layout.
2.) Add HTML Block for Order Status
<div class="tp-header">
<h2>Your Order Status</h2>
</div>
<style>
.tp-header {
text-align: center;
padding:30px;
}
</style>
3.)Add HTML Block for Product Header:
<div class="tp-subheader">
<h2>Featured Products</h2>
</div>
<style>
.tp-subheader {
text-align: center;
padding:30px 0;
}
</style>
4.) Select Products in Product Block
We recommend selecting products that are most attractive to returning or repeat customers. If you offer a subscription, this is a great opportunity to convert customers to your subscription services.
As Black Friday/Cyber Monday approaches, make sure that you have at least one digital product for those last minute shoppers!
5.) Update FAQ Content & FAQ background:
- Update the questions with relevant shipping or product questions
- Select the expand icon that is in line with your store's styling
- Change Question background color to (rgba(0,0,0,0.00) from rgba(0, 0, 0, 0.03)
6a) If the FAQs design doesn’t match the Store design, you can add the following code only have lines on the top and the bottom of the questions section of the FAQs:
To have a single line between FAQs, install this code below in the Page Style section of the Wonderment Tracking Page Builder
.tp-accordion-group{
border:0;
border-radius: 0!important;
}
.tp-accordion-block {
border:0;
border-radius: 0!important;
}
.tp-accordion-answer {
border:0;
border-radius: 0!important;
}
.tp-accordion-question {
border:0;
border-radius: 0!important;
}
.tp-accordion-group {
border-bottom:1px solid #3f3f41
}
6.) Update tracking Block:
- Add hero image -- we recommend choosing a lifestyle image from your site that is not specific to any one product.
- Update banner colors - we recommend choosing your accent hex code color from your site.
7.) Click Publish & View In Store!
Preview and test your page
While developing your page, you can use the "Preview" button to see the appearance live on your site. If you'd like to preview the page in different states, you can use the following search terms:
Search Term | Delivered State |
| Delivered |
| In-Transit |
| If looked up by order number, and there there are two or more packages in the order. |
Have questions or need help? Reach us at help@wonderment.cc for assistance.
Next Steps
Once you have completed your tracking page configuration, it is time to launch Wonderment!
Looking for something more advanced?
We expose a complete set of styling tags for all on-page elements, to make any styling changes fast and easy. This enables you to do things like changing colors, sizing, layout, showing or hiding different elements, and so on. We have a dictionary of the CSS tags here.
