Customizing your Track Your Order Page

Once you've set up your Track Your Order page with Trackable, you may want to make additional customizations to match your store's branding or add extra functionality. This guide will walk you through how to edit your tracking page's HTML directly through the Shopify admin.

Accessing the HTML Editor

1. Log in to your Shopify admin
2. Navigate to Online Store > Pages
3. Find the page titled "Track Your Order" (or your custom page title)
4. Click on the page to open it
5. Click the Edit website button
6. In the editor, look for the HTML button (typically represented by > ) to access the HTML code

What You Can Customize

When editing the HTML of your Track Your Order page, you can make the following changes:

1. Page Header and Text

You can modify the main heading and descriptive text of your page:

html <h1>Track Your Order</h1> <p>Enter your order information below to keep up-to-date with your shipping and products.</p>

Change these elements to match your brand's voice and provide clear instructions to your customers.

2. Form Layout and Styling

The tracking form consists of input fields for email/phone and order number:

```html

<div class="enblk-text-field" id="email-field">
  Email

  <div class="enblk-error-message">Please enter your email address or phone number</div>
</div>

<div class="enblk-text-field" id="phone-field">
  Phone Number (Alternative to Email)

  <div class="enblk-error-message">Please enter your phone number or email address</div>
</div>

<div class="enblk-text-field" id="order-field">
  Order Number

  <div class="enblk-error-message">Please enter your order number</div>
</div>

<p>
  Track Order
</p>

```

You can modify field labels, placeholders, and button text while being careful to preserve the input field names (e.g., name="order[email]" ).

3. Styling with CSS

You can customize the appearance of your tracking page by modifying the CSS styles:

```html

```

You can change colors, fonts, spacing, and other visual elements to match your store's branding.

Important Elements to Preserve

When customizing your page, make sure to keep these elements intact:

1. Form Action: Don't change the form's action attribute (action="/a/enb-lookup/lookup" ), as this is required for the order lookup functionality.
2. Input Field Names: The input fields must maintain their original names:

• name="order[email]" for the email field
• name="order[phone]" for the phone field
• name="order[order_name]" for the order number field

1. Script Reference: Keep the reference to the lookup script at the bottom of the page: ```html

```

1. Form ID: Preserve the form's ID attribute (id="enb-lookup-form" ), as it's used by the JavaScript to handle form submission.

Adding Additional Content

You can add your own content around the tracking form, such as:

• FAQ sections about shipping and tracking
• Links to your shipping policy
• Return and exchange information
• Customer service contact details

Example:

```html

<h3>Need Help?</h3>
<p>If you have any questions about your order, please contact our customer support team at <a href="mailto:support@yourstore.com">support@yourstore.com</a>.</p>

```

Saving Your Changes

After making your customizations:

1. Click Save in the HTML editor
2. Preview your changes using the Preview button
3. If everything looks good, click Save on the page editor to publish your changes

Best Practices

1. Make a Backup: Before making significant changes, copy the original HTML code to a text file so you can restore it if needed.
2. Test Thoroughly: After customizing, test the form by entering sample order information to ensure it still works correctly.
3. Mobile Responsiveness: Make sure your customizations look good on mobile devices by testing on different screen sizes.
4. Maintain Branding Consistency: Use colors, fonts, and styling that match the rest of your store.
5. Keep It Simple: A clean, straightforward design typically leads to better customer experiences.

Remember that any time you update the Trackable app settings and save them, it will regenerate the tracking page and may overwrite your HTML customizations. Always make a backup of your custom HTML before updating app settings.