Step 2: Create a New Tracking Page 📦

Updated 2 weeks ago by Julie

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

preview

Delivered

preview-transit

In-Transit

preview-multi

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.

Need more customization options? Check out our App Block


How did we do?