Welcome to Bolt affiliate website template’s documentation!¶

This documentation will help you to install Bolt.cm, and our template for affiliate website.

Install the tools¶

Required softwares¶

PHP
MariaDB or MySQL
Nginx

Install the softwares¶

Example on Debian 9 (stretch) :

apt-get --assume-yes install nginx mariadb-server php7.0-cli php7.0-fpm php7.0-mysql php7.0-gd php7.0-xml php7.0-intl php7.0-curl php7.0-zip php7.0-mbstring

Start on boot¶

Make sure that they will start on boot :

systemctl enable mariadb
systemctl enable nginx

Secure your server¶

Type the following command :

mysql_secure_installation

If you have not set a password already, just type enter and say no to change the root password. Otherwise, a password generator can help you : https://lastpass.com/generatepassword.php

And answer the questions as follow (type y for yes and n for no) :

Change the root password? Yes
Remove anonymous users? Yes
Disallow root login remotely? Yes
Remove test database and access to it? Yes
Reload privilege tables now? Yes

Congratulations, you have accomplished a big step.

Install Bolt CM¶

Bolt CMS is not made to serve multiple website, but it does not mean that you cannot install multiple times bolt on the same server. Therefore, this tutorial can be followed as many times as you want on the same server, every website would be installed in parallele.

It has been tested on Debian 9 (stretch)

Create a new database¶

We need a database to store the data of your new website such as your items, categories, the users to admin and edit, ...

The good news is that we have a script for that...

Type the following command to download the script on the server :

wget https://raw.githubusercontent.com/symbiodyssey/bolt-affiliate-template/master/install/createMysqlDataBase.sh

Give it the right to be executed :

chmod +x createMysqlDataBase.sh

Execute it :

./createMysqlDataBase.sh

The script will ask you a few questions :

A name for the new database, we recommand you to use this pattern : if your domain name is example.com set the name as : com_example
The username of the administration of Mysql. normally it is root
The password of this user, you have created it in the previous article, I hope you can remember it.

The script will generate a new user and password for the new database, please remember them as you will need it during the next step (and in the future):

Configure Nginx¶

In this step we are going to tell Nginx, your web server that if someone connects to your website with your domain what the user should be served. The answer is a page generated by Bolt installed in a specific directory. Bolt CMS is made with PHP a script language for the web.

To connect all of those actors, we have a script for you.

This command will download the script :

wget https://raw.githubusercontent.com/symbiodyssey/bolt-affiliate-template/master/install/install-nginx-site.sh

Give it the right to be executed :

chmod +x install-nginx-site.sh

And execute it :

./install-nginx-site.sh

The script will ask you one question, what is your domain name. Use this pattern to answer : example.com

Last step, reload nginx as we have created a new file with this command :

systemctl reload nginx

Install Bolt¶

Final step, if you’re here, congratulations, you overcame the two first monsters, DataBaseZilla and NGinxKong :D

No time to fall asleep as Bolty Krueger is waiting for you to make it a nightmare... But we are here to help you overcome this one as well.

As you would guess, let’s download the script :

wget https://raw.githubusercontent.com/symbiodyssey/bolt-affiliate-template/master/install/install.sh

give it the right to be executed :

chmod +x install.sh

And execute it :

./install.sh

You will be asked a bunch of questions :

Your name, to start with a simple step
The title of your website as it will appear on the top of your website. For instance “Great Border Bridges” if you are specialized in building bridges at country borders.
Your domaine name with this pattern : example.com
Your database name as you have set it, if you have follower our recommandation it should be something like com_example
The username of the database, should be something similar to usr_com_example
The password of this user, unfortunately we don’t know, it has been given you at the beginning of this article
The folder where to install bolt, use /var/www, this is the most common folder and what our script has set for you in the previous step

Hopefully everything will work well for you.

If it is the case you should be able to see something if you access your domain name in your browser.

You can also access access the dashboard by typing :

http://your-domain.com/bolt

Of course, replace your-domain.com by your real domain name.

If it works fine, you can be proud of you, you have overcome the last monster, you have setup an affiliate website. Now you should take a break before editing your website.

Install the template¶

Install extensions¶

To install new extensions please refer to the official documentation : https://docs.bolt.cm/3.4/extensions/introduction#installing-new-extensions

Required extensions¶

Name	Code	Version	Description
Labels	bolt/labels	>=3.08	Used to set the labels inside the template

Recommanded extensions¶

