Documentation for the ePages Sky Theme

Important notes before you start
Step 1: Import the new theme
Step 2: Take care of some adjustments
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 eight 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 600px.

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 for it.
Click on the header area.
Select Insert file.
To upload or choose a 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 600px).
Select Ok.
Save the changes.

Your new header image has now been selected.

How to adjust the link in the 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 for it.
In the preview, the header contains the “Shop the collection” button. To edit the text above it as well as the text and link of this button, 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.
To change the button link, go back to the normal editor by clicking again on the Source icon on the right.
Right click on the button text and select Edit Link.
Select Pages.
Select the page of your shop you want to link to.
Select Apply.
If your shop has multiple languages, select another language and repeat steps 4-10 for each language. If there is no text displayed in the other languages, please follow these instructions.
Select Apply.
Save the changes.

Adjust footer links

The footer of your shop contains various links – for instance to your contact page or to the page displaying your terms and conditions.

How to define footer links

In the administration area in the main menu, select Design and then My themes.
Find your imported theme and select Start advanced design for it.
In the preview you can see the footer at the bottom of the page. There you can find the links. If the placeholders are not visible, follow these instructions.

Hover the mouse over the footer and select the pencil icon.
Right click on the image you want to edit and select Edit link.
Select Pages.
Select the page of your shop you want to link to.
Select Apply.
You can also delete links you don’t want to have displayed, by deleting them in the preview.
If you want to edit more of the icons, repeat steps 4-8. If not, proceed with the next step.
If your shop has multiple languages, select another language and repeat steps 4-9 for each language. If there is no text displayed in the other languages, please follow these instructions.
Select Apply.
Save the changes.

The new links are now embedded.

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 300px.

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 300px.
Select OK.
You can now add a link to the image. To do so, right click on it and select Edit Link.
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 now 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.

How to link 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-5 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.
In the row Top select Text (HTML) 9.
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 Page elements (Safe mode).
In the row Footer 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 9-10.
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 (e.g. images or text). If your shop is available in more than one language, 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 before.
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-16 for each language.