Documentation for the ePages Freedom Theme

Important notes before you start
Step 1: Import the new theme
Step 2: Take care of some adjustments
- Adjust the header
- Adjust teaser images
Step 3: Activate the theme
Appendix

Important notes before you start

Some changes will directly affect your online shop!
We recommend you to set up the theme during a time where you do not expect many visitors in your shop (e.g. at night). The set up takes about 1 to 2 hours.

Did you already create a backup copy?
If you already use another theme, then create a backup of the currently active theme and of the current home page content before you install the new theme:

How to create a backup copy of the currently active theme
How to create a backup copy of the active home page content

The options for customisation are limited. Please note that any changes made that are not mentioned in this documentation are done on your own behalf.
Please make sure that your shop meets all the requirements that are listed for each theme in the Theme Store.
The themes design displays six products on the home page. Products can be assigned or removed from the home page under Content / Categories >> Datasheet view >> Products.
To change fonts and colours, you can use the Quick design in the administration area without limitations.
Changes in the position of page elements (e.g. the search field) as well as adding new ones is possible but not recommended, since the exact positioning can't be guaranteed.
The basket icon cannot be changed.

Step 1: Import the new theme

In the administration area in the main menu, select Design and then My themes.
Scroll down to the bottom and select Import theme.

Be aware that the next steps will overwrite your current home page content!
This can be text, images or other content on the start page that is displayed in addition to the product listings.

To save a backup copy of your content, please follow these steps before you move on to step 3 and 4.

Select the button Select file… and open the folder where you unpacked the file we sent to you. Then select the theme file – e.g. example.theme.zip. Select the checkbox Overwrite the start page during import.
Select Import.
If the import was successful, you will find the theme listed on the bottom of the My themes page.

Congratulations!

Did you know you can adjust your theme before activating it?

In order to give you more preparation time, we recommend making adjustments before the activation of the new theme. Simply follow the next steps carefully to ensure that the theme is installed properly before you activate it in your shop.

Step 2: Take care of some adjustments

Even though the theme comes ready-to-use, some adjustments are necessary when switching to a new design – for example exchanging the theme’s placeholder images with your own images.

Adjust the header

In order to exchange the placeholder in the header area, you need to provide a header image. We recommend a size of 2000px x 1200px.

How to exchange the header image

In the administration area in the main menu, select Design and then My themes.
Find your imported theme and select Start advanced design.
Click on the header area.
Select Insert file.
Select Your files.
If you want to upload a new file, select Upload files and upload an image from your computer, otherwise proceed with the next step.
Select the header image you want to use. Please remember the predefined image sizes (preferably 2000px x 1200px).
Select Ok.
Save the changes.

Your new header image has now been selected.

How to adjust the text and button on the header image

In the administration area in the main menu, select Design and then My themes.
Find your imported theme and select Start advanced design.
In the preview, the header contains the “View collection” button. To edit it, hover the mouse over the button and select the pencil icon. If the placeholders are not visible, follow these instructions.
The button text can only be changed in the Source code. To do so, click on the Source icon on the right.
Edit the button text in the Source code.

The button was built to scroll down to the products listed on the home page. The link of the button should not be edited since this would affect its design.

If your shop has multiple languages, select another language and repeat steps 4-6 for each language. If there is no text displayed in the other languages, please follow these instructions.
Select Apply.
Save the changes.

How to adjust colours in the header

The colours of the button, text and shopping cart in the navigation can be changed in the Advanced Design as usual with some exceptions.

Due to the specific theme settings, the navigation elements are white on the top of the page. When scrolling down or going to a specific page, the navigation colour changes automatically to white, creating a contrast to the black background of the theme.

Therefore, you have the possibility to change the navigation texts and buttons at two stages.

In the administration area in the main menu, select Design and then My themes.
Find your imported theme and select Start advanced design.
Click on the header area.
Select your preferred colour for Heading, Text, Link and Highlight. This changes the white heading elements on the start page.
Save the changes.
To change the colour of the header elements that are displayed while scrolling down or on the category pages from black to another colour, activate the footer. If the page area selection is not visible, simply click on the grey background area besides the theme to switch.
Scroll down and select the Footer area.
Change the colours of Heading, Text, Link and Highlight to your preferred colour.
Select Save.
Deactivate the footer. If the page area selection is not visible, simply click on the grey background area besides the theme to switch.

The colours of your header elements have now been changed.

