You can edit the template files via FTP (You can also edit these files in the CoreCommerce admin area under Design > Manage Design > Global > 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:
tags (REQUIRED)
##HEAD## - Contains all the information between the head html tags. 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>##HEAD##</head> You can put any other markup inside the <head> tag and it shouldn't mess anything up. Just remember to put the ##HEAD## in the <head> (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## - Displays your store logo
##MENU_BAR## - Displays the top menu nav. bar widget
##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## - Displays all of the left widgets setup in the admin for the current design
##RIGHT_WIDGETS## - Displays all of the right widgets setup in the admin for the current design
##NUMBER_OF_ITEMS_IN_CART## - Displays the number of items the customer currenly has in their cart.
##CONTENT_MODULE_X## - This token will/has become available in the July/Aug 2011 release. 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. I.e. ##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.
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## <!-- Markup goes 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## <!-- Markup goes 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## <!-- Markup goes 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 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## <!-- Markup goes 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## <!-- Markup goes 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## <!-- Markup goes 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## <!-- Markup goes 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## <!-- Markup goes 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## <!-- Markup goes 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## <!-- Markup goes 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## <!-- Markup goes 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## <!-- Markup goes 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## <!-- Markup goes 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_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## <!-- Markup goes 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. Sample usage:
##IF_HOMEPAGE## <!-- Markup goes 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. Sample usage:
##IF_NEW_ARRIVALS## <!-- Markup goes 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## <!-- Markup goes 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.
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##
<!-- This will only show up on my homepage -->
<h1> Welcome to my site</h1>
##ELSE##
<!-- This will only show up on all other pages in my store -->
<h1> Welcome to my store</h1>
##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##
<!-- This is the first level of nesting -->
<!-- This will only show up on my homepage -->
<h1> Welcome to my site</h1>
##ELSE##
<!-- This section will only be evaluated if we're NOT on the homepage -->
##IF_VIEW_CART##
<!-- This is the second level of nesting -->
<!-- This will only show up on the view cart page -->
<h1> View my cart</h1>
##ELSE##
<!-- This section will only be evaluated if we're NOT on the homepage AND we're NOT on the view cart page -->
##IF_NEW_ARRIVALS##
<!-- This is the third level of nesting -->
<!-- This will only show up if we're on the new arrivals page -->
<h1> These products have just arrived</h1>
##ELSE##
<!-- This will only show up if we're NOT on the homepage AND we're NOT on the view cart page AND we're NOT on the new arrivals page. I.e. this will show up for the rest of the pages in my store -->
<h1> Welcome to my store</h1>
##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## <!-- some markup -->##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## <!-- some content -->##ELSE## <!-- some other content -->##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## <!-- some content -->##ELSE## ##IF_PRODUCT_6##<!-- some other content -->##ELSE## <!-- yet some completely different content -->##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
Below is a video that goes over using tokens and modifying your design.
