Month: June 2022

How to Add Sub-Category Pages – Magento 1

On By DrewIn MagentoLeave a comment

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)

For a new sport category, click “”NWS UK” and then “+ Add Subcategory”

First Tab – if the H1 is too long for the menu – populate Category Name and Category Heading differently

eg.

First Tab – General Information

– is main tab to fill in –
URL Key, meta title, page title (name), meta description

– “Include in Navigation Menu” – “NO”

Second Tab – General

Define Filter menu for left of page
“Filter Select Mode”
– Enable Selected Filters 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!

  • Double check – “NO” in “include in menu”
  • Check added category products – not related products

For personal reference

Remember to keep on “All Store VIews” when adding to es and de too

Responsive Images with Inline CSS

On By DrewIn Adobe Illustrator, Business, marketingLeave a comment

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>

Here’s another example that I used today (july 2023!)

  <img src="drews-sexy-image.jpg"  style="width:1000px; max-width: 100%; height: auto; padding-top:25px;" alt="Basketball hoop dimensions" />

In the code above^ – the image will be 1000px wide on desktop, and the width of the screen on smaller devices

Padding-top, just puts some white space above the image

By the way – when you set image sizes to % – this represents the % of the block that the image is contained within