Theme guide

39shops lets you fully customize the look and feel of your online

store. Following guide provides a detailed understanding about

creating 39shops theme. This guide is recommended for users

comfortable with hand coding HTML and CSS.

Theme GuideAuthor: Hrishikesh Jobanputra

[email protected]

CONTENTS

1. The Anatomy of a Theme...................................................................................3

2. Working with a 39shops Theme......................................................................6

3. Tags..............................................................................................................................8

Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 2

1. The Anatomy of a Theme

Every 39shops theme consist of certain basic elements which work together

to show up the online store. These elements are:

Templates

Page Parts

Stylesheets

JavaScript

Images

1.1. Templates Templates are specialized HTML pages with *.liquid extension to parse

dynamic tags supported by 39shops. 39shops provides a set of standard

templates based on the functions each of them perform. Here are the

templates provided with every 39shops theme:

layout

home

catalogue

product detail

page

cart


1.1.1. Layout

The layout holds the most common elements of the website. It behaves like a standard template which gets applied to each page of your online store. Layout consists of common elements of your design such as - page background, header and footer, or any other element that will stay consistently visible across all the pages of your online store. Elements once included into the Layout template will not be required to be included in any other template. Such elements will be automatically displayed across all pages of your online store.

1.1.2 Home

Customize your home page using this template. Anything that you want to display specifically on your home page can be included in this template. You can include elements such as Images, JavaScript, featured products, featured categories etc.

1.1.3. Catalogue

You can customize your product catalogue using this template. It includes your products and categories list, featured products, featured categories, pagination as well as any additional elements such as side navigation etc.

1.1.4. Product detail

Using this template you can customize the design of product detail page. This page will be accessible to site visitors when they click on a product to view more details. This page will display dynamic data such as product title, product description, alternate photos, produce price etc.

1.1.5. Page

Using this template you can customize the design of CMS based pages also called ‘custom pages’. It is used to display all the content pages that you added from the ‘Pages’ section of your store administration.

1.1.6. Cart

Using this template you can customize the design of your shopping cart page.


1.2. Page PartsPages parts are small HTML elements or snippets that can be included in any Template. Page parts are very useful if you want to display common elements in certain areas of your online store. For example, if you want to include a common promotional banner in all pages, you will create it a page part. Then you will simply insert the page part in all templates pages. In this way, if you need to change the promotional banner, you will only need to modify the page part.

1.3. Stylesheets Just like any other website, you can attach Stylesheet to your templates. In your 39shops theme, Stylesheets are linked with the ‘Layout’ template.

1.4. JavaScriptJavaScript can be also included in the same way as Stylesheets with the ‘Layout’ template of your theme. 39Shops themes support all types of JavaScript including Jquery.

1.5. ImagesA default images folder is provided with every 39shops theme. It stores all types of graphics such as background images, bullets, icons, banners etc. associated with your theme.


Note: The Images folder associated with your theme not store product photos or any files related to the content of your online store. Such files are stored in the ‘File Manager’.

2. Working with a 39shops Theme

Every 39shops store-front comes with a pre-installed theme. The quickest way to create a new theme is to modify the pre-installed theme and rename it with your own. To do this, log-in to your store administration and visit ‘My Themes’ sub-menu under the ‘Design & Navigation’ tab.

2.1. Online theme editorThe online theme editor has following major sections:

Templates All liquid templates associated with your theme are available for editing in this section

Page parts

By default ‘side_nav’ is provided, you can add more page parts as needed by clicking on the ‘add page part’ icon.

Stylesheets

A default stylesheet ‘default.css’ is available with the theme. You can modify this stylesheet or add more Stylesheets by clicking on the ‘add new stylesheet’ icon.

JavaScript A blank ‘default.js’ is provided with the theme. You can added more by clicking on ‘add new javascript’ icon.

Images Stores all graphics, background, icons etc. related to a theme

Preferences

Stores product photo resizing preferences related to your theme


2.1.1. Modifying theme element

Once you click on a theme element to modify, you will see that rest of the elements are availably towards the right side bar. This allows you to switch to various theme elements quickly without going back to the main page.

2.1.2. Previewing changes

As you modify your theme elements, you can open your store url in another window and refresh it to view the updated changes.


