Rush - Help Center

Appearance

Set Code My Own Theme ​

Overview ​

This article guides developers on customizing the tracking page using HTML, JS, and CSS. Rush allows eCommerce store owners to tailor their tracking page to match brand styles and needs. The page is built with the Tailwind framework, but you can reuse styles from Bootstrap if your store uses it.

Step-by-Step Guide ​

To customize your tracking page using source code, follow these steps:

  1. Select Apps from the navigation sidebar on the left.

  2. From the list of installed apps, select the Rush app.

  3. Select Tracking Page from the left navigation sidebar.

  4. If you already have the Code My Own theme set up, click the Customize button. If not, follow these steps:

    • Go to the Themes section and click the Add button for Code My Own theme.
    • Enter a Page title you like and click the Add page button.
    • Click the Save button to save the changes.

  5. Visit the sandbox environment.

    • Fork the current sandbox and start experimenting with the code to preview your changes. Create a free account to save your changes.
    • Update the value of the data-rush-store-cypher attribute to match your store's identifier.
    • Once satisfied with the changes, copy all the code inside the <div> with the ID rush-tracking-page-settings and paste it in the Tracking Page code section of the DIY template in the Rush app.

Available Templates ​

Rush provides several visually appealing templates. Use these as a starting point or explore all example-*.html templates in the root of the code sandbox:

  • Bold: Features bold design, mono-space fonts, and rebellious colors.
  • Casual: Offers smooth coloring, sans-serif font, and an easy feeling.
  • Classic: Provides dark/white coloring, corner edges, and thin fonts.
  • Lively: Includes playful colors, smooth edges, and an easy feeling.

Additional Information ​

The templates are automatically set based on your app settings. However, Rush allows you to change them in the code sandbox environment to reduce design and test cycles.

In the sandbox environment, the <div> with the ID rush-tracking-page-settings defines the page configuration:

  • data-rush-store-cypher: Rush store identifier. Each store has a unique value. The tracking page data source loads based on this value. If incorrect or blank, the tracking page will not function.
  • data-rush-edit-mode: Used to view the page in edit mode. Set to true to show all sections for easier editing. For production, set this value to false.
  • data-rush-lang: Sets the default language. This value is from the Shopify app's tracking page settings.

Examples ​

Here are examples of customized tracking pages from different brands:

  • Primal Harvest
  • Jane Lushka
  • Benny's Tech Bar

Note: For more details, refer to the Rush DIY Tracking Page video.

Contact Us ​

For help or more information regarding this article, contact us, and we will be happy to assist you.