[ Shopify ] : Walk the themes

#1. Login to the shopify admin site, http://shop.myshopify.com/admin

#2. To the right top corner you can find the Themes drop down. Themes settings , Template editor are the handy controls for working with shopify themes.

#3. THEME SETTINGS

Basically, this is generated from the settings.html in the config folder of themes. If you peak in to the settings.html in the config folder , what you would find is a set of fieldsets with form elements. For eg:-

Homepage

Custom Header Image	Disabled Enabled
Header Image
Hero Image

<fieldset>
<legend>Homepage</legend>
<table>
<tr>
<th><label for=”header”>Header Image</label></th>
<td>
<select name=”header” id=”header”>
<option value=”disabled” selected=”selected”>Disabled</option>
<option value=”enabled”>Enabled</option>
</select>
</td>
</tr>
<tr>
<th><label for=”header_file”> Header Image</label></th>
<td><input type=”file” name=”header.gif” id=”header_file” data-max-width=”292″ data-max-height=”75″ /></td>
</tr>
<tr>
<th><label for=”header_file”>Hero Image</label></th>
<td><input type=”file” name=”header_hero.jpg” id=”header_file” data-max-width=”1000″ data-max-height=”355″ /></td>
</tr>
</table>
</fieldset>

#4. TEMPLATE EDITOR

a.Templates can be exported and imported. The theme has a default structure with few folders. Note that assets folder contains all the theme specific javascripts, images, styles. Import is done with a zipped format of the structure.Layout is the main container file.

Import and Export feature

b.Template section shows the standard functional blocks of shopify from the theme – navigational element perspective.

Templates and Snippets

Snippets is a very handy useful concept to get a extended functional block developed.

c. Theme related assets can be added or managed from here as shown in below. CSS files overridden or new images or styles added , or new liquid files are added from here and the editor gives support to work onsite itself easily.You can see the asset upload section at the bottom of the asset section.

Also notice the preset settings file which is none other than the theme settings file.

Assets and Preset section

Must know the following stuffs while you work with theme or liquid files.

1. Understanding the of theme structure.

2. Liquid Templating Engine

3. Use of snippets, settings.html and layout.

To know more: Read: Know Basics of theme ,  Tool to assist shopify theme development , Theme Store

 

Advertisement