Home /
Expert System /
Layouts for a category presentation

Layouts for a category presentation

There are 5 layouts for display highlight categories.

Banners and links

<ul class="categories_list">
<div class="four i_images clearfix">
  <div class="b01"><a class="title" href="#" title=""><strong>Home Textile</strong> <span><img src="https://web-experiment.info/media/"template/green_magento_template01.jpg"" alt="" /></span></a>
    <ul>
      <li><a href="#">Living room</a></li>
      <li><a href="#">Kitchen</a></li>
      <li><a href="#">Bathroom</a></li>
      <li><a href="#">Bedroom</a></li>
    </ul>
  </div>
  <div class="b02"><a class="title" href="#"><strong>Gardening</strong><span><img src="https://web-experiment.info/media/"template/green_magento_template02.jpg"" alt="" /></span></a>
    <ul>
      <li><a href="#">Garden Furniture</a></li>
      <li><a href="#">Landscaping Materials</a></li>
      <li><a href="#">Garden Buildings</a></li>
      <li><a href="#">Hydroponics</a></li>
    </ul>
  </div>
  <div class="b03"><a class="title" href="#"><strong>Home DECOR</strong><span><img src="https://web-experiment.info/media/"template/green_magento_template03.jpg"" alt="" /></span></a>
    <ul>
      <li><a href="#">Mirrors</a></li>
      <li><a href="#">Wall Decor</a></li>
      <li><a href="#">Living room</a></li>
      <li><a href="#">Sale</a></li>
    </ul>
  </div>
  <div class="b04"><a class="title" href="#"><strong>Outdoor Living</strong><span><img src="https://web-experiment.info/media/"template/green_magento_template04.jpg"" alt="" /></span></a>
    <p>Find your outdoor design here!</p>
    <ul>
      <li><a href="#">Hammocks and Umbrellas</a></li>
      <li><a href="#">Outdoor Furniture</a></li>
    </ul>
  </div>
</div>

Note. Image size must be 280px (width)* 200px (height).

Category layout with product name and price

Available options: column count: from 2 to 7; image size: from 95px to 350 pixels.

Column count: 2; image size:up to 350 (pixels)
Column count: 3; image size:up to 230 (pixels)
Column count: 4; image size:up to 175 (pixels)
Column count: 5; image size:up to 135 (pixels)
Column count: 6; image size:up to 110 (pixels)
Column count: 7; image size:up to 95 (pixels)

Do not forget to replace "WIDTH", "HEIGHT" and "ID" (with the ID of one of the created categories).

How to fill example

Category layout with product name, price, rating and add-to-cart button

Available options: column count: from 2 to 7; image size: from 95px to 350 pixels.

Column count: 2; image size:up to 350 (pixels)
Column count: 3; image size:up to 230 (pixels)
Column count: 4; image size:up to 175 (pixels)
Column count: 5; image size:up to 135 (pixels)
Column count: 6; image size:up to 110 (pixels)
Column count: 7; image size:up to 95 (pixels)

Do not forget to replace "WIDTH", "HEIGHT" and "ID" (with the ID of one of the created categories).

How to fill example

Category layout with product name, price, rating, add-to-cart button, add-to-wishlist, add-to-compare

Available options: column count: from 2 to 7; image size: from 95px to 350 pixels.

Column count: 2; image size:up to 350 (pixels)
Column count: 3; image size:up to 230 (pixels)
Column count: 4; image size:up to 175 (pixels)
Column count: 5; image size:up to 135 (pixels)
Column count: 6; image size:up to 110 (pixels)
Column count: 7; image size:up to 95 (pixels)

Do not forget to replace "WIDTH", "HEIGHT" and "ID" (with the ID of one of the created categories).

How to fill example

3 banners

Image size = 319px (width)* 155px (height). Visible area = from 253px*125px (1024 screen resolution) to 308px*125px (max screen resolution)

Go to contents Back to previous page

Share on Facebook google icon

Share on Google

Twitter