2017 CoreCommerce Design Guide -- How to use Design Tokens

*You can download a PDF version of our customization guide from the link at the bottom of the page.
You can edit the template files via FTP or in your CoreCommerce admin area under Design > Advanced Options > Edit HTML/CSS. Inside of each theme you will find four files:

 

  • header.html
  • footer.html
  • secure.header.html
  • secure.footer.html

These files contain HTML code and tokens. For example, instead of 6 lines of php code to display your logo, you just include ##LOGO##. Simple as that.  We have created tokens for every include, plus a couple extra ones; the IF statement and the ELSE statement.

 

What are the header and footer tokens I can use?

The following list contains all of the tokens you can use when editing your header and footer. Please note that at this time these tokens can ONLY be used in the header and footer files—they will not work in the product detail template or any WYSIWYG editors.

tags (REQUIRED)

  1. ##HEAD_V3## - Contains all the information between the head html tags. Designed for responsive themes. This is the only "required" token that goes in your header and secure header files.  Technically you can ommit it, but your store won't look or work right.  This token includes all the meta data, CSS and JavaScript necessary for your store to function properly.  Sample usage: ##HEAD_V3##  You can put any other markup inside the tag and it shouldn't mess anything up.  Just remember to put the ##HEAD_V3## in the (REQUIRED)
    • ##HEAD_V2## is an older model of this token that has been superseeded by a newer version as of the November 2013 release. This version can still be used for older style, non responsive themes.
    • ##HEAD## is an older model of this token that has been superseeded by a newer version as of the March 2013 release.
  2. ##CONTENT_CONTAINER_CLASS## - Automatically prints the required class(es) that needs to go on the HTML container surrounding the shopping cart content. This container will usually have the id of container. This token is required in your header and secure header files as of the March 2013 release for the hero image and nivo slider to work properly. Sample markup:
     (REQUIRED)
  3. ##MERCHANT_URL## - Prints a URL to the front end portion of the cart.
  4. ##SECURE_URL## - Prints a link to the secure "checkout" portion of the cart.
  5. ##LOGO_V3## - Displays your store logo
    • ##LOGO_V2## is an older model of this token that has been superseeded by a newer version as of a mid December 2013 hotfix.
    • ##LOGO## is an older model of this token that has been superseeded by a newer version as of the November 2013 release.
  6. ##MENU_BAR_V2## - Displays the top menu nav. bar widget
    • ##MENU_BAR## is an older model of this token that has been superseeded by a newer version as of the March 2013 release.
  7. ##FOOTER_CONTENT## - Displays the footer content which includes the horizontal image widget (REQUIRED)
  8. ##ANALYTICS## - Displays the google analytics code (if available)
  9. ##CATEGORIES## - Displays the categories widget
  10. ##CURRENCY## - Displays the currency widget
  11. ##FEATURED## - Displays the featured widget
  12. ##FOOTER_LINKS## - Displays the footer links
  13. ##INFORMATION## - Displays the information widget
  14. ##LANGUAGES## - Displays the language widget
  15. ##NEW_ARRIVALS## - Displays the new arrivals widget
  16. ##REWARD_POINTS## - Displays the reward points widget
  17. ##SEARCH## - Displays the search widget
  18. ##HEADER_SEARCH## - Displays the search in the header template
  19. ##SIDEBAR_SHOPPING_CART## - Displays the sidebar shopping cart widget with the number of items and cost
  20. ##SIDEBAR_SHOP_CART_DETAILED## - Displays the sidebar shopping cart widget with the item list
  21. ##SPECIALS## - Displays the on sale widget
  22. ##NEWSLETTER## - Displays the newsletter widget
  23. ##TOP_SELLERS## - Displays the top sellers widget
  24. ##VENDORS## - Displays the vendors widget
  25. ##LEFT_IMAGE_WIDGET## - Displays the left image widget
  26. ##RIGHT_IMAGE_WIDGET## - Displays the right image widget
  27. ##HORIZONTAL_IMAGE## - Displays the horizontal image widget.
  28. ##CUSTOM_IMAGE_WIDGET_X## - Displays a custom image widget. Replace the X with the widget ID, which is displayed in the URL when you're editing the widget in the admin. (More info)
  29. ##SHOP_BY_PRICE## - Displays the shop by price widget
  30. ##RECENTLY_VIEWED## - Displays the recently viewed widget
  31. ##PRODUCT_DETAIL_IMAGE_WIDGET## - Displays the product detail image widget
  32. ##RELATED_PRODUCTS## - Displays the related products widget
  33. ##POLLS## - Displays the polls widget
  34. ##DEAL_OF_THE_DAY## - Displays the deal of the day widget
  35. ##LOGIN## - Displays the login widget
  36. ##LEFT_WIDGETS_V2## - Displays all of the left widgets setup in the admin for the current design
    • ##LEFT_WIDGETS## is an older model of this token that has been superseeded by a newer version as of the March 2013 release.
  37. ##RIGHT_WIDGETS_V2## - Displays all of the right widgets setup in the admin for the current design
    • ##RIGHT_WIDGETS## is an older model of this token that has been superseeded by a newer version as of the March 2013 release.
  38. ##NUMBER_OF_ITEMS_IN_CART## - Displays the number of items the customer currenly has in their cart.
  39. ##YEAR## - Displays the current four digit year.  Commonly used to construct a dynamic copyright message that updates from year to year.  I.e. Copyright © ##YEAR## My Company, All Rights Reserved.
  40. ##CONTENT_MODULE_X## - With this token you can add content to your design that can be edited in the admin.  Once you create a content module in the admin, you can dynamically pull its content into your design by adding this token to one of your templates and replacing the X with the module's ID.  E.g. ##CONTENT_MODULE_36##  After that when you change the content in the admin, it will automatically update in your design. (More info)
  41. ##CUSTOMER_LOGIN_LOGOUT_LINK## - Will display a "Login" link if the customer currently visiting your site is not logged in.  If they are, the link will change to "Logout".  This is essentially a very stripped down version of the login widget.
  42. ##LANG_TITLE_MY_ACCOUNT## - Will display "My Account" or the translation of "My Account" if you're using multiple languages. This will typically be used as one of the links in your header.
  43. ##LANG_TITLE_VIEW_CART## - Will display "View Cart" or the translation of "View Cart" if you're using multiple languages. This will typically be used as one of the links in your header.
  44. ##LANG_TITLE_CHECKOUT## - Will display "Checkout" or the translation of "Checkout" if you're using multiple languages. This will typically be used as one of the links in your header.
  45. ##BLOG_TAGS## - The blog tags widget.
  46. ##BLOG_ARCHIVES## - The blog archives widget.
  47. ##BLOG_CATEGORIES## - The blog categories widget.
  48. ##BLOG_RECENT_POSTS## - The blog recent posts widget.
  49. ##BODY_CLASSES## - Displays classes generated by our software that should be applied to the HTML body tag. Sample markup: 
  50. ##CUSTOMER_LOGIN_URL## - Displays a URL that points to the customer login page. Sample markup: Login
  51. ##CUSTOMER_ACCOUNT_URL## - Displays a URL that points to the customer account page. If a user visits this page when they're not logged in, they'll be redirected to the login page. Sample markup: My Account
  52. ##CREATE_CUSTOMER_ACCOUNT_URL## - Displays a URL that points to the create customer account page. Sample markup: Create an Account
  53. ##CUSTOMER_ORDER_HISTORY_URL## - Displays a URL that points to the customer order history page. If a user visits this page when they're not logged in, they'll be redirected to the login page. Sample markup: View Past Orders
  54. ##CUSTOMER_WISHLIST_URL## - Displays a URL to the customer wishlist summary page. If a user visits this page when they're not logged in, they'll be redirected to the login page. If a user visits this page and you don't have the wishlist feature enabled, they'll be redirected to your homepage. Sample markup: View My Wishlist
  55. ##CUSTOMER_LOGOUT_URL## - Displays a URL to the customer logout page. After the customer is logged out, they'll be redirected to the login page. Sample markup: Logout
  56. ##VIEW_CART_URL## - Displays a URL to the view cart page. Sample markup: View Cart

