Creating Category Pages in Magento 2.3
How to create a Category Page in Magento using Blocks make sure you check the other article Magento 2.3 Development Basics, for a recap.
WARNING THE CODE EXAMPLES MAKE SURE YOU REPLACE THE QUOTES “
The Category page is structure as
[Magento CMS Block]
[Product Grid]
You can only add one CMS Block then Magento spits out a product Grid in the bottom so what we need to do is to create a main block that contains other blocks.
If you go to Admin Panel Catalog -> Categories and in the sidebar you select a category and expand Content and under Add CMS Block Select a Block this is where you will select the block we will create next then go to Display Settings and under Display Mode make sure it says Static Block and Products.
Go to Admin Panel > Content -> Blocks -> Click on Add New Block Button
Name it the category name Landing Page example would be “Hot Tubs Landing Page”
Identifier should be hot-tubs-LP
and then click Show / Hide Editor and you can now add other Blocks with this shortcode.
{{block class=”Magento\\Cms\\Block\\Block” block_id=”blockID”}}
The block_id is the Identifier name so you can just keep adding this shortcodes to keep adding blocks to create your page so an example would be like this.
{{block class=”Magento\\Cms\\Block\\Block” block_id=”hottubs-hero”}}
{{block class=”Magento\\Cms\\Block\\Block” block_id=”hottubs-bspots”}}
{{block class=”Magento\\Cms\\Block\\Block” block_id=”hottubs-middle-content”}}
{{block class=”Magento\\Cms\\Block\\Block” block_id=”hottubs-last-content”}}
and hit save.
This means this block will bring in all this other blocks that you need to create and make sure the Identifier matches so when you create the Hero Block make sure the block ID is the same as your main block shortcode says.
When Creating other blocks you can just add HTML in there for now so its easier for everything to edit. once that is done make sure you go back to the category settings under catalog and add your block.
Upload Images to magento thru the WYSIWYG Editor
Then add this shortcode where you need it
{{media url=’wysiwyg/traditional.jpg’}}
And example would be like this
<img src=”{{media url=’wysiwyg/traditional.jpg’}}” alt=”Traditional”>
Keep wysiwyg/ and change the name to your image name with the extension.
Create a master block by going to Content > Blocks > Add New Block Name it CategoryName Landing Page
Got to Catalog > Categories > Select the Category in the sidebar under content Add CMS Block and select the master block you created. Under Design make sure the Layout is Watkins Category.
Now back to Content > Block and Add New Blocks and make sure you copy the Identifier once those blocks are created edit the Master Block you created at the beginning and add them with the short code
{{block class=”Magento\\Cms\\Block\\Block” block_id=”blockID”}}