Important Note: Sometimes the changes you make may not be visible instantly. It is advisable to refresh your browser and remove the cache if do not see the changes.

For Windows user: press ctrl+f5 to allow browser to bypass local cache and request the design elements from the server.

3. Tags

3.1. Tag Basics39shops has two types of special operators used to render dynamic content in the HTML templates. They are Variables and Blocks.

3.1.1. Variables

Variables are used to insert dynamic data like product title, product price etc. Here is an example,

<html><body> <p>{{ product.name }}</p></body></html>

3.1.2. Blocks

Blocks are either used to render a block of HTML for set of data (example: product listing), or to conditionally render a block of HTML. Here is an example of a block:

<html><body>{% for product in store.paginated_products %} <li> {{ product.name }} </li>{% endfor %}</body></html>

In the above example, the block starts with the tag {% for product in store.paginated_products %} and ends with {% endfor %}. In between the bocks we have the variable to display product title. The {{product.name}} variable will be looped with <li> </li> HTML tag to display a list of ‘product title’.


Note: Block always begins and ends with a single curly bracket and a percentage sign ‘{% ... %}’ while a variable begins and end with double curly brackets ‘{{ ... }}‘

3.1.3 Types of Blocks

Mainly, there are two types of blocks supported by 39shops:

The ‘For’ block:

{% for … in …. %}….......{% endfor %}

This block is used when certain list of items are to be displayed. For example. product list, category list, list of navigation links etc. You can use this block only with dynamic tags.

The ‘If’ block:

This block is used when certain data or tag should be displayed conditionally. You can use this tag block anywhere, either with static HTML elements or dynamic tags.

{% if …..... %} …......{% endif %}

Here is an example of the ‘If’ block

<html><head> ….</head><body>{% if store.payment_enabled? %} <button value="Checkout" >Checkout</button>{% endif %}</body></html>

In the above example, the {% if store.payment_enabled? %} condition checks if any payment option is enabled for the store. If a payment option is enabled, the Checkout button should be displayed otherwise it should not displayed.


3.2. Using Stylesheets and JavaScriptStylesheets and JavaScripts are the fundamental building blocks of any design. You can insert Stylesheets and JavaScripts into your 39shops theme within the <head></head> tag of your ‘Layout’. Here are the tags:

For Stylesheet: <link href="{{ current_theme.stylesheet_path }}/stylesheet-file.css" rel="stylesheet" type="text/css"/>

For JavaScript:<script src="{{ current_theme.javascript_path }}/javascript-file.js" type="text/Javascript"></script>

Here is an example:

<head>

<title>My pet store</title>

<link href="{{ current_theme.stylesheet_path }}/default.css"

rel="stylesheet" type="text/css"/>

<link href="{{ current_theme.stylesheet_path }}/orbit.css"

rel="stylesheet" type="text/css"/>

<script src="{{ current_theme.javascript_path }}/default.js"

type="text/Javascript"></script>

<script src="{{ current_theme.javascript_path }}/product_hover.js"

type="text/Javascript"></script>

</head>

<body>

...

</body>

As shown in the example, the tags to insert Stylsheet and JavaScript are almost similar. The first part of the tag “current_theme” finds out the current theme and the second part “.stylesheet_path” and “.javascript_path” finds out the location of the particular stylesheet or Javascript file. This tag is followed by a forward slash ‘/’ and then the actual stylesheet or javascript file name. Likewise, you can attach multiple JavaScript and Stylesheets with your theme.


3.3. Inserting Images

You can insert image to any template page including the ‘Layout’ template. In a normal website you use the <img src=”../path/to/image.png”/> HTML tag to insert images. In case of 39shop, we also use the <img> tag but the path to image is specified using this dynamic tag: “{{ current_theme.image_path }}”. Let me show you the usage with an example:

<img src="{{ current_theme.image_path }}/american-express.png" alt=" logo" />

In this example, “american-express.png” is the image file stored in the “images” folder associated with the theme. The tag {{ current_theme.image_path }} is used inside the <img src=”..”> Attribute followed by a forward slash ‘/’ and then the name of the image file to be displayed.

3.4. Inserting Page PartsAs explained earlier, you can create and use ‘Pages Parts’ into any template of your 39shops theme. Suppose you created a page part called ‘side_navigation’ and now you want to display it in your ‘Catalog’ template.

