REC & REC+

2 Column Layout

store.product.tpl:

<div class="pcl-product-each" data-product-id="{{ product.id }}">
    <a class="pcl-product-each-image-container" href="{{ product.link }}">

        <img class="pcl-product-each-image" src="{{ product.image }}" alt="{{ product.name }}">

        {# banner #}
        {% if product.has_banner %}
            <canvas width="120" height="120" id="banner_canvas_{{ product.id }}" class="pcl-product-banner-canvas"></canvas>
            <span style="display:none;" id="hidden_banner_text_{{ product.id }}">{{ product.banner_text }}</span>
        {% endif %}

    </a>
    <div class="pcl-product-each-content">

        <h3>{{ product.name }} <small>- {{ product.code }}</small></h3>

        <p>{{ product.short_desc }}</p>

        <div class="pcl-product-details">
            <div>
                {% if product.is_in_stock %}
                <span class="pcl-product-in-stock">In Stock</span>
                {% else %}
                <span class="pcl-product-out-of-stock">Out of Stock</span>
                {% endif %}
            </div>
            <div class="plc-product-price">
                {{ currency }}{{ product.price }}
            </div>
            <div>
                {% if product.is_in_stock and not product.has_options %}
                    <a class="pcl-product-each-link" href="{{ product.link }}" onclick="update_cart_content({{ product.id }}, 1, 'direct'); return false;">Add To Cart</a>
                {% else %}
                    <a class="pcl-product-each-link" href="{{ product.link }}">More Details</a>
                {% endif %}
            </div>
        </div>

    </div>
</div>
{{ product.banner_init_script }} 

style.product_category_layout.css:

/*
    Media Object
    http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
*/

.media-object { margin: 10px; }
.media-object,
.media-object-bd { overflow: hidden; _overflow: visible; zoom: 1; }
.media-object .media-object-img { float:left; margin-right: 10px; }
.media-object .media-object-img img { display:block;}
.media-object .media-object-imgExt { float:right; margin-left: 10px; }

/*
    Product & Category styling
*/

.pcl-product-each {
    width: 48%;
    float: left;
    min-height: 300px;
    padding: 1%;
}
.pcl-category-each {
    width: 25%;
    float: left;
    text-align: center;
    min-height: 280px;
}

.pcl-product-each-image-container,
.pcl-category-each-image-container { width: 200px; position: relative; }

.pcl-product-each-image,
.pcl-category-each-image { max-width: 100%; margin: 0 auto; }

.pcl-product-each-link,
.pcl-category-each-link {
    background: rgba(0, 0, 0, 0.1);
    padding: 5px 10px;
    display: inline-block;
}

.pcl-product-each-link:hover,
.pcl-category-each-link:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* banner */
.pcl-product-banner-canvas {
     position: absolute;
     top: 0px;
     left: 0px;
     cursor: hand;
     cursor: pointer;
}

/* product stock */
.pcl-product-in-stock { font-weight: bold; color: #018301; }
.pcl-product-out-of-stock { color: #B00; font-style: italic; }


/* product details -> price, stock, action button */
.pcl-product-details {
}
.pcl-product-details > div {
    width: 31%;
    padding: 1%;
    text-align: center;
    float: left;
}
.pcl-product-details > div:first-child {
    border-left: none;
    text-align: left;
}
.pcl-product-details > div:last-child {
    text-align: right;
}
.plc-product-price {
    font-size: 14px;
}

.pcl-product-each-link {
    text-align: center;
}