Unleash the Full Potential of Your PrestaShop Store

Welcome to MyPresta.eu – Your reliable partner in the e-commerce world. Find innovative modules that will take your business to a new level.

How to remove main category image

Question:

Hello,

i've got question related to theme modificaitons. I use default-bootstrap template in PrestaShop 1.6. On category page you can find wide cover image. I wonder how i can remove that category image in prestashop? Any suggestions?

PrestaShop expert answer

Hello,

You can achieve it in two ways. First - with .tpl file modifications, second with css only. I will describe both of them here. below I attach the screenshot of category page. We will remove this dark rectangle with "Women" description and image.

category page prestashop

 

 

1. modification of .tpl file

category.tpl open this file - it is located in your theme directory, path to this file looks like (for default bootstrap template): /themes/default-bootstrap/category.tpl. near line 28 you can find code like below, remove it and save changes. Your category image will disappear. If you dont see changes after file change - you have to clear shop cache

 

{if $scenes || $category->description || $category->id_image}
			<div class="content_scene_cat">
            	 {if $scenes}
                 	<div class="content_scene">
                        <!-- Scenes -->
                        {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
                        {if $category->description}
                            <div class="cat_desc rte">
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short">{$description_short}</div>
                                <div id="category_description_full" class="unvisible">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div>{$category->description}</div>
                            {/if}
                            </div>
                        {/if}
                    </div>
				{else}
                    <!-- Category image -->
                    <div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; background-size:cover; min-height:{$categorySize.height}px;"{/if}>
                        {if $category->description}
                            <div class="cat_desc">
                            <span class="category-name">
                                {strip}
                                    {$category->name|escape:'html':'UTF-8'}
                                    {if isset($categoryNameComplement)}
                                        {$categoryNameComplement|escape:'html':'UTF-8'}
                                    {/if}
                                {/strip}
                            </span>
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte">{$category->description}</div>
                            {/if}
                            </div>
                        {/if}
                     </div>
                  {/if}
            </div>
		{/if}

 

2. Hide category image with css styles

To hide mentoned category block (wide image + descriptions) with css styles, you have to alter global.css or category.css file. Both of these files you can find in your theme directory. At the end of the file paste code:

.content_scene_cat {display:none!important;}

After changes please save file and clear browser cache (your browser remembers old .css files so you will not see changes). After that category block will disappear.

author Milosz Myszczuk

Answer prepared by Miłosz Myszczuk, PrestaShop expert and official PrestaShop community moderator. Read more about VEKIA.

Comments