Name	Code	Version	Description
Menu Editor	bolt/labels	>=3.08	Used to set the labels inside the template
SEO	bobdenotter/seo	>=0.14.2	Allow to edit the meta descriptions to improve the ranking
Bolt Forms	bolt/boltforms	>=4.1.9	Create a form to get contacted (for instance)
Google Analytics	bolt/googleanalytics	>=2.0.2	Include Google Analytics
Robots	bolt/robots	>=1.0.1	Generate a robots.txt file
Sitemap	bolt/sitemap	>=2.2.3	Generate a sitemap.xml file to help search engines index the pages
Minify HTML	hellonico/minify-html	>=0.1.2	Minify the HTML output to reduce the size to download (useful for mobiles and slow connections)
Related Content By Tags	xiaohutai/bolt-relatedcontentbytags	>=3.0.1	Show related content by tags on a page

Install the template¶

To install new extensions please refer to the official documentation : https://docs.bolt.cm/3.4/extensions/introduction#installing-new-extensions

The template is available in the Bolt market : https://market.bolt.cm/view/symbiodyssey/affiliatews-theme

You can install it as an extension in Bolt as you do for the plugins. Code :

symbiodyssey/affiliatews-theme

In the dashboard in the menu, go to Configuration (under settings) -> Main configuration

change the theme to :

theme: affiliatews

Before you can use the template you need to configure it : Configure the template

Configure the template¶

The template requires some extensions : Required extensions.

Set the labels¶

In the dashboard in the menu on the left, go to Label translations.

Edit the labels as follow :

Label	EN
details	Details
get-it	Get it
show-more	Show more
related_content	Related content

You can of course change the translation if you want.

Create the Blocks¶

The template uses a few blocks that helps modify some specific elements of the website.

Logo¶

Create a block called Logo with the slug set as /block/logo.

Upload an image that will be visible on the top left corner.

404 Error¶

Create a block called 404 Not found with the slug set as /block/404-not-found.

In the content you can write your own message that will be displayed if a visitor access a page that does not exist.

Website architecture¶

The template offers three different architectures.

Default mode¶

With this architecture you don’t have to configure anything. The pages that you will create will be displayed as cards on the first page and links to see the pages.

How to activate¶

This is the default mode you don’t have to do anything. If you want to come back to this mode, in the dashboard, in the menu on the left go to File management -> view/edit templates -> affiliatews -> theme.yml

Set the variable ws_mode to 1 :

ws_mode: 1

Items and categories¶

This architecture requires more configuration as it is based on personalized content types.

The website is organized with items and categories. An item can belong to zero, one or multiple categories.

It is possible to create different kinds of categories.

The template offers the following categories :

Location
Period
Price

Based on these examples, it’s very easy to create new ones that suit exaclty your needs such as brand, size, color, ...

Moreover, every item can be tagged and a menu per category can be set to show the categories for a very quick and friendly navigation.

Our content types are available on : https://github.com/symbiodyssey/bolt-affiliate-template/tree/master/contentTypes

The official documentation explains how to use content types in Bolt : https://docs.bolt.cm/3.4/contenttypes/intro

With this architecture if a visitor clicks on an item he/she will be directly redirected to an external website of your choice.

How to activate¶

To activate this mode, in the dashboard, in the menu on the left go to File management -> view/edit templates -> affiliatews -> theme.yml

Set the variable ws_mode to 2 :

ws_mode: 2

Items, categories and reviews¶

This architecture is very similar to the previous one except that clicking on a item will lead first to a review page where one can read a long and detailed article about the item.

How to activate¶

In the dashboard, in the menu on the left go to File management -> view/edit templates -> affiliatews -> theme.yml

Set the variable ws_mode to 3 :

ws_mode: 3

Google Analytics¶

First, you need to create a Google Analytics account : https://www.google.com/analytics

The extension “Google Analytics” (bolt/googleanalytics) allows you to link your Google Analytics account. Install it : Required extensions.

Please follow their instructions to set it correctly.

Activate the click events¶

This function is only available for the architecture modes number two and three. For more information, check : Website architecture.

This mode allows you to trigger an event on Google Analytics every time someone clicks on an affiliate link (“Get it” button).

In the dashboard, in the menu on the left go to File management -> view/edit templates -> affiliatews -> theme.yml

Set the variable ws_ga to 1 :

ws_ga: 1

For more information about events : https://support.google.com/analytics/answer/1033068?hl=en

Sub category¶

This function is only available for the architecture modes number two and three (Items, categories and reviews). For more information, check : Website architecture.

This functionality allows you to create a sub category.

Create or reuse a content type as a sub category. Here is an example of a city that will belong to a country :

cities:
    name: Cities
    singular_name: City
    fields:
        title:
            type: text
            required: true
            pattern: "^.{1,45}$"
            class: large
            group: "Location"
        slug:
            type: slug
            uses: [ title ]
        content:
            type: textarea
            height: 150px
            pattern: "^.{1,140}$"
            required: true
        image:
            type: image
            attrib: [alt, title]
            extensions: [ gif, jpg, png ]
            upload: location
    relations:
        countries:
            multiple: true
            order: title
            label: Select zero or more countries
    show_on_dashboard: true
    default_status: published
    record_template: record.twig
    listing_template: listing.twig
    searchable: false
    icon_many: "fa:cubes"
    icon_one: "fa:cube"
    slug: cities

