Global Theme Settings (Portobello)

In your control panel, go to Storefront > Themes, and click the blue "Customize" button to launch Theme Editor. In the left hand column of the Theme Editor, click the panel labelled 'Global Theme Settings'.

One of the special features of the Portobello theme is the ability to have non-linear divisions between sections on pages.

Section Separators

Choose from the following


Straight line linear divisions

Slant to the left

Gradated dividers, all lower on the left and higher on the right

Slant to the right

Gradated dividers, all higher on the left and lower on the right

Slant in random directions

Gradated dividers at different angles


Soft wavy gradated dividers


Pointed peaks and troughs

These will go between every section on each page.

Animate Page Elements

Turn this option on to activate animations on scroll. This subtly slides and fades in elements as you scroll down the page.

Consider how many products you will display if you enable infinite scrolling or set a large number of products to display on your category pages, this module could potentially cause performance issues on older devices and browsers.

We recommend using this feature on smaller catalogs. If you notice any performance issues, disable this feature.


We have curated a collection of type faces for Portobello. The Typography panel allows you to choose heading and body text font families.

From this panel you can configure the font sizes and text, link and icon colors that will be used throughout the site.

In addition to our curated collection, you can also include any font from Google Fonts by enabling the option "Enable Custom Google Fonts". Once enabled, additional text boxes appear in the typography panel to enter a string to define your chosen font and weight.

The custom font string must be structured in the following way:

The service provider must be specified (currently only Google is supported):
followed by the name of the font:
followed by the weight of the font:
For example:

The name of the font can be found by browsing Google Fonts and clicking the desired font. You will see the font name in the address bar after the /specimen/ fragment in the url

Note that you must include the "+" symbols in font names if they exist, i.e.
You may specify multiple weights by comma separating the values, i.e.

Show Payment Method Icons in the Cart

This will show payment methods in the mini cart and cart page, below the checkout buttons.

Price Ranges

If you have set up options that change the price of a product, enable this option to show the range of prices it can be purchased for on the product grid.

Price ranges work on SKUs, not Rules, so to have the range of prices show you need to give your product options a SKU (even if you won't be displaying it on the front end).

Restrict Purchase to Login

Enabling this option will hide prices and add to cart buttons until your customers sign in to the website.


Here you can choose to display or hide the breadcrumb trail on small screens. We recommend hiding them on mobile devices as they can take up a lot of space at the top of the screen if they flow over more than one line.


Show summary in cards

Enabling this option will display a summary, i.e. the first few lines of the post in blog cards.

Show author in cards

If a name is entered in the Author field on blog entries, enabling this option will display it in blog cards.

Blog cards are what's displayed on the home page (if blog is set to display on the home page), and on the blog page (i.e.

Custom CSS

Enable custom store and checkout CSS to add overrides and additional CSS without having to edit your theme files. This allows you to use the master copy of the theme and still benefit from updates.

These files are loaded last so override all built in styles.

Before activating, you will need to create files named    custom.css and checkout.css locally. These correspond to the two options in the settings panel. You will need to upload these files via WebDAV to your store. Inside the Content folder, create a new directory called css, and upload your new CSS files to this location.

Developer custom CSS is an option used by Flair when setting up paid customisations.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.