Theme customization can be overwhelming even to the most tech-savy people, but once you get started it's easy.

What makes a theme?

A theme is composed of folders and files which are used to render your site. We've tried to organize these files to make them easy to find and also to understand what is in them.

A theme should contain the following folders:

  • layout
  • templates
  • snippets
  • assets
  • emails

Layouts

The layouts folder contains all the layouts for your theme. What's a layout? A layout is the outer-shell of your site. It's the content that always appears on any page in your site. A layout is a good place to store things like the header and footer of your pages. Your logo, site navigation and footer links also belong in a layout.

Typically it's a good idea to use snippets to break your code into more manageable modules, and then include those snippets in a layout file.

Templates

The templates folder contains the markup files for different pages of your site. There are templates for addresses, blog_categories, blogs, brands, cart, categories, collections, credit_cards, customers, password_resets, posts (for blogs), products, reviews, sales_orders, sessions, 404s, and the index page.

Templates are liquid files which allow the use of liquid tags, and should be written using standard html markup.

Snippets

Snippets are for site elements that are used in multiple templates or layouts. Rather than duplicating the markup in each file, just create a snippet, and reference it with {% include 'snippet_file_name' %}.

Assets

The assets folder contains image, css, and javascript files for use on your site. This is where you can upload images that are not otherwise stored in Cohub, like promotional banners.

To reference assets in your templates, use the following syntax:

{{ 'file.jpg' | asset_url }}

The above code will return the URL of the file. You can use this in conjunction with the html src and href tags in order to get your asset loaded on the page. For example:

<img src="{{ 'file.jpg' | asset_url }}" />

We also provide helper methods for javascript and stylesheet tags:

{{ 'file.css' | asset_url | stylesheet_tag }}
{{ 'file.js'  | asset_url | javascript_tag }}
Did this answer your question?