How to create your own template layout for category page in Shopware 5?

Template Layout For Category Page
Shopware, Shopware 5

Please go through the below link for creating the theme.

Different ways of creating shopware 5 theme ?

To create your own template layout on Shopware 5 category page. Please follow the below steps:

The standard listing usually looks like this:

Step 1: Go to the shopware theme directory of your website.

Step 2: Create a new file in the theme directory called “article_listing_custom.tpl“

File Structure:–

themes>Frontend>Custom>frontend>listing>article_listing_custom.tpl.

Note: Custom directory is theme which I created already.

Step 3: In “article_listing_custom.tpl” file write this code.

{extends file='parent:frontend/listing/index.tpl'}

{* Wrap the content into a new element *}
{block name='frontend_index_content'}
  <div class="custom-listing">
      {$smarty.block.parent}
  </div>
{/block}

{* Make the listing changes *}
{block name='frontend_listing_list_inline'}
  <div class="custom-listing--listing">
     {foreach $sArticles as $sArticle}
        {include file="frontend/listing/product-box/box-custom-basic.tpl" productBoxLayout="custom_basic"}
	 {/foreach}

  </div>
{/block}

Note:-

  • In line 1 We extend the original “index.tpl” file listings.
  • Line 6: We wrap the content with our own class so that we can change it later using CSS.
  • Line 14: Our product box layout is transferred to our own product box file with the content “custom_basic“.

Step 4: Create a new file called “box-custom-basic.tpl” in “product-box” directory.

Step 5: Write this code in “box-custom-basic.tpl” file.

{extends file="parent:frontend/listing/product-box/box-basic.tpl"}

{* Product description *}
{block name='frontend_listing_box_article_description'}
    <div class="product--description">
        {$sArticle.description_long|strip_tags|truncate:200}
    </div>
{/block}

Step 6: Create a new file called “custom-listing.less” in the _modules directory.

File Structure:

themes>Frontend>Custom>frontend>_public>src>less>_modules>custom_listing.less.

Step 7: Write this code in “custom_listing.less” file.

.custom-listing .box--custom_basic{
	width: calc(100% / 3);
}

Step 8: Create another file in less directory called “all.less“

Step 9: Write this code in all.less file.

@import "_modules/custom_listing";

Step 10:  Now Login to the admin panel and go to the Configuration > Customer Streams.

Step 10: Click on the Frontend and go to the categories/lists.

Step 11: In categories / lists. Write “article_listing_custom.tpl: custom_listing; ” in Available listing layouts. And click on the save button.

Step 12: Now go the item>Categories.

Step 13: Select the categories which you want to customize and in Individual layout, select the custom_listing.

Now clear the cache and in frontend check the categories which we selected the individual layout.

Results: We created a 3 column view that will look something like this:

Please contact us at manish@bay20.com or call us at +91-8800519180 for any support related to shopware 5. You can also visit the Shopware 5 development page to check the services we offer.