The If Statement

We also added the ability for you to use IF statements with tokens. 

These tokens will allow you to display only certain content based on the IF statement used.  For example, if you wanted an html message to display only when your about us page appears, then do the following:

##IF_CONTENT_PAGE_4##

My Bold Statement

##END_IF##

In the above example, the number 4 is the page content ID (you get that by viewing the URL in the admin and look for the pcID in the URL).  This means the phrase My Bold Statement will only appear when viewing content page 4, which is the About Us page.  Also make sure you end it with ##END_IF##, otherwise this won't work.

You can use this format for all of the IF tokens above.  The X represents where you would put an ID number.  If a token above doesn't contain an X, then it doesn't need any ID number.

You can also call any language string by using the syntax ##LANG_LANGID##.  So for example, ##LANG_BTN_ADD#.  This would display the word "Add to Cart" from our language library.

Please note if you make any changes to the templates via FTP, you must click the "PUBLISH ALL" button under the design tab to make that change effective.

 

Here are the IF tokens you can use:

IF_CATEGORY_LIST_X - Supports multiple IDs.  Works without an ID.  Checks if the customer is currently on a page that displays contents of a category.  Note that this page can display either more categories (i.e. subcategories) or products.  Sample usage:

  • ##IF_CATEGORY_LIST_4## ##END_IF## - A single ID is specified. The markup between the if and the end_if will only show up if the customer is viewing contents of the category ID 4
  • ##IF_CATEGORY_LIST## ##END_IF## - No ID is specified.  The markup between the if and the end_if will only show up if the customer is viewing contents of any category
  • ##IF_CATEGORY_LIST_4_5_12_185## ##END_IF## - Multiple IDs separated by underscores are specified.  The markup between the if and the end_if will only show up if the customer is viewing contents of category ID 4, 5, 12 or 185

 

