How to Add Sub-Category Pages – Magento 1

This is a post to remind me how to add sub-category pages on a specific e-commerce site, but most of the instructions are universal to M1

Go to Catalog – Manage categories

  • Leave on “All Store Views”
  • Click into folder you want to put a sub-category
  • Press “Collapse All” at the top to keep folders tidy
  • Highlight the Category/Folder you want to add the new sub-category into
  • Click the “+ Add SubCategory” button (blue)
  • First Tab – General Information – is main tab to fill in – add url, meta title, page title, meta description
    – “Include in Navigation Menu” – “NO”
  • Second Tab – General

Define Filter menu for left of page
“Filter Select Mode”
– Enable with the drop down menu

  • Add “price” as a filter
  • Add anything else relevant

  • “Display Settings” Tab

-Products only

  • Is Anchor – “Yes”
  • Make a note of ID Number of sub cat.

“Category Products” Tab

  • Add with product ID or search by name – then tick checkbox on left
  • Position – uses box on the right. Add in tens – 10, 20, 30, not 1,2,3*

    *This makes it easier to add new products in order. If you order everything 1,2,3,4 etc, then you have to change all the order numbers when you add in a new product. Whereas if you order them 10,20,30, then you can add a new product with an order number of 15 and it will sit 2nd.

!Don’t drag the category folders into other folders!

  • Remember to enable the new Sub-category on the first tab when it’s ready!

Responsive Images with Inline CSS

This is how I create images that are full width in desktop devices and mobiles etc.

You just need to use:

max-width: 100%;
height: auto;

Good info here on W3 Schools


      
            <img src="image-address.png" 
style="max-width: 100%; margin-bottom:0; max-width:1000px; height: auto;"
         alt="relevant description of image" >
 

Change the “max-width” to whatever you want the max width of the image to be on a desktop device.

For personal reference, this is the exact code I need for my own website with pre-built classes:

 <div style= "margin-bottom:20px;" > 
      <div class="content-item">
            <img src="image-url" style="max-width: 100%; margin-bottom:0; max-width:1000px; height: auto;"
         alt="relevant description of image" >
      </div>
  </div>