Adjust teaser images

Your shop’s home page contains three teaser images which are displayed below the header image. You need to exchange the placeholders for the teaser images. For these images, we recommend a size of 300px x 200px.

How to exchange the teaser images

Select Content / Categories and then Datasheet view.
Select General.
Under Long Description, you can find placeholders for the teaser images. If the placeholders are not visible, follow these instructions.
Right click on the placeholder you want to edit and select Image.
Select Upload image.
If you want to upload a new file, select Upload files and upload an image from your computer, otherwise proceed with the next step.
Select the image you want to use.
Select Apply.
If your image is too large, you can enter the correct width and height for it although we recommend resizing your images correctly before uploading them. In order not to distort the image, the lock icon should be closed. The recommended size for teaser images is 300px x 200px.
Select OK.
You can now add a link to the image. To do so, right click on it and select Edit Link. Otherwise, proceed with step 15.
Select Pages.
Select a page of your shop you want to link to.
Select Apply.
Repeat steps 4-14 until you have changed all the teaser images.
If your shop has multiple languages, select another language and repeat steps 3-15 for each language. If there is no text displayed in the other languages, please follow these instructions.
Save the changes.

Step 3: Activate the theme

In the administration area in the main menu, select Design and then My themes.
Find your imported theme and select Activate now.

Your new theme has now been activated.

Appendix

Create a backup copy of the currently active theme

If you are already using another theme in your shop, please create a backup copy of it before you install your new theme.

In the administration area in the main menu, select Design and then My themes.
Create a backup copy of the active theme by selecting Create backup copy.

A backup copy of your active theme has been successfully created and can be found at the end of the page.

Create a backup of the active home page content

If you are already using another theme in your shop, please create a backup copy of your active home page content, such as images or texts.

To create a backup of your shop’s home page content, go to the administration area and select Content / Categories in the main menu and then Datasheet view.
Select Pages.
At the bottom of the table, in the column Name, enter a name for the backup – for example “Home page content backup”.
Select Save.
Select General
Copy the home page content you would like to keep – e.g. text and images in the field Long description.
Select Pages.
In the table, select the page you created in step 3.
Select Texts.
Paste the content that you copied into the corresponding field – e.g. Long description.
Save the changes.
If you want to backup other content of your home page, select Home page and then repeat steps 5-11.

If your shop has multiple languages, select another language and repeat steps 5-12 for each language. If there is no text displayed in the other languages, please follow these instructions.

You have now created a backup copy of your home page content successfully. You can now move on to import your theme by overwriting the home page with the import.

Adjust the right of withdrawal page

On your shop’s product pages, there is a link called “delivery”:

If you did not change the standard settings and linked to another page, this link leads to a special page that takes the content of your right of withdrawal page and displays it separately. This special page might not be compatible with the new theme, therefore you need to link directly to the right of withdrawal page.

In the main menu, select Product and then Product settings.
Select Texts.
In the text field at the top, right click on the word delivery and select Edit link.
Select the right of withdrawal page.
Select Apply.
Repeat steps 3-6 for each text field that contains the delivery link.
Save the changes.
If your shop has multiple languages, select another language and repeat steps 3-7 for each language.
Select Notes texts for net prices.
Repeat steps 3-8 for all text fields containing the delivery link.

What to do if there are page elements missing

It is possible that some elements do not appear in the footer and the header when you try to edit them in the Advanced design of your imported theme. This is due to your language settings and can be easily fixed.

How to add the missing page elements

In the administration area in the main menu, select Design and then My themes.
Find your imported theme and select Edit page elements at the right side for it.
In the row Top select Text (HTML).
If one of both language fields is empty (e.g. German is empty in the screenshot), simply copy the full HTML code and paste it in the empty field.
Save the changes.
If you want to add the page element for other languages, select the language under Translation and repeat steps 4-5.
Select Content / Categories in the main menu and then Datasheet view.
Select General.
Under Long description, you can find the content of your new theme’s homepage (like images or text). If your shop is available in more than one languages, you can find the content of another language on the right. The boxes for the other language might be empty or might have different content. Select the content from the Long description of the other language on the right and delete it. To make sure you don’t lose any content, please save a backup beforehand.
Copy the placeholder images from the Long description on the left and paste them in the empty Long description field on the right.
Save the changes.
If your shop has multiple languages, select another language and repeat steps 9-11 for each language.