IF_PRODUCT_X - Supports multiple IDs.  Works without an ID.  Checks if the customer is currently looking at a product (i.e. viewing the product detail template). Sample usage:

  • ##IF_PRODUCT_6## ##END_IF## - A single ID is specified. The markup between the if and the end_if will only show up if the customer is viewing product ID 6
  • ##IF_PRODUCT## ##END_IF## - No ID is specified.  The markup between the if and the end_if will only show up if the customer is viewing any product
  • ##IF_PRODUCT_17_6_30_1007## ##END_IF## - Multiple IDs separated by underscores are specified.  The markup between the if and the end_if will only show up if the customer is viewing product ID 17, 6, 30 or 1007

 

IF_VIEW_CART - Does not use IDs.  Checks if the customer is currently looking at the view cart page.  Sample usage:

  • ##IF_VIEW_CART## ##END_IF## - The markup between the if and the end_if will only show up if the customer is viewing the view cart page

 

IF_VENDOR_LIST_X - Supports multiple IDs.  Works without an ID.  Checks if the customer is currently looking at a list of products belonging to a specific vendor. Sample usage:

  • ##IF_VENDOR_LIST_68## ##END_IF## - A single ID is specified. The markup between the if and the end_if will only show up if the customer is looking at a list of products belonging to vendor ID 68
  • ##IF_VENDOR_LIST## ##END_IF## - No ID is specified.  The markup between the if and the end_if will only show up if the customer is viewing any vendor's list of products
  • ##IF_PRODUCT_18_4_12## ##END_IF## - Multiple IDs separated by underscores are specified.  The markup between the if and the end_if will only show up if the customer is looking at a list of products belonging to vendor ID 18, 4 or 12

 

IF_CONTENT_PAGE_X- Supports multiple IDs.  Works without an ID.  Checks if the customer is currently looking at a content page. Sample usage:

  • ##IF_CONTENT_PAGE_4## ##END_IF## - A single ID is specified. The markup between the if and the end_if will only show up if the customer is looking at the content page ID 4
  • ##IF_CONTENT_PAGE## ##END_IF## - No ID is specified.  The markup between the if and the end_if will show up if the customer is looking at any content page
  • ##IF_CONTENT_PAGE_29_15_36## ##END_IF## - Multiple IDs separated by underscores are specified.  The markup between the if and the end_if will only show up if the customer is viewing content page ID 29, 15 or 36

 

IF_CUSTOMER_GROUP_X - Supports multiple IDs.  Does NOT work without an ID.  Checks if the currently logged in customer belongs to one of the specified customer groups. This token will/has become available as of the 2nd Q 2013 release. Sample usage:

  • ##IF_CUSTOMER_GROUP_4## ##END_IF## - A single ID is specified. The markup between the if and the end_if will only show up if the current customer belongs to customer group ID 4
  • ##IF_CUSTOMER_GROUP_29_15_36## ##END_IF## - Multiple IDs separated by underscores are specified.  The markup between the if and the end_if will only show up if the current customer belongs to customer group ID 29, 15 or 36

IF_ONE_PAGE_CHECKOUT - Does not use IDs.  Checks if the customer is currently on the one page checkout screen.  Sample usage:

  • ##IF_ONE_PAGE_CHECKOUT## ##END_IF## - The markup between the if and the end_if will only show up if the customer is viewing the one page checkout template

 

IF_HOMEPAGE - Does not use IDs.  Checks if the customer is currently on the homepage.  Sample usage:

  • ##IF_HOMEPAGE## ##END_IF## - The markup between the if and the end_if will only show up if the customer is on the homepage

 

IF_NEW_ARRIVALS - Does not use IDs.  Checks if the customer is currently on the new arrivals page.  This page displays a list of "new arrival" (aka recently added) products.  Sample usage:

  • ##IF_NEW_ARRIVALS## ##END_IF## - The markup between the if and the end_if will only show up if the customer is looking at the list of newly arrived products.

 

