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.
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):
Google_followed by the name of the font:
Roboto_followed by the weight of the font:
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
Google_Noto+Sans_400You 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.
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. https://www.yourstore.com/blog).
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
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.