{"id":2208,"date":"2025-01-02T03:03:33","date_gmt":"2025-01-02T03:03:33","guid":{"rendered":"https:\/\/synctrack.io\/?post_type=knowledgebase&p=2208"},"modified":"2025-04-22T02:33:04","modified_gmt":"2025-04-22T02:33:04","slug":"tracking-page","status":"publish","type":"knowledgebase","link":"https:\/\/synctrack.io\/knowledge-base\/order-tracking\/features\/tracking-page\/","title":{"rendered":"Tracking page editor"},"content":{"rendered":"\n

Design a post-purchase experience that reflects your brand and keeps your customers informed. The Tracking Page Editor lets you fully customize how customers look up and track their orders.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Overview<\/strong><\/h2>\n\n\n\n

To edit tracking page, go to Tracking Page > Tracking page editor > Customize<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The editor is divided into three tabs:<\/p>\n\n\n\n

    \n
  1. Order Lookup Page \u2013 Where customers enter tracking details.<\/li>\n\n\n\n
  2. Order Status Page \u2013 Where customers view the status of their shipment.<\/li>\n\n\n\n
  3. Appearance \u2013 Where you customize the design and layout.<\/li>\n<\/ol>\n\n\n\n

    <\/p>\n\n\n\n

    1.\u00a0Order lookup page<\/strong><\/h1>\n\n\n\n

    The Order Lookup tab is where you set up the search form your customers will use to check the status of their orders.\u00a0This is the first step in your customer\u2019s journey. <\/p>\n\n\n\n

    Lookup options<\/strong><\/h2>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    You can enable one or more input methods. All selected fields will appear on the form. Only check the boxes you want customers to use for order lookup. Unchecked fields will not be visible.<\/p>\n\n\n\n

      \n
    • Tracking Number<\/li>\n\n\n\n
    • Order ID<\/li>\n\n\n\n
    • Email<\/li>\n\n\n\n
    • Phone Number<\/li>\n<\/ul>\n\n\n\n

      Click edit icon (2) to customize information. Each option has its own customizable fields:<\/p>\n\n\n\n

        \n
      • Label: Field title shown to the customer<\/li>\n\n\n\n
      • Placeholder: Example text inside the input field<\/li>\n\n\n\n
      • Error Message (Empty): Message when field is left blank<\/li>\n\n\n\n
      • Error Message (Invalid): Message when input is incorrect (e.g. email format)<\/li>\n<\/ul>\n\n\n\n

        Appearance<\/strong><\/h2>\n\n\n\n

        You can customize:<\/p>\n\n\n\n

          \n
        • Title, Description, and Button Text to fit your store\u2019s tone<\/li>\n\n\n\n
        • Message shown when no results are found.<\/li>\n<\/ul>\n\n\n\n

          You can upload up to 3 assets to display on the page. Each image can have:<\/p>\n\n\n\n

            \n
          • Uploaded file (PNG, JPG, SVG, up to 1.5MB)<\/li>\n\n\n\n
          • Optional destination URL (clickable image)<\/li>\n<\/ul>\n\n\n\n

            \ud83e\udde9 Pro Tips<\/strong><\/h3>\n\n\n\n
              \n
            • Keep it simple: Avoid overwhelming customers with too many required fields.<\/li>\n\n\n\n
            • Match your tone: Use language consistent with your storefront and brand voice.<\/li>\n\n\n\n
            • Preview often: Use the \u201cPreview\u201d toggle to see how the lookup page looks to customers.<\/li>\n<\/ul>\n\n\n\n

              <\/p>\n\n\n\n

              2. Order status page<\/strong><\/h1>\n\n\n\n


              The Order Status Page is what your customers see after they enter their order details. This page should offer a smooth, informative, and branded experience. You can customize everything from shipment progress to product recommendations.<\/p>\n\n\n\n

              Progress bar & Status labels<\/strong><\/h2>\n\n\n\n
              \"\"<\/figure>\n\n\n\n

              Customize your fulfillment journey with clear labels and optional icons.<\/p>\n\n\n\n

              Default Statuses<\/strong><\/h3>\n\n\n\n
                \n
              • Ordered<\/li>\n\n\n\n
              • Order ready<\/li>\n\n\n\n
              • In transit<\/li>\n\n\n\n
              • Out for delivery<\/li>\n\n\n\n
              • Delivered<\/li>\n<\/ul>\n\n\n\n

                Custom Statuses (Optional)<\/strong><\/h3>\n\n\n\n
                  \n
                • Click Add custom status to insert steps like \u201cIn production\u201d or \u201cPackaging\u201d.<\/li>\n\n\n\n
                • Set:\n
                    \n
                  • Status name (e.g., In production)<\/li>\n\n\n\n
                  • Days after ordered to show this status<\/li>\n\n\n\n
                  • Custom icon (choose from a preset emoji set)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                    Other Statuses<\/strong><\/h3>\n\n\n\n

                    Used for edge cases or failed shipments. Use short, friendly names for each status. Avoid jargon like \u201cException\u201d unless it\u2019s necessary:<\/p>\n\n\n\n

                      \n
                    • No Information \u2013 Buyer can check the courier page directly<\/li>\n\n\n\n
                    • Courier not supported<\/li>\n\n\n\n
                    • Expired<\/li>\n\n\n\n
                    • Failed attempt<\/li>\n\n\n\n
                    • Exception<\/li>\n\n\n\n
                    • Pending<\/li>\n<\/ul>\n\n\n\n

                      Tracking history<\/strong><\/h2>\n\n\n\n

                      Title<\/strong>: Change the title of the shipment log (default: \u201cShipment history\u201d)<\/p>\n\n\n\n

                      \"\"<\/figure>\n\n\n\n

                      Order details<\/strong><\/h2>\n\n\n\n
                      \"\"<\/figure>\n\n\n\n

                      Let customers see what\u2019s inside their shipment.<\/p>\n\n\n\n

                        \n
                      • Title: Header above product info<\/li>\n\n\n\n
                      • Product: Edit the product section label<\/li>\n\n\n\n
                      • Total: Customize total price wording<\/li>\n\n\n\n
                      • Singular\/Plural Labels: Personalize the wording for 1 item vs. multiple<\/li>\n<\/ul>\n\n\n\n

                        Tracking information<\/strong><\/h2>\n\n\n\n
                        \"\"<\/figure>\n\n\n\n

                        Edit field labels for shipping and carrier details:<\/p>\n\n\n\n

                          \n
                        • Shipment information<\/li>\n\n\n\n
                        • Shipping address<\/li>\n\n\n\n
                        • Tracking number<\/li>\n\n\n\n
                        • Carrier<\/li>\n<\/ul>\n\n\n\n

                          Images<\/strong><\/h2>\n\n\n\n

                          Upload up to 3 banner images:<\/p>\n\n\n\n

                            \n
                          • Accepted: .svg, .gif, .jpg, .jpeg, .png (max 1.5MB)<\/li>\n\n\n\n
                          • Optional: Add destination URLs to link the image to a page (e.g., New Arrivals)<\/li>\n<\/ul>\n\n\n\n

                            Product Recommendation (Optional)<\/strong><\/h2>\n\n\n\n

                            Show related products to boost reorders.<\/p>\n\n\n\n

                              \n
                            • Title: Headline (e.g., \u201cYou might also like\u201d)<\/li>\n\n\n\n
                            • Type: Choose between:\n
                                \n
                              • All products<\/li>\n\n\n\n
                              • Product types<\/li>\n\n\n\n
                              • Product tags<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                              • Product filters: Select specific types or tags to display<\/li>\n<\/ul>\n\n\n\n

                                Policy & Social Links<\/strong><\/h2>\n\n\n\n

                                Help customers find support and key store policies.<\/p>\n\n\n\n

                                Support & Policies<\/strong><\/h3>\n\n\n\n
                                  \n
                                • Support contact: Label and URL<\/li>\n\n\n\n
                                • Return policy<\/li>\n\n\n\n
                                • Terms & conditions<\/li>\n\n\n\n
                                • Privacy policy<\/li>\n<\/ul>\n\n\n\n

                                  Social Media (Optional)<\/strong><\/h3>\n\n\n\n

                                  Add links to:<\/p>\n\n\n\n

                                    \n
                                  • Facebook<\/li>\n\n\n\n
                                  • Twitter (X)<\/li>\n\n\n\n
                                  • Instagram<\/li>\n\n\n\n
                                  • TikTok<\/li>\n\n\n\n
                                  • Pinterest<\/li>\n<\/ul>\n\n\n\n

                                    <\/p>\n\n\n\n

                                    3. Appearance<\/strong><\/h1>\n\n\n\n

                                    The Appearance tab allows you to customize the look and feel of your tracking pages\u2014both the Order Lookup Page and Order Status Page\u2014so they match your brand and storefront design.<\/p>\n\n\n\n

                                    Theme layou<\/strong>t<\/h2>\n\n\n\n

                                    Choose how your page layout is structured:<\/p>\n\n\n\n

                                      \n
                                    • Classic: Fixed-width layout with traditional alignment. Great for minimalist, clean interfaces.<\/li>\n\n\n\n
                                    • Modern: Full-width layout with more visual emphasis. Great for immersive, image-heavy styling.<\/li>\n<\/ul>\n\n\n\n

                                      Style<\/strong><\/h2>\n\n\n\n

                                      Customize your color palette and text appearance<\/p>\n\n\n\n

                                        \n
                                      • Main color: Primary accent<\/li>\n\n\n\n
                                      • Text color: Main font color<\/li>\n\n\n\n
                                      • Button color: Background color for CTA buttons<\/li>\n\n\n\n
                                      • Button text color: Font color for button labels<\/li>\n\n\n\n
                                      • Button radius: Adjusts how rounded your buttons appear (slider)<\/li>\n<\/ul>\n\n\n\n

                                        Date and time format<\/strong><\/h2>\n\n\n\n

                                        Choose how dates and times appear on tracking logs and shipment status. This is useful for aligning with your store\u2019s regional format (e.g., US vs EU).<\/p>\n\n\n\n

                                          \n
                                        • Date format: e.g., MM\/DD\/YYYY, DD\/MM\/YYYY, etc.<\/li>\n\n\n\n
                                        • Time format: 12-hour or 24-hour display<\/li>\n<\/ul>\n\n\n\n

                                          Header & footer text<\/strong><\/h2>\n\n\n\n

                                          Use this section to add branded headings or notes at the top or bottom of your tracking page. Leave blank if you prefer a clean layout.<\/p>\n\n\n\n

                                            \n
                                          • Header text: Optional tagline, greeting, or store name<\/li>\n\n\n\n
                                          • Footer text: Copyright, links, or a note (e.g., \u201cPowered by Synctrack\u201d)<\/li>\n<\/ul>\n\n\n\n

                                            HTML & CSS (Advanced)<\/strong><\/h2>\n\n\n\n

                                            Customize your tracking page beyond presets. Only recommended if you\u2019re comfortable with HTML\/CSS or working with a developer.<\/p>\n\n\n\n

                                              \n
                                            • HTML (top of page): Embed custom HTML elements before main content<\/li>\n\n\n\n
                                            • HTML (bottom of page): Add scripts, custom footers, or notes<\/li>\n\n\n\n
                                            • Custom CSS: Override styling (colors, fonts, layout tweaks)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

                                              Design a post-purchase experience that reflects your brand and keeps your customers informed. The Tracking Page Editor lets you fully customize how customers look up and track their orders. Overview To edit tracking page, go to Tracking Page > Tracking […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","template":"","knowledgebase_cat":[279],"class_list":["post-2208","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-features"],"acf":[],"_links":{"self":[{"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase\/2208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/comments?post=2208"}],"version-history":[{"count":4,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase\/2208\/revisions"}],"predecessor-version":[{"id":5545,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase\/2208\/revisions\/5545"}],"wp:attachment":[{"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/media?parent=2208"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase_cat?post=2208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}