• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Theme guide
 

Theme guide

on

  • 681 views

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 ...

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.

Statistics

Views

Total Views
681
Views on SlideShare
681
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Theme guide Theme guide Document Transcript

    • Theme Guide Author: Hrishikesh Jobanputra hrishi@39shops.com 39shops lets you fully customize the look and feel of your onlinestore. Following guide provides a detailed understanding aboutcreating 39shops theme. This guide is recommended for userscomfortable with hand coding HTML and CSS.
    • CONTENTS1. The Anatomy of a Theme...........................................................................................32. Working with a 39shops Theme................................................................................63. Tags.............................................................................................................................8 Copyright 2011, 39shops.com. All Rights Reserved. Page |2
    • 1. The Anatomy of a ThemeEvery 39shops theme consist of certain basic elements which work together toshow up the online store. These elements are: • Templates • Page Parts • Stylesheets • JavaScript • Images1.1. TemplatesTemplates are specialized HTML pages with *.liquid extension to parse dynamictags supported by 39shops. 39shops provides a set of standard templatesbased on the functions each of them perform. Here are the templates providedwith every 39shops theme: • layout • home • catalogue • product detail • page • cart Copyright 2011, 39shops.com. All Rights Reserved. Page |3
    • 1.1.1. LayoutThe layout holds the most common elements of the website. It behaves like astandard template which gets applied to each page of your online store. Layoutconsists of common elements of your design such as - page background, headerand footer, or any other element that will stay consistently visible across all thepages of your online store. Elements once included into the Layout template willnot be required to be included in any other template. Such elements will beautomatically displayed across all pages of your online store.1.1.2 HomeCustomize your home page using this template. Anything that you want todisplay specifically on your home page can be included in this template. You caninclude elements such as Images, JavaScript, featured products, featuredcategories etc.1.1.3. CatalogueYou can customize your product catalogue using this template. It includes yourproducts and categories list, featured products, featured categories, paginationas well as any additional elements such as side navigation etc.1.1.4. Product detailUsing this template you can customize the design of product detail page. Thispage will be accessible to site visitors when they click on a product to view moredetails. This page will display dynamic data such as product title, productdescription, alternate photos, produce price etc.1.1.5. PageUsing this template you can customize the design of CMS based pages alsocalled ‘custom pages’. It is used to display all the content pages that you addedfrom the ‘Pages’ section of your store administration.1.1.6. CartUsing this template you can customize the design of your shopping cart page. Copyright 2011, 39shops.com. All Rights Reserved. Page |4
    • 1.2. Page PartsPages parts are small HTML elements or snippets that can be included in anyTemplate. Page parts are very useful if you want to display common elements incertain areas of your online store. For example, if you want to include acommon promotional banner in all pages, you will create it a page part. Thenyou will simply insert the page part in all templates pages. In this way, if youneed to change the promotional banner, you will only need to modify the pagepart.1.3. StylesheetsJust like any other website, you can attach Stylesheet to your templates. In your39shops 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 JavaScriptincluding Jquery.1.5. ImagesA default images folder is provided with every 39shops theme. It stores all typesof graphics such as background images, bullets, icons, banners etc. associatedwith 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’. Copyright 2011, 39shops.com. All Rights Reserved. Page |5
    • 2. Working with a 39shops ThemeEvery 39shops store-front comes with a pre-installed theme. The quickest way tocreate a new theme is to modify the pre-installed theme and rename it with yourown. 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 sectionPage 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 themePreferences Stores product photo resizing preferences related to your theme Copyright 2011, 39shops.com. All Rights Reserved. Page |6
    • 2.1.1. Modifying theme elementOnce you click on a theme element to modify, you will see that rest of theelements are availably towards the right side bar. This allows you to switch tovarious theme elements quickly without going back to the main page.2.1.2. Previewing changesAs you modify your theme elements, you can open your store url in anotherwindow 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. Copyright 2011, 39shops.com. All Rights Reserved. Page |7
    • 3. Tags3.1. Tag Basics39shops has two types of special operators used to render dynamic content inthe HTML templates. They are Variables and Blocks.3.1.1. VariablesVariables 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. BlocksBlocks 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 exampleof 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 instore.paginated_products %} and ends with {% endfor %}. In between thebocks 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 ‘producttitle’.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 ‘{{ ... }}‘ Copyright 2011, 39shops.com. All Rights Reserved. Page |8
    • 3.1.3 Types of BlocksMainly, 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 onlywith 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 ordynamic 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 ifany payment option is enabled for the store. If a payment option is enabled, theCheckout button should be displayed otherwise it should not displayed. Copyright 2011, 39shops.com. All Rights Reserved. Page |9
    • 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 almostsimilar. The first part of the tag “current_theme” finds out the current theme andthe second part “.stylesheet_path” and “.javascript_path” finds out the locationof the particular stylesheet or Javascript file. This tag is followed by a forwardslash ‘/’ and then the actual stylesheet or javascript file name. Likewise, you canattach multiple JavaScript and Stylesheets with your theme. Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 10
    • 3.3. Inserting ImagesYou can insert image to any template page including the ‘Layout’ template. In anormal website you use the <img src=”../path/to/image.png”/> HTML tag toinsert images. In case of 39shop, we also use the <img> tag but the path toimage is specified using this dynamic tag: “{{ current_theme.image_path }}”. Letme 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 usedinside the <img src=”..”> Attribute followed by a forward slash ‘/’ and then thename of the image file to be displayed.3.4. Inserting Page PartsAs explained earlier, you can create and use ‘Pages Parts’ into any template ofyour 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 youwant to insert the page part. Use this tag: {% include side_navigation %}. That’sit, the page part “side_navigation” is now included into the catalogue page andcategory navigation menu will be displayed in this page.Here is an example:<html> <body> <div class=”content-left”> ... </div> <!-- Start right side bar ---> <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’ %} Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 11
    • 3.5. Rendering ‘Layout’ in other templatesEarlier we discussed that the ‘Layout’ is the base template which containcommon design elements to be displayed store-wide; for example, header andfooter. To allow rest of the templates, use the ‘Layout’ template, we need to putthe following tag into the ‘Layout’ template.{{ content_for_layout }}Here is an example of a typical ‘Layout’ template:<html> <head> … </head><body><!-- Start header --><div class=”header”> ...</div> </!-- End header -->{{ content_for_layout }}<!-- Start footer ---><div class=”footer”> ...</div> <!-- End footer →<body></html>In the above example, the <head> </head> section has the Stylesheet andJavaScript links. Then in the <body> </body> tag, only header and footersections 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 pageloads, it looks for the layout and in the layout if {{ content_for_layout }}. tag ispresent, then the template page automatically take up the header and footerfrom the ‘Layout’ and displays the rest of the content specific to that page. Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 12
    • 3.6. Navigation Menus39shops allows user to create any number of navigation menus and insert theminto one or more template pages as needed.3.6.1. Creating navigation menuTo create a navigation menu, log-in to your store administration area and underthe ‘Design and Navigation’ tab, click on ‘Navigation menus’ option.You will see that two navigation menus – ‘Main’ and ‘Footer’ are already createdand a couple of links are also added to these. These are default navigationmenus provided by 39shops and cannot be removed. For each of thesenavigation menus, you can add/remove links.You can also add new navigation menus apart from main and footer by clickingon the link ‘Add navigation menu’ located on the top of the right side bar.3.6.2 Navigation menu TagThe navigation menu that you create can be easily added to any template pagesusing 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 eachlink added to a navigation menu. But there is more to this tag, lets take a look atthe tag closely:{% for link in store.main_navigation_links %}Apart from the standard ‘for’ loop convention, we have thestore.main_navigation_link argument in which really does the trick. In thatargument ‘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 %} Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 13
    • 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 oropen 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 tonavigation menu.Finally the navigation menu tags for loop ends with {% endfor %}, which is astandard convention to end a for loop.Here is the standard code for footer main navigation and footer navigationmenus which comes default with each 39shops store-front.Main navigation menu{% for link in store.main_navigation_links %}<a href="{{ link.url }}" target="{{ link.url_target }}">{{ link.title }}</a>{% endfor %}Footer navigation menu{% for link in store.footer_navigation_links %}<a href="{{ link.url }}" target="{{ link.url_target }}">{{ link.title }}</a>{% endfor %} Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 14
    • 3.7. Product ListProduct 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: Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 15
    • {% for product in Begins the product blockstore.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 productwill_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 Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 16
    • 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 storeadministration 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>ExplanationThe only difference between a normal product list and a featured product list isthe first line in that tag where we have specified ‘store.featured_products’instead of ‘store.paginated_products’ Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 17
    • 3.8. CategoriesFrom your 39shops store administration, you can assign products to one ormore categories. This allows the shopper to click on categories and get desiredproducts 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 CategoriesSimilarly, 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 categoryIn order to provide a better user experience, sometimes active category needs tobe highlight using a difference CSS. In the following example, we are using aspecial ‘for loop’ to display an active category. In this example, we are assumingthat 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> Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 18
    • 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 areusing an {%if...%} {%else%} {%endif %} block to tell the system which class to applywhen a particular category is active. Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 19
    • 3.9. Product Detail39shops provides template called ‘product_detail.liquid’. This template is usedto render detailed product information.Displaying product photosIn the product detail page, one of the major elements is displaying multipleproduct images and also allowing user to see a bigger product image.Lets’ begin with the code that displays multiple product thumbnails and a largerimage 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 thecode 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 productimages innovatively in the product detail page. Refer to our public themes to seeexample usage. Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 20
    • Displaying product informationHere 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 priceAdding product to cartHere is the code which allows user to specify quantity and add the product tocart:<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. Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 21
    • 3.10. Shopping CartWith 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. Letslook 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 astandard 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-requisitefor the shopping cart page to function properly.Now, let’s take a look at how we can render the items added to the shoppingcart.Since there can be multiple items added to a cart, we will use the ‘for loop’ torender to loop items added to the cart and render in our view:<table>{% for item in cart.items %}<tr><!-- loop each item in a row --></tr>{% endfor %}</table>Note:- For the sake of this example, we have used table structure, but you canalso used <div> based structure for your design.Within this for loop, for each item that is rendered, we need to display followingelements:1. Item name and link to product description2. Unit price of each item3. Quantity input so that user can modify quantity4. Amount for that items i.e. quantity multiplied by unit price Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 22
    • 5. Check box to remove one or more itemsLet’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 aproduct (which is added to shopping cart) in table column <td>. This fivecolumns 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 forvalue="{{ item.quantity }}" each itemname="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 cartid="item_check_{{ item.id }}"> Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 23
    • 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 theproduct catalog page. In the next line we have a <button></button> tag withvalue=”update cart” . This action allows user to update quantity if changed forany item added to the cart. And lastly, we have another <button> </button> tagto 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 atleast one payment method is enabled by the store owner.Shopping cart headerIn an online store it is usually preferred to display shopping info across allpages of the site. Usually the shopping info is how many products are added toshopping cart, the total amount of goods added to cart and a link to view theshopping cart page.Here is the code:Your cart contains {{ cart.total_items }} itemsYou 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 totalnumber of items added to the shopping cart. In the second line, the{{cart.total_amount | money : store }} tag displays the total worth of goodsadded 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 sothat it remains consistent across the store front. Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 24
    • 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 whichdisplayed 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 Copyright 2011, 39shops.com. All Rights Reserved. P a g e | 25