Home /
Expert System /
Highlighted Categories

Highlighted Categories

Smart Catalog: single category block

There are 7 layouts for highlighted categories.

4 banners
Banners
Subcategory
Combination of the banner (slider) and the single product
Combination of the banner (slider) and the subcategories list
Combination of the banner (slider) and highlighted products
Highlighted links

4 banners

Go to Catalog --> Manage Categories. Edit category in the Magento admin panel. Add the following code to the "Description" field.

<div class="four i_images clearfix">
  <div class="b01"><a class="title" href="#" title=""><strong>Title</strong><span><img src="/media/template/magento_template01.jpg" alt=""></span></a>
    <ul>
      <li><a href="#" title="">Link</a></li>
      <li><a href="#" title="">Link</a></li>
      <li><a href="#" title="">Link</a></li>
      <li><a href="#" title="">Link</a></li>
    </ul>
  </div>
  <div class="b02"><a class="title" href="#" title=""><strong>Title</strong><span><img src="/media/template/magento_template02.jpg" alt=""></span></a>
    <ul>
     <li><a href="#" title="">Link</a></li>
      <li><a href="#" title="">Link</a></li>
      <li><a href="#" title="">Link</a></li>
      <li><a href="#" title="">Link</a></li>
    </ul>
  </div>
  <div class="b03"><a class="title" href="#" title=""><strong>Title</strong><span><img src="/media/template/magento_template03.jpg" alt=""></span></a>
    <ul>
      <li><a href="#" title="">Link</a></li>
      <li><a href="#" title="">Link</a></li>
      <li><a href="#" title="">Link</a></li>
      <li><a href="#" title="">Link</a></li>
    </ul>
  </div>
  <div class="b04"><a class="title" href="#" title=""><strong>Title</strong><span><img src="/media/template/magento_template04.jpg" alt=""></span></a>
    <p>FullWidth is a Magento theme specifically designed for sell clothing, shoes, jewelry, accessories.</p>
    <p><a class="more" href="#">More Info »</a></p>
  </div>
</div>

Banners

Please see:How to attach static block to the category

<ul class="categories_list">
   <li>
    <div><img src="https://web-experiment.info/media/"template/cat01.jpg"" alt="" /> <a href="#">
      <h3>Title</h3>
      </a> </div>
  </li>
  <li>
    <div><img src="https://web-experiment.info/media/"template/cat02.jpg"" alt="" /> <a href="#">
      <h3>Title</h3>
      </a> </div>
  </li>
  <li>
    <div><img src="https://web-experiment.info/media/"template/cat03.jpg"" alt="" /> <a href="#">
      <h3>Title</h3>
      </a> </div>
  </li>
  <li>
    <div><img src="https://web-experiment.info/media/"template/cat04.jpg"" alt="" /> <a href="#">
      <h3>Title</h3>
      </a> </div>
  </li>
  <li>
    <div><img src="https://web-experiment.info/media/"template/cat05.jpg"" alt="" /> <a href="#">
      <h3>Title</h3>
      </a> </div>
  </li>
  <li>
    <div><img src="https://web-experiment.info/media/"template/cat06.jpg"" alt="" /> <a href="#">
      <h3>Title</h3>
      </a> </div>
  </li>
  <li>
    <div><img src="https://web-experiment.info/media/"template/cat07.jpg"" alt="" /> <a href="#">
      <h3>Title</h3>
      </a> </div>
  </li>
</ul>
<script type="text/javascript">new SmartColumnsList('ul.categories_list', 200);</script>

Subcategory

Please see:How to attach static block to the category

For example

Combination of the banner (slider) and the single product

Please see:How to attach static block to the category

For example

Combination of the banner (slider) and the subcategories list

Please see:How to attach static block to the category

Combination of the banner (slider) and highlighted products

Please see:How to attach static block to the category

For example

Highlighted links

Go to Catalog --> Manage Categories. Edit category in Magento admin panel. Add the following code to the "Description" field.

<div class="four_banners">
  <div class="four_banners_bt clearfix">
    <div class="b01"><a class="title" href="#">Title</a> </a>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
    <div class="b02"><a class="title" href="#">Title</a>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
    <div class="b03"><a class="title" href="#">Title</a>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
    <div class="b04"><a class="title" href="#">Title</a>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</div>

This is a guide on how to display highlighted categories in the Full-width responsive Magento template.

Full-width is a responsive Magento template with advanced admin module and various layouts for highlighted categories. Design of this Magento theme is intuitive and simple, making it easy for any visitors to find their way around your store. Show off your goods with this easy-to-customize and fully featured full-width theme.

Go to contents Back to previous page

Tags:

Share on Facebook google icon

Share on Google

Twitter