Getting started with Rush Do-It-Yourself Learn how to utilize the power of TailwindCSS and Rush to best match your brand style. Kaloyan Lyubenov
Rush is offering its customers (e-commerce store owners) a customizable tracking page. The page source code and styles are open for a change to fit any branding guidelines or styles. The page is built using the tailwind framework , but if your store is already using Bootstrap you can easily reuse the styles.
How to use
Fork the current sandbox and start playing with the code. You can create a free account to keep changes stored.
You can find the sandbox HERE.
Update value of attribute
data-rush-store-cypherto be based on your store.
Once you are satisfied with the changes, copy all the code inside DIV with id
rush-tracking-page-settingsand paste it Rush app for the DYI template.
Th-th-th-that's all folks!
Bold design, rebelling colors, monospace fonts.
Smooth coloring, sans-serif font, easy feeling.
Dark/white coloring, corner edges, thin fonts
Playful color, smooth edges, easy feeling
Note that we automatically set those variables for your store based on your app settings. However, we give you the ability to change it inside codesandbox env, to ease the designing and testing.
On top of the page in the sandbox environment, we have a div with id
rush-tracking-page-settings that define the page's configuration. It defines 3 properties.
data-rush-store-cyphert is a Rush store identifier. Each store has a different value. The tracking page data source is loaded according to this value, and if it is blank or incorrect, the tracking page will stop working.
data-rush-edit-modeThis option is used to view the page in edit mode. If marked as true, it shows all the sections of the page for easier template editing. For production use, always mark this value as false.
data-rush-langThis value is used to set the default language. This value is from the Shopify app, inside tracking page settings, localization.