Setup Guide: Shopify Native Tracking Page
Overview
Loop knows merchants and their teams are constantly choosing between maximum customization and ease of use. We don't want you to have to make that choice for your tracking pages.
The Shopify native tracking page combines the flexibility of your Shopify theme editor with the power of Loop tracking through the Wonderment app block. For merchants using themes that enable sections, you can use any of them on your tracking page to build an experience that matches the rest of your shop.
If your theme doesn't use sections, Loop provides a few out-of-the-box Shopify theme sections to help get your page launched. Even if your theme has sections, these are available for you to use.
Getting started is easy. On installation, Loop creates a tracking page for you. Go to the Shopify theme editor through the link in your Loop admin, or open the tracking template inside the editor from the Shopify admin.
You also have full control over the look and feel of your tracking block. Replace the Starter Tracking Block with the Wonderment app block and customize it in the Tracking Block Editor, hosted in your Loop admin.
Installation
The moment you install, you have a tracking page automatically set up on your shop. Loop creates a page to host it and adds the required theme files so it has the content it needs and a template of its own that can be customized.
Loop tracking can be installed from the Shopify app store. After installation, all that's required from you is completing some design and content choices, such as which hero image to use, your FAQ questions, and which products you'd like to promote to returning customers. You're also encouraged to explore the sections that came with your theme.
Loop Admin / Storefront Tracking
Once installation and account creation are complete, you'll be redirected to the Loop admin. In the nav, find 'Storefront Tracking'. This is where everything related to creating a tracking page lives.
Here you can create and design your tracking block, manage Loop-provided theme files, and even manage some Shopify settings such as the URL of your tracking page. It also makes it easy to navigate between the Loop admin and the Shopify theme editor, where your tracking page is ultimately designed and set up.
When you arrive, you should see a green checkmark alongside your tracking page URL in the top right corner. This indicates everything is set up properly. At this point you can 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 is to click the link in your Loop 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.
Here you'll see how your tracking page currently looks. You can enable and configure the default sections provided by Loop, as well as use any sections your theme makes available.
Once you're happy with the look and feel of your tracking page, replace the 'Starter Tracking Block' with the Wonderment app block. Select the 'Starter Tracking Block' and click 'remove block' at the bottom of the block's settings. Then, within the same section, select 'Add block' and choose 'Wonderment'.
This unlocks the ability to customize your tracking block in the Loop admin. The Starter Block gets you started quickly, but because it's a theme file and not the app block, it can't be customized easily.
Tracking Block
The Loop tracking block is a flexible, highly customizable storefront asset. To give you the most control, we moved settings out of the theme editor and into an editor experience dedicated to the app block inside the Loop admin. As a result, it's easy to build the exact tracking block your brand and ideal experience demand.
For 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 added to storefronts automatically by partners. To account for this, Loop built a theme file that replicates the functionality of the app block without the ability to be customized. This ensures you can get live fast and tap into the design potential of the app block when you're ready.
To unlock this, find the 'Wonderment Hub' section in the Shopify theme editor and remove the 'Starter Tracking Block' by selecting it and clicking 'remove block' at the bottom of the screen.
In the same section, click 'add block' and select '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 your customizations. After publishing your edits, the tracking block on your tracking page will reflect your work.
