Danh mục sản phẩm bên trái aspp dụng cho trang chủ cũng được

<div class="hot-product">
            <h4 class="title-right">collections[settings.sidebar-right1].name</h4>
            {% for product in collections[settings.sidebar-right1].products limit:4 %}
            <div class="media right-p">
              <div class="media-left media-middle">
                <a href="{{product.url}}">
                  <img class="media-object" src="{{product.featured_image.src }}" alt="..." width="100px" height="100px">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">{{ product.name }}</h4>
                  <div class="arr-content1">          
                    {% if product.available %}
                    {% if product.compare_at_price_min > product.price_min %}
                    <ul>
                        <li><span class="high-price">{{ product.compare_at_price_max | money }}</span></li>
                        <li><span class="low-price">{{ product.price_min | money }}</span></li>
                        <span class="phantramgia">-{{ product.compare_at_price_min | minus: product.price | times: 100 | divided_by: product.compare_at_price_min | round: 0 }}%</span>
                    </ul>
                    {% else %}
                    <ul>
                        <li><span class="low-price">{{ product.price | money }}</span></li>
                    </ul>
                    {% endif %}
                    {% else %}
                    <ul>
                        <li><span class="low-price">Hết hàng</span></li>
                    </ul>
                    {% endif %}
                </div>
              </div>
            </div>
            {% endfor %}
        </div>

II. CSS


.hot-product {
    padding: 10px;
    margin: 20px 0;
    border: 1px solid #ddd;
    background: #fafafa;
}
h4.title-right {
    margin: 0;
    border-bottom: 1px solid #ddd;
    padding: 0 0 10px;
    position: relative;
    font-size: 15px;
    color: #8E070F;
}h4.title-right:after {
    height: 3px;
    width: 100%;
    background: #8E070F;
    position: absolute;
    content: "";
    bottom: -1px;
    left: 0;
}.media.right-p {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    position: relative;
}.media-left {
    float: left;
    margin-right: 10px;
}.media, .media-body {
    overflow: hidden;
    zoom: 1;
}.media-object {
    display: block;
}.media.right-p h4.media-heading {
    font-size: 11px;
}
.media-heading {
    margin: 0 0 5px;
}span.phantramgia {
    position: absolute;
    top: 0;
    right: 1px;
    width: 40px;
    height: 40px;
    background: rgba(255,102,51,0.6);
    text-align: center;
    line-height: 39px;
    border-radius: 90%;
    color: #fff;
    font-size: 12px;
}span.low-price {
    color: red;
    font-size: 17px;
}span.high-price {
    text-decoration: line-through;
}
III. Seting
{
        "name":"Danh mục sản phẩm hiển thị bên phải",
        "settings":[
            {
                "type":"text",
                "id":"sidebar-right1",
                "label":"Chọn danh mục sản phẩm đầu tiên"
            }
        ]
    },