• View
• Edit
• History
• Print

LookAndFeel

Different programs refer to templates and themes different ways. Shopify uses the terminology of the design as "Look and Feel". I'm going to help you understand some of the various things that will help you understand the different elements of the look and feel. If you can understand some of the basics, you can very easily make simple modifications to help create some minor customization for your Shopify site. We will discussed more advanced "Look and Feel" a bit later.

File Structure

There are usually around 8 different files that really make the Shopify Themes come together and work. The great thing about this is that no matter what type or content or element you put in the site, these 8 files will control the look and feel of things. Shopify uses Ruby to reference different shop elements. I am by no means a Ruby expert. I'm a bit handicapped with Ruby, but it shows that even a handicap like myself can figure things out.

If you know HTML and CSS you should be able to identify things very easily within these files. It is very easy to make modifications to existing code if you understand the basics. This is the key to customizing anything.

Here is a list of the files and what they are used for:

1. theme.liquid - This file controls the overall site theme.
2. blog.liquid - This file controls the blog content.
3. cart.liquid - This file controls the shopping cart content.
4. collection.liquid - This file controls the collection content.
5. index.liquid - This file controls the the homepage.
6. page.liquid - This file controls the the content when it is in a page format.
7. product.liquid - This file controls the way the product pages look.
8. shop.css (not always named shop.css and not always just 1 file) - This file controls what things look like, colors, layout, fonts, etc.

Assets

Whenever you want to use Shopify to host any type of file, where in a normal situation you would ftp and image, this is where Assets come into play. Assets are the files that we upload. With Shopify they limit you to 40MB of space for your assets. If you use all of that then you may consider optimizing your images or files for the web, or hosting your files elsewhere. A great option for hosting images is Flickr.