Setup Guide: Shopify Native Tracking Page
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.