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.

1. Add a sub-folder called “url” under Page > Post
2. Add a new template file called “store.html” in the “url” folder
3. Add the following code to the “store.html” template file:

<!--EXTEND YOUR TEMPLATE FILE-->
{% extends "detail.html" %} 
 
<!--ADD CONTENT TO SPECIFIED BLOCK-->
{% block main %}
 
     <!--PRODUCT IMAGE-->
     <img class="product_image" src="{{ this.media[0].url|imagesize({ width:190, height:190, crop:true }) }}"  alt="{{ this.title }}">     
 
     <!--PRODUCT NAME-->
     <h1 class="product_name">{{ this.title }}</h1>
 
     <!--PRODUCT PRICE-->
     <div class="product_price">${{ this.custom.product_settings.price }}</div>
 
     <!--PRODUCT CONTENT-->
     <div class="product_detail">{{ this.content }}</div>
 
     <!--ADD TO CART LINK-->
     <a href="https://YOURSTORE.foxycart.com/cart?name={{ this.title }}&price={{ this.custom.product_settings.price }}&category={% for cat in hifi.get({type: 'category', count: 1, orderBy: 'title'}) %}{{ cat.title }}{% endfor %}">Add To Cart</a>
 
{% endblock main %}