IF_LANG_X- Checks if the customer is currently using a specific language. The default English languages has the ID of 1. Sample usage:

  • ##IF_LANG_4## ##END_IF## - A single ID is specified. The markup between the if and the end_if will only show up if the customer is using the language with the ID of 4


IF_BROWSER_FIREFOX - Checks if the browser the customer is using is Firefox.
IF_BROWSER_IEXPLORER - Checks if the browser the customer is using is Internet Explorer.
IF_BROWSER_CHROME - Checks if the browser the customer is using is Chrome.
IF_BROWSER_MOBILE - Checks if the customer is using a mobile browser.

IF_BLOG_POST - Does not use IDs.  Checks if the customer is currently on the blog post detail page.

  • ##IF_BLOG_POST## ##END_IF## - The markup between the if and the end_if will only show up if the customer is looking at the details of a blog post.

IF_BLOG_POST_LIST - Does not use IDs.  Checks if the customer is currently on the blog post list page.

  • ##IF_BLOG_POST_LIST## ##END_IF## - The markup between the if and the end_if will only show up if the customer is looking at a list of blog posts.

IF_CUSTOMER_IS_LOGGED_IN - Does not use IDs. Checks if the customer is currently logged in

  • ##IF_CUSTOMER_IS_LOGGED_IN## ##END_IF## - The markup between the if and the end_if will only show up if the customer is currently logged in.

The ELSE Statement

You can make your if statements even more powerful by adding an else clause to them.  This may seem complicated at first, but give it some time and you'll be writing these left and right.  Just remember that every ##IF_...## has to have a corresponding ##END_IF## and can optionally have one ##ELSE##  So remember that ##ELSE## statements are completely optional.

We use if/else logic in real life all the time.  For example if you walk into a room at night and the lights are off, turn them on else (i.e. otherwise) continue with your business.  Using the same logic you can use any ##IF_...## token to display some content in a certain scenario and display different content otherwise.

For example you could use the following code to display a different header from the rest of your store just on your homepage.  You may want to do this if your homepage has links to different sections of your site such as the store, blog and photo gallery.  Since your homepage will become a central hub for your visitors, you don't want it to say "Welcome to my store" because the visitor still hasn't decided which part of your entire site they want to see.

##IF_HOMEPAGE##

 

Welcome to my site

 

##ELSE##

 

Welcome to my store

 

##END_IF##

So you can use an ##IF_...## statement to display some content in a specific scenario and then add an ##ELSE## statement to display some other content in all other cases.

If you want to get really fancy, you can nest if/else statements for most powerful logic yet.  Nesting is unlimited (that is you can have as many if blocks inside other if blocks as your heart desires).  Here's a nesting example that's three levels deep:

##IF_HOMEPAGE##

 

Welcome to my site

 

##ELSE##

    ##IF_VIEW_CART##

   

   

   

View my cart

 

    ##ELSE##

   

        ##IF_NEW_ARRIVALS##

       

       

       

These products have just arrived

 

       ##ELSE##

       

       

Welcome to my store

 

       ##END_IF##

    ##END_IF##

##END_IF##

 

Combining the IF statements

To get the most out of IF statements, combine them to create complex content displaying logic.  You can combine any and all IF statements by simply including _OR_ between each one.  Remember that only the opening statement needs the IF_ prefix, you can still use the ELSE statement and you only need one ##END_IF## token regardless of how many IF statements you combined into one.

The following example can be used to display content if you're on the homepage or on the view cart template:

##IF_HOMEPAGE_OR_VIEW_CART## ##END_IF## - Note that I combined two separate IF tokens (##IF_HOMEPAGE## and ##IF_VIEW_CART##) into one.  Only the first one (##IF_HOMEPAGE##) kept the IF_ prefix and only one ##END_IF## statement is needed.

Here are some more examples:

  • ##IF_CATEGORY_LIST_10_12_OR_PRODUCT_20_21_OR_CONTENT_PAGE## ##ELSE## ##END_IF## - this can be used to display specific content when the visitor is looking at contents of category ID 10 or 12, detail page of product ID 20 or 21 or at any content page.  The ELSE statement is used to display different content in all other cases
  • ##IF_VIEW_CART_OR_PRODUCT_4_OR_CONTENT_PAGE## ##ELSE## ##IF_PRODUCT_6####ELSE## ##END_IF## ##END_IF## - this can be used to display specific content when the visitor is looking at  the view cart page, detail page of product ID 4 or at any content page.  The ELSE statement contains a nested IF token that displays some other content if the user is looking at the detail page of product ID 6 and finally uses its own ELSE to display some completely different content in all other cases