Adding logos to category pages in Shop-Script 5 storefront

To add a logo to the category-viewing page in the storefront, we shall use custom parameters which you can enter in the corresponding text area in the category settings dialog. As an example, we shall add a parameter named image as shown in the picture below:

The value of this parameter is the name of the category logo file which should appear in the category page.

Prepare an image file with the same name and upload it to your server. It is convenient to do so by using the "Files" section of the "Site" application. Create a subdirectory for category logos and upload your logo file to that directory. Copy the path to the logo image directory.

Now you need to modify the category page template to make the category logo appear in the storefront. To do so, open the design editor, click on the category.html template name, add an <img> tag; e.g., as shown in the picture below, and save the template.

In the above example, /wa-data/public/site/img/shop/categories/ is the path to the directory with the uploaded category image file and {$category.params.image} is the variable containing the value of custom parameter image which you have added in the category settings dialog.

If you do not want to upload (and display) logos for all product categories then you need to add a condition to the above example which will display logos only for categories with specified image name:

{if $category.params.image}
<img src="/wa-data/public/site/img/shop/categories/{$category.params.image}" />
{/if}