How to Create and Manage Tours

This is your control center for all tours.

• View All Tours: See a table listing every tour you’ve created.

• Create Tour: Click the Create Tour button to start a new tour. You’ll be redirected to your storefront with the Tour Editor popup.

The Tour Editor is where you build and configure your tours. It appears as a draggable popup on your storefront.

• Drag to Move: Hover over the top bar (➊), click and hold, then drag wherever you like.




• Full-Screen Mode: Click the expand icon (➓) to make the editor full width and height—ideal for detailed editing.

• Resize Handles: Use any corner or side handle to adjust width and height.

• Minimize/Restore: Click the “×” to close the editor. You can reopen it any time by clicking the Open Tour Editor button that appears on your page.

1. Name Your Tour
   Enter a display name at the top—this helps you identify it on the Dashboard.




2. Default Step
   A starter step is added automatically. Each step includes:

   • Title (➎)

   • Description (➏)

3. Select Target Element
   Click Select Target (➐) to enter element-selection mode. Hover over any page element to highlight it in red, then click to choose it.

4. Preview Highlight
   Use Preview (➑) to see how your selected element will appear when highlighted.

5. Positioning the Popup
   Choose where the step’s popup appears relative to the element (top, left, bottom, right). You can set separate positions for desktop and mobile and define the mobile breakpoint. (11)

6. Add or Remove Steps

   • Add Step: Click Add Step (➌).

   • Delete Step: Click the “×” on the step header (➒).

Under the Theme tab, adjust colors to match your brand:

• Click any color swatch to pick a new color.

• Use preset palettes at the bottom for quick styling.

Define when and how your tour starts:

• URL Match (default): The tour runs only on the exact URL you set.

• Template Match: Select a Shopify template (e.g., product, collection, index) to run the tour across all pages using that template, regardless of URL.

• Page Load: Tour begins automatically when the page loads.

• Element Visible: Starts when the chosen element scrolls into view.

• Element Hover: Starts when the user hovers over the chosen element.

• Start Button: Adds a floating button; the tour starts when clicked.

Tip: For “Element Visible” and “Element Hover,” you’ll see an extra field to select the trigger element—just like selecting a step target.

Back in the Tours Dashboard, each row offers:

• Preview: Opens a quick preview of your tour (triggers won’t fire here).

• Edit: Reopens the Tour Editor for updates.

• Delete: Removes the tour.

If you’d rather place your own button anywhere in your theme, add this attribute to any element:

Replace YOUR_TOUR_ID (copy it via the clipboard icon in the Dashboard) to link your custom button to the tour.