Theme guide

Theme Guide
Author: Hrishikesh Jobanputra
hrishi@39shops.com

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.

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. Page |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 Parts
Pages 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. JavaScript
JavaScript 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. Images
A 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 editor
The 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 Basics
39shops 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 JavaScript
Stylesheets 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"
<script src="{{ current_theme.javascript_path }}/product_hover.js"
</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.

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

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 Parts
As 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>
<!-- End right side bar →
<body>
</html>

The convention to insert a Page Part into any template is :
{% include ‘name_of_ page_part’ %}

3.5. Rendering ‘Layout’ in other templates
Earlier we discussed that the ‘Layout’ is the base template which contain
common design elements to be displayed store-wide; for example, header and
footer. To allow rest of the templates, use the ‘Layout’ template, we need to put
the following tag into the ‘Layout’ template.

{{ content_for_layout }}

Here is an example of a typical ‘Layout’ template:

<html>

<head>
…
</head>
<body>

<div class=”header”>
...
</div>
</!-- End header -->

{{ content_for_layout }}


<div class=”footer”>
...
</div>
<!-- End footer →
<body>

</html>

In the above example, the <head> </head> section has the Stylesheet and
JavaScript links. Then in the <body> </body> tag, only header and footer
sections are rendered. Between the header and footer, we have included
{{ content_for_layout }}.

This tag does all the job for rest of the template pages. When a template page
loads, it looks for the layout and in the layout if {{ content_for_layout }}. tag is
present, then the template page automatically take up the header and footer
from the ‘Layout’ and displays the rest of the content specific to that page.

3.6. Navigation Menus
39shops allows user to create any number of navigation menus and insert them
into one or more template pages as needed.

3.6.1. Creating navigation menu
To create a navigation menu, log-in to your store administration area and under
the ‘Design and Navigation’ tab, click on ‘Navigation menus’ option.

You will see that two navigation menus – ‘Main’ and ‘Footer’ are already created
and a couple of links are also added to these. These are default navigation
menus provided by 39shops and cannot be removed. For each of these
navigation menus, you can add/remove links.

You can also add new navigation menus apart from main and footer by clicking
on the link ‘Add navigation menu’ located on the top of the right side bar.

3.6.2 Navigation menu Tag
The navigation menu that you create can be easily added to any template pages
using the navigation menu title.

Here is the code:

{% for link in store.main_navigation_links %}

<a href="{{ link.url }}" target="{{ link.url_target }}">{{ link.title }}</a>

{% endfor %}

In the first line, we have used the ‘for’ loop {% for link in ….....%} to render each
link added to a navigation menu. But there is more to this tag, lets take a look at
the tag closely:


Apart from the standard ‘for’ loop convention, we have the
store.main_navigation_link argument in which really does the trick. In that
argument ‘main_navigation’ is the name of the navigation menu available in the
‘Navigation menus’ section of your store administration.

Likewise, suppose user has added a navigation menu called ‘Top Categories’,
then the navigation menu tag will be something like this :

{% for link in store.top_categories_link %}


Notice how we used ‘top_categories’ as the argument instead of
‘main_navigation’.

The second line of navigation menu tag looks familiar to us. The link tag
{{ link.url }} links to the navigation menu item configured while adding the link,
target tag {{ link.url_target }} takes the target (open in same browser window or
open in a new browser window) selected while adding the link and finally
{{ link.title }} tag displays the name of the link saved while adding the link to
navigation menu.

Finally the navigation menu tags for loop ends with {% endfor %}, which is a
standard convention to end a for loop.

Here is the standard code for footer main navigation and footer navigation
menus which comes default with each 39shops store-front.

Main navigation menu

{% endfor %}

Footer navigation menu

{% for link in store.footer_navigation_links %}
{% endfor %}


3.7. Product List
Product lists are displayed using ‘blocks’. The product listing block is used in
‘catalogue.liquid’ template. Here is an example of the product list block:

<html>
<head>
….
</head>
<body>
<h1>Products</h1>
<div class="item">
<ul>
{% for product in store.paginated_products %}
<li>
<h2 class="title"><a href="{{ product.url }}">{{ product.name }}</a></h2>
<div class="photo"> <a href="{{ product.url }}">{{ product |
product_img_tag }}</a> </div>
<p class="price">{{ product.price | money : store }}</p>
</li>
{% endfor %}
</ul>
</div>
<div style="clear"></div>
{{ store.paginated_products | will_paginate_liquid: "Prev", "Next" }}
</body>
</html>

Some of the above code looks familiar to us while some tags are relatively new.
Let’s understand what each of these tags do:


{% for product in Begins the product block
store.paginated_products %}

{{ product.url }} Provides hyperlink to the product
detail page.

{{ product.name }} Displays the product title

{{ product | product_img_tag }} Displays the product image (small
size).

There are two parts of this tag
separated by a vertical line. The first
part ‘product’ tells the system to
identify the product and the second
tag after the vertical line
‘product_image_tag’ finds out the
corresponding image path of the
product.

{{ product.price | money : store }} Displays the product price.

There are two parts of this tag
separated by a vertical line. The first
part ‘product.price’ shows the actual
price of the product while the second
part after the vertical line ‘money’ is a
special operator to covert any number
into currency format.

{% endfor %} Ends the loop

{{ store.paginated_products | Displays the pagination of the product
will_paginate_liquid: "Prev", "Next" }} list.

In this tag, the text written inside the
double quotes i.e. “Prev” , “Next” can
be changed to any text that you want
to show.

3.7.1 Featured Product List