Note the relation to the countries.

Now create or reuse a content type as a category. Here is an example for cities :

countries:
    name: Countries
    singular_name: Country
    fields:
        title:
            type: text
            required: true
            pattern: "^.{1,45}$"
            class: large
            group: "Location"
        slug:
            type: slug
            uses: [ title ]
        content:
            type: textarea
            height: 150px
            pattern: "^.{1,140}$"
            required: true
        image:
            type: image
            attrib: [alt, title]
            extensions: [ gif, jpg, png ]
            upload: location
    show_on_dashboard: true
    default_status: published
    record_template: subcat_record.twig
    listing_template: listing.twig
    searchable: false
    icon_many: "fa:cubes"
    icon_one: "fa:cube"
    slug: countries

Note the use of “subcat_record.twig” that is a twig template to show the sub categories when viewing a city.

Last step, you need to modify the template for your items “item.twig”. Change the related content (it has nothing to do with the chapter Related content but with the relationships) to only show the relations that are items otherwise it would include the category as well.

Change the line :

{% set items = record.related('') %}

To :

{% set items = record.related('items') %}

If your items are not called items anymore, please change accordingly.

Dont forget to modify the relations of your items to link them to your sub category instead of your category.

Edit the website¶

Your affiliate website is served by Bolt CMS which comes with an administration area that allows you to edit your website online in your browser.

Connect to the dashboard¶

First of all, connect to the administration area the address is http://your-domain-name/bolt

After the login, you should arrive on your dashboard similar to the picture above.

Structure of the website¶

On the left of the dashboard you see the menu with a section called “Content” with some of the following elements :

Elements provided by Bolt CMS :

Pages, allows you to manage unique pages on the webpage like “About” or “Contact us”
Entries, could be used to create a blog
Blocks, are used to set specific elements on the page, like a logo, or a banner

Elements provided by the template :

Locations, if your products are related to specific areas you can organize them by locations
Prices, if you want to set price ranges to arrange your products with their price
Periods, if your products are available only in a period of time you can specify them there
Items, all your products and services will be added here

Locations, prices and periods are ways to categorize your products or services. Every item which is a product or a service can belong to zero or more categories even of the same kind. A bottle of Wine can be available in France, Germany and Switzerland . A coat can be bought in Norway or Sweden during winter, etc.

Read Website architecture. To learn more about the categories and content types.

Edit the categories¶

Login and go to the dashboard of your website. The dashboard should look like this :

On the menu on the left you can see the default categories :

Locations
Prices
Periods

List the categories¶

By passing over one of the categories with your mouse a submenu will appear. Click on View [Category] to see a list of the categories.

This is an example of a list of locations :

Add a category¶

Check the previous section to view a list of categories of your choice. Then click on the “New [category]” button on the right.

You will reach a page similar to this illustration :

The form will vary according to the kind of categories.

First tab¶

The first tab allows you to edit the category itself.

The common fields are :

The title, to set the title of the category
The permalink, it is based on the title to provide a unique url to access the imtes belonging to that category. We do not recommand to change it.
Content, a summary of the category, it should not be longer than 140 characters
Image, an illusatration 400x300 pixels. The website might not work or look nice if you don’t provide an picture with the correct size.

Relationships¶

A list of items belonging to that category. To set a relationship go to the relationship tab of the item of your choice. For more info, check the article Edit an item.

Meta¶

Set some extra info about your item such as :

the state (draft, unpublished, published, ...),
when you want it to be published and then unpublished.
the author

Edit an item¶

From the dashboard, click on Items in the menu on the left.

You should reach the item overview page, similar to this illustration :

Add a new item¶

Based on the illustration above, click on the “New Item” button on the top right area.

You should then reach the new item page, similar to the following illustration :

As you can see, there are multiple tabs “Item”, “Relationships”, “Taxonomy” and “Meta”. The tabs could vary according to your configuration.

Item¶

Allows you to edit your new item with the following options :

Title, the title of your product or service
Permalink, the unique link to this item, based on the title.
Price, the price of the item. It’s a text field you can write whaterever you want (25, 25$, 25€, thenty-five dollars, ...)
Content, the description of the product. Like on twitter you have 140 characters to describe your item
Affiliate link, the link to the affiliate page. If a user click on the item tile she will be redirected to this page
Image, an illustration of your product. The default size is 400x300px. We recommand you to use an image editor to resize the picture if needed.

Relationships¶

This is where you can set the categories (location, price, period, ...) of an item. You can set zero or more categories even of the same kind. As you type, suggestions will appear.

The item will be listed in every category that you have chosen.

Taxonomy¶

Edit the tags of an item.

Meta¶

