Read Me

Building with this template, from start to finish

This README file will take you through the process of using this template for a new site step by step.

First, let's head to the GENERAL tab

This area is where you add the general information for your new website. The most used areas are shown with red arrows.


  1. Enter a name for your new project
  2. Toggle the site status to ON (green)

    3. - This is also where you can click to navigate to your new site

  3. Now you can choose custom domain or subdomain

    4. - The Subdomain selection, will create a generated url to test your new site.

    - If you have a url that is pointed with DNS, you can choose the Custom selection, and navigate to your live site.

  4. Choose your title tag (usually the brand name of your site)
  5. Once you're done with your changes, remember to click SAVE & PUBLISH to not lose your work!

Next, lets head over to the TOKENS tab

The tokens tab will help you update all of the valuable information throughout the site. Enter your information here and the site will automatically place these values in the appropriate places.


  1. Enter all of your corp information into each appropriate line in the VALUE column of the tokens section.
  2. This section also has a 'campaign-id' that will help the site know which campaign of price points and products to pull from.
  3. Once you're done with your changes, remember to click SAVE & PUBLISH to not lose your work!

Dynamic Tokens

This section of the tokens tab is where all of your customizations are located. These tokens are targeted throughout the site, giving you an easy way to add color, images, products and terms in seconds.

  1. sf-global-products allows you to enter in the slug products that will appear on the site in the order they are placed.
  2. mainColor will change the most consistant site color.

    3. - This effects buttons, main text, main links, and some banner colors

  3. altColor will change the second consistant color of the site.

    4. - This effects button hovers, some sub text, and different navbar elements

  4. accentLight will change the third consistant color of the site.

    5. - This effects some hovers and text, as well as some footer elements if applied

  5. accentDark will change the fourth consistant color of the site.

    6. - Main changes with this color are scroll up buttons, footer backgrounds, and some product buttons and navigation colors

  6. headerLogo will change the main nav logo depending on the url you place. Make sure to change the project ID to the current project!
  7. footerLogo will change the secondary footer logo depending on the url you place. Make sure to change the project ID to the current project!
  8. heroImage will change the index page hero image.
  9. subImage/aside/banner will change the secondary index image(s).
  10. fdaSection will add an FDA Section to the footer when the value is set to 'true' and remove it when the value is 'false'.
  11. ingredientsPage will add a link to the ingredients page in the footer when the value is set to 'true' and remove it when the value is 'false'.
  12. coaPage will add a link to the coa page in the footer when the value is set to 'true' and remove it when the value is 'false'.
  13. digitalProducts will add digital product verbiage to the site when the value is set to 'true' and remove it when the value is 'false'.
  14. subscriptionProducts will add subscription verbiage to the site when the value is set to 'true' and remove it when the value is 'false'.
  15. Once you're done with your changes, remember to click SAVE & PUBLISH to not lose your work!

DESIGN - CHECKOUT


  1. Click on the 'Pages' tab on the left sidebar and navigate to 'checkout'.
  2. Here you will find the page to enter all of your plugin information as the final step to customizing your site.

DESIGN - FORM


  1. Once you're in the 'checkout' page, navigate to the top-right icon bar and click the TARGET ICON. This icon will highlight your checkout form element.
  2. Once you've highlighted the checkout form, click the GEAR icon in the right-hand side bar.
  3. This icon will bring up your 'Component Settings' to add all of the information needed to add your plug-in and complete your checkout form.
  4. Choose your Plugin, Plugin Name and Type, as well as where the form will navigate too after submitting.
  5. Once you have entered in the correct information for your plugin, that's it!
  6. Once you're done with your changes, remember to click SAVE & PUBLISH to not lose your work!
ReadMe file created by and for Subscribe Funnels