Follow the steps below to add a custom theme in Blackbell. This article is for advanced users with HTML / CSS understanding.

Step 1: Select a theme

You can get an html theme online or via a digital agency.

Step 2: Edit your html pages locally

Like usual, customize the theme with your content.

Create a page, click edit > advanced > custom styles and then:

Disable Blackbell Style ( see https://d.pr/i/m3GRln )
Add the page header: meta tags, links to stylesheets, custom JS etc. ( see https://d.pr/i/H5dD5Z)

Open the page content tab and create / edit a new or multiple html blocks to paste your code.

You can host assets in your cloud of choice ( FTP server, Dropbox, AWS etc ).

Make sure to link to assets via https.

You can host assets directly in Blackbell, all plans include 4GB of storage in Amazon S3.

You get the ability to select which folder should act as local path source for your html code.

Open the settings GLOBAL CSS or GLOBAL JS to add your settings.

To add a link to another page, use href to page ID and the class : internal-link

example

<a href="/page/32290" class="internal-link"> Link name </a>

You can create buttons or links with custom class to do actions

Open Cart:

<button type="button" class="hc-button open-cart__action">Open Cart</button>

Open Location picker:

<button type="button" class="hc-button open-location-picker__action">Open Location picker</button>

Open sidemenu:

<button type="button" class="hc-button open-side-menu__action">Open Sidemenu</button>

Open login modal:

<button type="button" class="hc-button open-auth-popup__action">Open login modal</button>

Open lang switcher:

<button type="button" class="hc-button open-language-picker__action">Open lang switcher</button>

Open chat panel:

<button type="button" class="hc-button open-chat__action">open chat panel</button>