Set a few parameters about the item such as :

The status, if it is published or not
The publication date, if you want to publish it automatically in the future
The “depublication” date if you want to remove the item after a while
The owner of the item

Edit an existing item¶

On the item overview page, click on the item to modify in the list. You will rech the edition page where you can edit the data. Please read the “Add a new item” section above to understand the meaning of the diffirent tabs and fields.

Note: when you click on “Save item”, if there is no error and the item is already published, the new data will be visible instantly.

Delete an item¶

On the item overview page, click on the checkbox of every item that you would like to delete, then on the bottom of the page click on the “Delete” button.

Beware : this will delete complitely and instantly, without option to get the data back.

Edit the menu¶

Log in to the dashboard of your website. In the dashboard, in the menu on the left select “Extras” and then “Menu Editor”

The Menu Editor should look like this :

Categories as submenu¶

If you want to create as sub menu with your categories, click on the “Add field” button corresponding to your menu. In the popup write “Type” as label and the name of the category in small letter and plural. For instance :

Add field to menu item

Don’t forget to save your menu with the button on the top right.

Edit the template¶

In the dashboard, pass over “File Management” and click “View/edit templates” then click on “affiliatews” to edit the affiliate website template.

This picture illustrates what you should see. It may vary according to the version of the template or the configuration of your website.

To change the design of your website, click on “css” and then “design.css”.

You should reach the online editor as on the following picture.

HTML and CSS¶

If you have absolutely no clue about HTML, we recommand you to read this http://www.htmldog.com/guides/html/beginner/

If you have absolutely no clue about CSS, we recommand you to read this http://www.htmldog.com/guides/css/

HTML/CSS colors¶

To understand how a color is represented in css or html, we recommand you to read the colors tutorial on https://www.w3schools.com/colors/default.asp

To easily find an appropriate color and convert it to the html/css code, use an HTML Color picker : http://htmlcolorcodes.com/color-picker/

Change the background color of the header¶

In the online editor, find :

header .title {     background-color: #333;    [...] }

change the code #333 with the color of your choice.

Note : the code #333 might be different. Just change what comes between “background-color:” and ”;”

For instance for a red background color :

header .title {     background-color: #ff0000;    [...] }

Change the links’ color¶

Find or add the following code :

a {     color: #11ee11; }

The HTML color might be different. Replace the HTML color by the color of your choice

Do the same for the following code if you want to change the color when passing over with the mouse :

a:hover {     color: #aaffaa; }

You can add as well if you want to add or remove the underline of the link :

text-decoration: none;

or

text-decoration: underline;

For instance you can add set it this way to remove the underline to a link but add it when passing over with the mouse :

a {     color: #11ee11;     text-decoration: none; }a:hover {     color: #aaffaa;     text-decoration: underline; }

Edit the footer¶

To edit the footer, in the dashboard, in the menu on the left go to File management -> view/edit templates -> affiliatews -> partials -> _footer.twig

You can add or remove a column by adding or removing a block :

<div class="col">
        ...
</div>

Go to http://fontawesome.io/icons/ to find other available icons, for instance if you have an Instagram account :

<a href="https://instagram.com/YOUR-INSTAGRAM-ACCOUNT" target="_blank"><i class="fa fa-instagram"></i> instagram</a>

Please replace https://instagram.com/YOUR-INSTAGRAM-ACCOUNT with your real instagram account.

Find the template on https://github.com/symbiodyssey/bolt-affiliate-template This template belongs to our starter kits : https://starterkits.symbiodyssey.com/kit/affiliate-website Ideate and collaborate on https://symbiodyssey.com

Welcome to Bolt affiliate website template’s documentation!¶

Install the tools¶

Required softwares¶

Install the softwares¶

Start on boot¶

Secure your server¶

Install Bolt CM¶

Create a new database¶

Configure Nginx¶

Install Bolt¶

Install the template¶

Install extensions¶

Required extensions¶

Recommanded extensions¶

Install the template¶

Configure the template¶

Set the labels¶

Create the Blocks¶

Logo¶

Banner¶

404 Error¶

Website architecture¶

Default mode¶

How to activate¶

Items and categories¶

How to activate¶

Items, categories and reviews¶

How to activate¶

Google Analytics¶

Activate the click events¶

Related content¶

Sub category¶

Edit the website¶

Connect to the dashboard¶

Structure of the website¶

Edit the categories¶

List the categories¶

Add a category¶

First tab¶

Relationships¶

Meta¶

Edit an item¶

Add a new item¶

Item¶

Relationships¶

Taxonomy¶

Meta¶

Edit an existing item¶

Delete an item¶

Edit the menu¶

Add a menu item¶

Categories as submenu¶

Edit the template¶

HTML and CSS¶

HTML/CSS colors¶

Change the background color of the header¶

Change the links’ color¶

Edit the footer¶