HiFi is a ground-breaking content management platform. Design beautiful websites with web standards and zero design constraints.

Assumptions:

• We're going to assume that you know at least a little bit about HiFi. Please familiarize yourself with their Documentation before continuing.

1. Create a new page using the “Blog” option (in this tutorial we will call it “Store”)
2. Go to Developer/Custom Fields to create a new fieldset called “Product Settings”
3. Click on “Edit” for “Product Settings” and turn “Applies to self” to “Off” then click “Save Fieldset”
4. Create the following field:

   Field Type:  Text
   Field Label:  Price

   Remember, you can add as many variables as you would like (ie: code, color, size)

5. Under “Related Pages”, choose “Store”, and then click “Save Fieldset”

1. Go to Developer > Themes > DESIRED THEME
2. Add a folder called “url” in the “feed” folder
3. Add a new template file called “store.html” in the “url” folder
4. Add the following code to the “store.html” template file:

<!--EXTEND YOUR TEMPLATE FILE-->
{% extends "inside.html" %} 
 
<!--ADD CONTENT TO SPECIFIED BLOCK-->
{% block main %}
 
        <ul>
	{% for post in items %}
 
	<li>
	<a href="{{ post.url }}" title="{{ post.title }}">
	<img src="{{ post.media[0].url|imagesize({ width:200, height:200, crop:true }) }}"  alt="{{ post.title }}">
	<div>{{ post.title }}</div>
	</a>
	</li>
 
        {% endfor %}
        </ul>
 
{% endblock main %}

This creates an unordered list of products by displaying product image and product name. Each product is linked to product detail page.