Open the ‘Catalogue’ template and move your cursor to the HTML tag where you want to insert the page part. Use this tag: {% include 'side_navigation' %}. That’s it, the page part “side_navigation” is now included into the catalogue page and category navigation menu will be displayed in this page.

Here is an example:

<html> <body> <div class=”content-left”> ... </div>  <div class=”content-right”>* {% include ‘side_navigation’ %} </div> <div class=”header”> ...</div> </!-- End header -->

{{ content_for_layout }}

<div class=”footer”> ...</div> </tr>{% endfor %}</table>

Note:- For the sake of this example, we have used table structure, but you can also used <div> based structure for your design.

Within this for loop, for each item that is rendered, we need to display following elements:

1. Item name and link to product description

2. Unit price of each item

3. Quantity input so that user can modify quantity

4. Amount for that items i.e. quantity multiplied by unit price


5. Check box to remove one or more items

Let’s see how each of these elements is rendered using our tags:

{% for item in cart.items %}

<tr><td><a href="{{ item.product.url }}">{{ item.name }}</a></td>

<td><input type="text" size="2" value="{{ item.quantity }}" name="item_quantity_{{ item.id }}" id="item_quantity_{{ item.id }}" /></td>

<td>{{ item.unit_price | money: store }}</td>

<td>{{ item.price | money: store }}</td>

<td><input type="checkbox" value="true" name="item_check_{{ item.id }}" id="item_check_{{ item.id }}"></td>

</tr>{% endfor %}

In the above mentioned code, we have rendered all of the elements related to a product (which is added to shopping cart) in table column <td>. This five columns will be loop for every row <tr>.

Here is an explanation of these tags:

<a href="{{ item.product.url }}">{{ item.name }}</a>

Product name with link to product detail page

<input type="text" value="{{ item.quantity }}" name="item_quantity_{{ item.id }}" id="item_quantity_{{ item.id }}" />

Input field that accepts quantity for each item

{{ item.unit_price | money: store }} Unit rate of each item

{{ item.price | money: store }} Unit rate multiplied by quantity entered i.e. today amount for each item

<input type="checkbox" value="true" name="item_check_{{ item.id }}" id="item_check_{{ item.id }}">

Check box associated with each item. to remove item from cart


Finally, we need the action buttons which will allow users to either update cart, checkout or continue shopping.

<a href="/products">Continue Shopping</a><button name="commit" value="Update cart" >Update cart</button>{% if store.payment_enabled? %}<button name="commit" value="Checkout">Checkout</button>{% endif %}

In the above code, we simply have an <a></a> tag which takes user to the product catalog page. In the next line we have a <button></button> tag with value=”update cart” . This action allows user to update quantity if changed for any item added to the cart. And lastly, we have another <button> </button> tag to allow user to checkout. Notice the use of {if store.payment_enabled? %} .... {endif} tag which makes the ‘Checkout’ button displayed to the user only if at least one payment method is enabled by the store owner.

Shopping cart header

In an online store it is usually preferred to display shopping info across all pages of the site. Usually the shopping info is how many products are added to shopping cart, the total amount of goods added to cart and a link to view the shopping cart page.

Here is the code:

Your cart contains {{ cart.total_items }} items

You have items worth {{ cart.total_amount | money: store }} in your cart

<a href="/cart">View Cart</a>

The above code is self-explainatory. Tag in the first line displayed the total number of items added to the shopping cart. In the second line, the {{cart.total_amount | money : store }} tag displays the total worth of goods added to the shopping cart. In third line, we simply provide a link to the ‘cart’ template to view the cart content.

Note: Usually the shopping cart header is included in the ‘Layout’ template so that it remains consistent across the store front.


3.11. Content PageThe content pages added by user from store administration through the ‘Pages’ section is rendered in the template called ‘page.liquid’. Here is the code which displayed the page title and content of a page.

<h1>{{ page.title }}</h1><p>{{ page.body }} </p>

The tags are self-explanatory.


Need Help?

Visit: http://support.my39shop.com

E-mail: [email protected]

mailto:[email protected]

http://support.my39shop.com/

Technology

Theme guide