Scala is a PandaCommerce theme made to handle a large number of products, optimized for a mobile shopping experience.


If you want to see live examples, check out our demo shops.

The demo shops are currently in Swedish but different language and currency setups are fully supported.

Theme features

The theme was developed with Mobile-First / Responsive design principles and practises. It is targetted for shops containing several thousand products.

Apart from bare bones e-commerce functionality, Scala offers many additional features in order to enhance the shopping experience and increase the customer conversions rate.

  • Mega menu with icons and categories

  • Unique selling points in header

  • Trust images in header and footer

  • Campaign and Featured product banners

  • Blog posts with products

  • Best selling products in collections

  • Advanced product filtering

  • Product vendor linkings

  • Product addons

  • Dropdown ajax cart

  • Cart savings and free shipping levels

  • Product whishlist

  • Product attribute icons

  • Product card info/image overlay

  • Nosto integration for favourite picks

  • Search Engine adaptations and optimizations

Getting started

You can purchase and install the theme from your PandaCommerce account by clicking on the Themes menu and the Find more themes button. Locate Scala in the theme store, select the preset you want to start with and click on Purchase Theme.

The theme preset you select does not really matter as it’s only a default set of colors and settings that are applied. You will need to go through most of the settings to create your own unique look.

When you install a theme there is no demo content as that would risk overwriting your current setup. So it is perfectly normal for a newly installed theme to look empty.

Theme settings overview

Click on the Theme settings link to access the theme files and settings.

Theme settings
The top right (i) symbol opens up an information page where you can locate this manual.
Setting Description


Contains our two presets for this theme

Global settings

Configure favicon, border radius and add extra scripts.


General, Header, Body and Footer color settings


Base and Header font styles


Logotype, Trust section, Quick links, Headers message, Top icons, Main, Header and Mega menu settings


Contains settings for the visible elements on the frontpage (index page). Slideshow, Campaign images, Featured links, Collection rows, Blog, Vendors list, Content (page) settings.


Settings for the products view such as image zoom, quantity selector, sticky sidebar, related products toggles, Barcode title, delivery time tag settings and a default product image (missing image) setting.

Product badges

Settings for product badges shown on the product pages. Used for uploading glyph (small images) and configuring tags such as #organic, #rohs.

Product card

Settings that affect the product card in collections. Show additional info on hover or show next image on hover.

Ribbon image

Settings for product ribbon tags and images such as On sale, New, Recommended.


Enable bestselling products, collection filter settings, number of products before pagination.


Dropdown cart settings, show savings, personal message and free shipping level setting.

Social media

Settings for social media sharing on Facebook, Twitter, Pinterest and Google+, and Blog Atom/RSS feed setting.


Settings for shop brands with logo, name, description and link to the vendor site.

Bottom banner

Bottom page banner for mobile and desktop devices.

Cookie consent

Settings for enabling cookie consent, settings color, text and position.


Footer and social media links, Newletter form, Checklist, Support area and Trust image, and Klarna tooltip settings.


Color settings for the FAQ page.


Nosto integration settings

Mega menu

The Mega menu is the main navigation for locating products in the shop. It is able to show several hundred links grouped under sections and categories.

Mega Menu

You need to prepare three things before a working Mega menu is in place.

  • Have products in your shop

  • Setup collections (categories) with products

  • Create Navigation link lists

The above bullets are basic store setup that is required regardless of theme.

The link list in the Navigation needs to be two levels deep for the mega menu to work properly.

NavigationParent link listChild link listSibling link list

Where the Parent contains links to Childs with Titles and Icons shown on the leftmost side. The Sibling link lists contains links to your collections (or individual products) that you want to link to.

Set the name of the sibling to the collection (category) name and you get an link item at the bottom with a See all …​ link.

How to conect the Mega menu to the navigation

  1. Open the Theme Settings→Header topic

  2. Scroll down to the Mega Menu section

  3. Select a linklist (parent) that you want to use

  4. Assign a title for the dropdown button.

How to setup navigation items and categories

Product badges

Tag system

Scala makes use of special tags for activating additional features.

  • '%'-prefix is used for delivery terms

  • '+'-prefix is used for product addons

  • '#'-prefix is used for product badges

Delivery terms

Delivery terms is information that is shown on the product card and product view that reflects your terms of delivery on the product i.e delivery time.

Delivery terms example

On the example above you see the terms in green color specifying the expected delivery time. This information is shown on product cards and on the product views.

To enable this feature you need to setup the Product devliery time (or terms) under Theme settings→Products.

Setup delivery tags
Your delivery terms tag can be whatever text you like, however in multishop scenarios you need to use a keyword that can be localized.

After you have configured your tags you set them on your products in Panda Admin→Products.

Setting a delivery tag on the Product

Product addons

Using product addons is a handy way of associating products with each other. This feature also work with blog posts so that you can connect products to your posts, efficient for content marketing purposes.

Product Addons example

In the example above you can see two addon products on the bottom right. Now if a customer tick the addon products and adds the main product to the cart the addons are included too.

To enable this feature you first need to lookup the addon products handle.

You’ll find the handle almost at the bottom of the product page in Panda Admin→Products.

Product handle

Then copy the handle from the URL & Handle field, you’ll need this later to tag the main product (or blog post).

After that go to the product you want to attach an addon to in Panda Admin→Products. Finally tag the product with the addon handle starting with a plus +. Example: +organic-lip-balm-sweet-7g.

Addon tag
Use one or more addon tags in blog posts to link products on the post.

Product badges

Product badges allows you to assign attributes (icons) to products such as Organic, Fair Trade.

Product badges overview

In the figure above, on the left side you see the Theme settings for Product badges. On the Right side you see how the badges can look on a product page in your store.

You need to upload your own badge images and badges must be configured with a matching tag name and image + text in the Theme settings.

To add a badge to one or more products

  1. Go to Theme Settings.

  2. Select Product badges

  3. Click the Add Badge Image button and upload a (small) image file.

  4. Choose a Badge tag name with the name of the tag to add to products.

  5. You may also add an optional description text that is shown under the image.

  6. Tag products with the Badge tag name and a glyph will be shown under the "Add to cart" button.

If you want to add more images, just repeat step 3-5

Product ribbons

Product ribbons are used for displaying an overlay on the product picture. It can be used for marking products that are on sale, new or recommended.

Product ribbon example

In the example above you can see products marked as campaign products.

To setup product ribbons go to the Theme Settings→Ribbon image topic.

Product ribbon images

Upload your ribbon images and configure the tag names that match the ribbon image i.e set tag-name campaign for a #campaign product tag.

After you have setup the ribbons you can start tagging products in Panda Admin→products.

Use the Action feature in Panda→Products with Filters to narrow your search results, then you can bulk tag many products at once.


To get the latest features and fixes you can sync the Theme files with our latest updates by clicking on the Template Editor link in Panda→Themes and then the Sync button at the top right side. It opens a popup window where you keep all the "Exclude files" checked and import the update by clicking on the Sync button at the bottom right.

Syncing a theme overwrites any local changes you have made on the theme files. Use the file archive feature on a file to restore your older saves.


The current version you have installed is specified in the settings.json file. You can see the content of the file using the Template Editor opening the configfolder and clicking on the settings file. In there you can see a version number. Example "version": "0.1.11".

More help ?

For additional support or questions contact our support by email, we usually respond within the same day.