Setup Guide: Shopify Native Tracking Page
Overview
Wonderment knows merchants and their teams are constantly choosing between maximum customization ease of use. Such is the life of unlimited ideas and very little time. We don’t want you to feel like you have to make that choice when it comes to Wonderment powered tracking pages.
The Shopify native tracking page combines all the flexibility of your Shopify theme editor with the power of Wonderment tracking through our Wonderment App Block. For merchants using themes that enable sections, this means you can use any of them on your tracking page to build experience that perfectly match the rest of your shop.
If your theme doesn’t leverage sections, we have you covered. Wonderment provides sections known as Wondersections for you to get your page launched. Even if you have a theme with sections, Wondersections are available for you to use.
Getting started couldn’t be easier. On installation, Wonderment creates a tracking page for you. Simply go to the Shopify theme editor through the link provided in your Wonderment Admin or access the tracking template inside the editor if want to go there through the Shopify Admin.
You also have total control over the look and feel of your tracking block. All you have to do is replace the Starter Tracking Block with the Wonder Block app block and customize it in the Tracking Block Editor, hosted in your Wonderment Admin.
Installation
The moment you install Wonderment you have a tracking page automatically set up on your shop. This is achieved by Wonderment creating a page to host it and adding the required theme files to ensure it has the content it needs and a template of its own that can be customized.
Wonderment can be installed from the Shopify app store. After installation, all that is required from you is completing some design and content choices such as what hero image to use, your FAQ questions, and what products you’d like to promote to returning customers. You’re also encouraged to explore available sections that came with your theme.
Wonderment Admin / Storefront Tracking
Once installation and account creation is complete, you’ll be redirected to the Wonderment admin. Here you can find a link in the nav called ‘Storefront Tracking’. This is where all things related to Wonderments role in creating a tracking page live.
Here you can create and design your tracking block, manage Wonderment provided theme files and even manage some Shopify settings such as the url of your tracking page. It’s also makes it easy to navigate between the Wonderment admin and the Shopify theme editor, where your tracking page is ultimately designed and setup.
When you arrive here, you should notice the green checkmark alongside of your tracking page URL in the top right corner. This indicates that everything is set up properly. At this point you’re able to both view the tracking page and edit it in the theme editor. If instead there’s a yellow alert, you can troubleshoot it to get it right.
Page Design
Navigate to the Shopify theme editor. The easiest way to access this is to click the link in your Wonderment admin. It will take you to the exact template you want to edit. If accessing through Shopify, look for the template under pages in the dropdown of the editor’s top navigation bar.
Once here, you’ll be able to see how your tracking page currently looks. The default sections are provided by Wonderment and are called Wondersections. You’re able to enable and configure these sections, as well as use any sections your theme may have available to you.
Once you’re happy with the look and feel of your tracking page. Replace the ‘Starter Tracking Block’ with the Wonderment App block. This is done by first selecting the ‘Starter Tracking Block’ and hitting the ‘remove block’ button that appear at the bottom if the block’s settings.
Then, within the same section, select ‘Add block’ and select the Wonderment App Block.
This unlocks the ability to customize your tracking block in the Wonderment admin.The Starter block is effective to get started quickly, but since it’s a theme file and not the app block, it’s unable to be customized easily.
Tracking Block
The Wonderment Tracking Block is a super flexible, highly customizable storefront asset. In order to provide you with the most control, we removed settings from the theme editor itself in favour of building an editor experience entirely dedicated to the app block inside of the Wonderment admin. As a result it's easy to build the exact tracking block your brand and ideal experience demands.
To enable customizations in the Tracking Block Editor to reflect on the tracking block, the Starter Tracking Block must be replaced with the Wonderment App Block.
Shopify does not allow apps to be automatically added to storefronts by partners. To account for this, Wonderment has build a theme file to replicate the functionality of the app block, without the ability to be customized. This is to ensure you can get up fast, and easily tap in to the design potential of the Wonderment App Block when you’re ready.
To unlock this, find the section ‘📦 Wonderment Hub’ in the Shopify Theme Editor, and remove the block ‘Starter Tracking Block’ by selecting it and then clicking ‘remove block’ at the bottom of the screen.
In the same section, click ‘add block’ and select the ‘Wonderment’ from the apps section of the list, after the theme files.
Once the app block is added, go to the Tracking Block Editor and make customizations. After publishing your edits, the tracking block on your tracking page will reflect your work.