Support

Using 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 using two methods

• Accessing your store's server directly with FTP (File Transfer Protocol)
• In your admin area under Design→ Advanced Options → Edit HTML/CSS. 
  • For https:// everywhere sites you will see two files.
    
    • header.html
    • footer.html
  • For NON https:// everywhere (http://)sites you will see 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 the token ##LOGO##

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)

• ##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 will not look or work correctly  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.
• ##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)
• ##MERCHANT_URL##
  • Prints a URL to the front end portion of the cart.
• ##SECURE_URL##
  • Prints a link to the secure "checkout" portion of the cart.
• ##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.
• ##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.
• ##FOOTER_CONTENT##
  • Displays the footer content which includes the horizontal image widget (REQUIRED)
• ##ANALYTICS##
  • Displays the google analytics code (if available)
• ##CATEGORIES##
  • Displays the categories widget
• ##CURRENCY##
  • Displays the currency widget
• ##FEATURED##
  • Displays the featured widget
• ##FOOTER_LINKS##
  • Displays the footer links
• ##INFORMATION##
  • Displays the information widget
• ##LANGUAGES##
  • Displays the language widget
• ##NEW_ARRIVALS##
  • Displays the new arrivals widget
• ##REWARD_POINTS##
  • Displays the reward points widget
• ##SEARCH##
  • Displays the search widget
• ##HEADER_SEARCH##
  • Displays the search in the header template
• ##SIDEBAR_SHOPPING_CART##
  • Displays the sidebar shopping cart widget with the number of items and cost
• ##SIDEBAR_SHOP_CART_DETAILED##
  • Displays the sidebar shopping cart widget with the item list
• ##SPECIALS##
  • Displays the on sale widget
• ##NEWSLETTER##
  • Displays the newsletter widget
• ##TOP_SELLERS##
  • Displays the top sellers widget
• ##VENDORS##
  • Displays the vendors widget
• ##LEFT_IMAGE_WIDGET##
  • Displays the left image widget
• ##RIGHT_IMAGE_WIDGET##
  • Displays the right image widget
• ##HORIZONTAL_IMAGE##
  • Displays the horizontal image widget.
• ##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.
• ##SHOP_BY_PRICE##
  • Displays the shop by price widget
• ##RECENTLY_VIEWED##
  • Displays the recently viewed widget
• ##PRODUCT_DETAIL_IMAGE_WIDGET##
  • Displays the product detail image widget
• ##RELATED_PRODUCTS##
  • Displays the related products widget
• ##POLLS##
  • Displays the polls widget
• ##DEAL_OF_THE_DAY##
  • Displays the deal of the day widget
• ##LOGIN##
  • Displays the login widget
• ##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.
• ##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.
• ##NUMBER_OF_ITEMS_IN_CART
  • Displays the number of items the customer currenly has in their cart.
• ##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.
• ##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.
• ##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.
• ##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.
• ##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.
• ##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.
• ##BLOG_TAGS##
  • The blog tags widget.
• ##BLOG_ARCHIVES##
  • The blog archives widget.
• ##BLOG_CATEGORIES##
  • The blog categories widget.
• ##BLOG_RECENT_POSTS##
  • The blog recent posts widget.
• ##BODY_CLASSES##
  • Displays classes generated by our software that should be applied to the HTML body tag. Sample markup: 
• ##CUSTOMER_LOGIN_URL##
  • Displays a URL that points to the customer login page. Sample markup: Login
• ##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
• ##CREATE_CUSTOMER_ACCOUNT_URL##
  • Displays a URL that points to the create customer account page. Sample markup: Create an Account
• ##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
• ##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
• ##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
• ##VIEW_CART_URL##
  • Displays a URL to the view cart page. Sample markup: View Cart

The If Statement

We have 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:

• Insert these two tokens into your header.html or footer.html files.
  
  ##IF_CONTENT_PAGE_4##
Your Code Here
##END_IF##

• In the above example, the number 4 is the page content ID (pcID)
  • To get your pcID in the URL
    
    • Go to Site Content→ Pages→ Click on a page name.
      
    • In your browsers URL section you should see something like
      • https://ccsupport.corecommerce.com/admin/tools.php?m=edit_page_content&pcID=4
• 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 will not work!
  
• You can use this format for all of the IF tokens above.  The 4 represents where you would put an ID number.  If a token above doesn't contain a 4 (pcID), 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.

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.

Available 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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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 (cID) 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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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.
  • ##IF_HOMEPAGE## Your Code Here ##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.
    • ##IF_NEW_ARRIVALS## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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## Your Code Here ##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##
Your code here- runs only on homepage.
##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##
Your code here- runs only on homepage.
  ##ELSE##
    ##IF_VIEW_CART##
Your code here- runs only on the view cart page.
  ##ELSE##
    ##IF_NEW_ARRIVALS##
Your code here- runs only on new arrivals page.
  ##ELSE##
Your code here- runs on any page aside from the homepage, view cart, and new arrivals pages.
##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## Your code here ##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.

• ##IF_CATEGORY_LIST_10_12_OR_PRODUCT_20_21_OR_CONTENT_PAGE## Your code here ##ELSE## Your code here ##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## Your code here ##ELSE## Your code here ##IF_PRODUCT_6## Your code here ##ELSE## Your code here ##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