In addition to the product list, 39shops has a special type of product list called
‘Featured Products’. If user has flagged a product ‘Featured’ from his store
administration area, those products are displayed using this Tag.

Here is an example of featured product list block:

<html>
<head>
….
</head>
<body>
<h1>Products</h1>
<div class="item">
<ul>
{% for product in store.featured_products %}
<li>
<h2 class="title"><a href="{{ product.url }}">{{ product.name }}</a></h2>
<div class="photo"> <a href="{{ product.url }}">{{ product |
product_img_tag }}</a> </div>
<p class="price">{{ product.price | money : store }}</p>
</li>
{% endfor %}
</ul>
</div>
<div style="clear"></div>
{{ store.paginated_products | will_paginate_liquid: "Prev", "Next" }}
</body>
</html>

Explanation
The only difference between a normal product list and a featured product list is
the first line in that tag where we have specified ‘store.featured_products’
instead of ‘store.paginated_products’


3.8. Categories
From your 39shops store administration, you can assign products to one or
more categories. This allows the shopper to click on categories and get desired
products quickly while they are browsing through the store front.

Here is the code example that displays list of categories:

<ul>
{% for category in store.categories %}
<li><a href="{{ category.url }}">{{ category.name }}</a></li>
{% endfor %}
</ul>

Showing Featured Categories
Similarly, we can also display list of featured categories:

<ul>
{% for category in store.featured_categories %}
<li><a href="{{ category.url }}">{{ category.name }}</a></li>
{% endfor %}
</ul>

Categories link with active category
In order to provide a better user experience, sometimes active category needs to
be highlight using a difference CSS. In the following example, we are using a
special ‘for loop’ to display an active category. In this example, we are assuming
that a css class called ‘active’ is already available.

<ul>
{% for category in store.categories %}
{% if store.active_category.name == category.name %}
{% assign active_class = "active" %}
{% else %}
{% assign active_class = "" %}
{% endif %}
<li><a href="{{ category.url }}"
class={{ active_class }}>{{ category.name }}</a></li>
{% endfor %}
</ul>


In the above example, we are using the already known for loop for categories.
However, the interesting part of the code begins from second line. Here we are
using an {%if...%} {%else%} {%endif %} block to tell the system which class to apply
when a particular category is active.


3.9. Product Detail
39shops provides template called ‘product_detail.liquid’. This template is used
to render detailed product information.

Displaying product photos
In the product detail page, one of the major elements is displaying multiple
product images and also allowing user to see a bigger product image.

Lets’ begin with the code that displays multiple product thumbnails and a larger
image when click on the thumb image. Here is the code:

{% for product_image in product.product_images %}
<li>
<a href="{{ product_image | img_url: 'medium'}}">
{{ product_image | images_tag: 'thumb'}}</a>
</li>
{% endfor %}

Next, we always need to display a default big image of the product. Here is the
code which does the job:

{{product | product_img_tag: 'medium' }}

If we further need to show even a larger version of the image, here is the code:

{{product | product_img_tag: 'large' }}

Now, if you want that clickng on the big image should open the large image,
you can link the big image to the large image in the following way:

<a href=”{{product | product_img_url: 'large' }}”>{{product | product_img_tag:
'medium' }}</a>

Note: You can use a variety of Javascript and Jquery functions to display product
images innovatively in the product detail page. Refer to our public themes to see
example usage.


Displaying product information
Here are the simple tags you can use to show detailed product information:

{{ product.name }} Show product title

{{ product.description }} Show detailed description

{{ product.price | money: store }} Show product price

Adding product to cart
Here is the code which allows user to specify quantity and add the product to
cart:

<form method="post" action="/cart/add" >
<input type="hidden" id="product_id" name="product_id"
value="{{ product.id }}" />
<input type="text" value="1" size="2" name="quantity" id="quantity"
class="textinput">
<input type="submit" name="button" id="button" value="Add to cart" />
</form>

In the above code, since we are collecting user data, we certainly need to have a
<form></form> tag with a ‘post’ method.


3.10. Shopping Cart
With every 39shops theme, there is a default template called ‘cart.liquid’. The
‘cart.liquid’ template is used to render the items added to shopping cart.
Morover in this page user can modify quantity and proceed to checkout. Lets
look at what goes into the cart.liquid template one by one.

All dynamic tags of shopping cart page are within the <form> tag which is a
standard HTML tag.

Here is form action:

<form action="/cart/update" method="post" id="cart">
---- shopping cart dynamic tags in this area ----
</form>

As you can see, the <form> tag does nothing special except accepting the ‘post’
method based on the ‘cart id’. This is a standard code and it is a pre-requisite
for the shopping cart page to function properly.

Now, let’s take a look at how we can render the items added to the shopping
cart.

Since there can be multiple items added to a cart, we will use the ‘for loop’ to
render to loop items added to the cart and render in our view:

<table>
{% for item in cart.items %}
<tr>

</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 }}"> Product name with link to product
{{ item.name }}</a> detail page

<input type="text" Input field that accepts quantity for
value="{{ item.quantity }}" each item
name="item_quantity_{{ item.id }}"
id="item_quantity_{{ item.id }}" />

{{ 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" Check box associated with each item.
name="item_check_{{ item.id }}" to remove item from cart
id="item_check_{{ item.id }}">


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 Page
The 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: support@39shops.zendesk.com


Theme guide

Recommended

More Related Content

What's hot (19)

Viewers also liked (18)

Similar to Theme guide (20)

Recently uploaded (20)

Theme guide