Theme template - CrystalCommerce Liquid Documentation for Designers
CC Designer Docs

Theme template

This is the template for the site.

File: theme.liquid

Default Liquid Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>{{ site.store_name }} - {{ site.extra_title }}</title>
  <link rel="stylesheet" href="/themes/templates/TerraBlue/assets/terrablue.css" type="text/css">
  <link rel="stylesheet" href="/themes/templates/TerraBlue/assets/crystal.css" type="text/css">
  <link rel="stylesheet" href="/javascripts/jquery-ui/css/ui-lightness/jquery-ui-1.8.18.custom.css" type="text/css">
  {{ content_for_header }}
  <script src="/themes/templates/TerraBlue/assets/category_tree.js"></script>
  <script language="javascript" type="text/javascript">
  //<![CDATA[
    jQuery(function() {
      setupCategoryTree();
      showCategory({{ current_category.id }});
      facebox = new Facebox();
    });
  //]]>
  </script>
</head>
<body id="terrablue">
  <div class="head">
    <div class="wrapper">
      <a href="/"><h1>{{ site.store_name }}</h1></a>
      <h2>your business tag-line here</h2>
      <div id="site_search">
        <form id="searchform" method="get" action="{{ site.search_path }}">
          {{ "1" | search_category_dropdown }}
          {{ "buttons.search_for" | trans | search_query_box }}
          <input value="go" id="searchsubmit" type="submit" />
        </form>
      </div>
    </div>
  </div>

  <div class="menu">
    <div class="wrapper">
      <ul>
        <li class="page_item"><a href="/news/list">{{ "buttons.news" | trans }}</a></li>
        <li class="page_item"><a href="/buylist">{{ "buttons.buylist" | trans }}</a></li>
        <li class="page_item"><a href="/advanced_search">{{ "catalog.search_form.advanced_search" | trans }}</a></li>
        <li class="page_item"><a href="/products/multi_search">{{ "catalog.multi_search.link_label" | trans }}</a></li>
        {% if site.buylist_mode? %}
        <li class="page_item"><a href="/bulk_imports/new_buylist_import">Bulk Import</a></li>
        {% else %}
        <li class="page_item"><a href="/bulk_imports/new_cart_import">Bulk Import</a></li>
        {% endif %}
      </ul>
    </div>
  </div>

  <div class="wrapper">
    <div class="left sidebar">
      <ul>
        {% for page in pages %}
          {% if page.tag_list contains 'topmenu' %}
          <li class="page_item"><h2><a href="{{ page.url }}">{{ page.title }}</a></h2></li>
          {% endif %}
        {% endfor %}
        <li>
          <h2>{{ "mobile.product" | trans }}</h2>
          {% include 'category_tree' %}
        </li>
      </ul>
    </div>
    <div class="content">
      {% if error %}<div class="flash_message error">{{ error }}</div>{% endif %}
      {% if notice %}<div class="flash_message notice">{{ notice }}</div>{% endif %}
      {{ content_for_layout }}
    </div>
    <div class="right sidebar">
      <ul>
        <li>{% include "login" %}</li>
        <li>
          <h2>Your {% if site.buylist_mode? %}Buylist{% else %}Cart{% endif %}</h2>
          <div id="cart">
            <div id="quick_cart">
              {% include "quick_cart" with order %}
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="clear"></div>
</div>
<div class="footer">
  <div class="wrapper">
    <div class="footerbottom">
      powered by: <a href="http://crystalcommerce.com">Crystal Commerce, LLC</a>
      |
      <a href="{{ site.enable_mobile_url }}">{{ "buttons.mobile_site" | trans }}</a>
    </div>
  </div>
</div>
{{ site.mouse_chaser }}
<div id="highslide-container"></div>
<div id="controlbar" class="highslide-overlay controlbar">
  <a href="javascript:void(0)" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
  <a href="javascript:void(0)" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
  <a href="javascript:void(0)" class="highslide-move" title="Click and drag to move" style="margin-left: 10px"></a>
  <a href="javascript:void(0)" onclick="hs.close(this)" title="Click to close"></a>
</div>
  <script src="/javascripts/jquery-ui/js/jquery-ui-1.8.18.custom.min.js"></script>
  <script language="javascript" type="text/javascript">
  //<![CDATA[
    jQuery(function($){
      $("#search_query_box").autocomplete({
        source: "/search/autocomplete",
        minLength: 2,
        select: function(e, ui) {
          $(e.target).val(ui.item.value);
          $(e.target).parents('form').submit();
        }
      });
    });
  //]]>
  </script>
</body>
</html>

Default Mobile Liquid Template

<!doctype html>
<!--[if IEMobile 7 ]>    <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->

<head>
  <meta charset="utf-8">

  <title>{{ site.extra_title }} - {{ site.store_name }}</title>
  <meta name="description" content="">
  <meta name="author" content="Crystal Commerce">

  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  {{ 'mobile-html5-boilerplate' | cc_css_tag }}
  {{ 'mobile' | cc_css_tag }}
  {{ content_for_header }}

  <!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading -->
  <meta http-equiv="cleartype" content="on">

  {{ 'libs/modernizr-2.0.6.min.js' | cc_js_tag }}
</head>

<body class="store">

  <div id="container">
    {% if error %}<div class="flash_message error">{{ error }}</div>{% endif %}
    {% if notice %}<div class="flash_message notice">{{ notice }}</div>{% endif %}
    {{ content_for_layout }}
    <footer>
      <ul class="ui-buttons">
        <li><a href="/"><img src="/images/home64.png" title="{{ "buttons.home" | trans}}" class="icon" />{{ "buttons.home" | trans}}</a></li>
        <li class="quick_cart">{% include "quick_cart" %}</li>
        {% if site.buylist_mode? %}
        <li><a href="/">{{ "buttons.store" | trans }}</a></li>
        {% else %}
        <li><a href="/buylist">{{ "buttons.buylist" | trans }}</a></li>
        {% endif %}
        {% if current_user.logged_in? %}
        <li><a href="/user/home">{{ 'gear' | icon48 }}{{"user.account.your_account" | trans}}</a></li>
        <li><a href="/user/logout">{{ 'door2' | icon48 }}{{"buttons.log_out" | trans}}</a></li>
        {% else %}
        <li><a href="/login">{{ 'door' | icon48 }}{{"buttons.log_in" | trans}}</a></li>
        {% endif %}
        <li><a href="{{ site.disable_mobile_url }}">{{ 'windows' | icon48 }}{{"buttons.full_site" | trans}}</a></li>
      </ul>
      <div class="powered_by">
        powered by: <a href="http://www.crystalcommerce.com">Crystal Commerce, LLC</a>
      </div>
    </footer>
  </div> <!--! end of #container -->

  {{ site.jquery_loader }}

  {{ 'underscore-min' | cc_js_tag }}
  {{ 'jquery.qtip.min.js' | cc_js_tag }}
  {{ 'jquery.cc-api-qtip.js' | cc_js_tag }}
  {{ 'mobile-helper' | cc_js_tag }}
  {{ 'category-tree-slideout.jquery.js' | cc_js_tag }}

  <script>
    // iPhone Scale Bug Fix, read this when using http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
    MBP.scaleFix();
    MBP.hideUrlBar();
    $(document).ready(function() {
      setupCategoryTree();
      showCategory({{ current_category.id }});
    });

  </script>

  {{ site.google_analytics_tags }}
</body>
</html>

Drops Supported