Documentation for the ePages Simple 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 you choose to make to the theme that are not mentioned in this documentation may generate unpredictable display issues, and are your own responsibility.
Please make sure that your shop meets all the requirements that are listed for each theme in the Theme Store.
The theme design displays four 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

The header consists in a white background combined with a selected product from your shop. We recommend to display a product picture that has a white or transparent background in order to fit with the white header background.

How to exchange the header image

In the administration area in the main menu, select Content / Categories and then Datasheet view.
Select Products.
If the product you want to display is in the table, please proceed with step 6. Otherwise select Assign products.
Select the product you want to add to the product list displayed on the home page.
Select Apply.
The product which is now displayed in the first row of the table will be shown in the header image. If the product you want to show in the header is not in the first row of the table, you need to change the order of the products in the table. They are displayed in ascending order of the value in the Sort order column. In the row of the product you want to show, enter the lowest number in the Sort order column.
Save the changes.

The header image has now been exchanged.

How to adjust the text and link of the button on the header image

Select Content / Categories and then Datasheet view.
Select General.
Under Long Description, you can edit the button text for the header. If the placeholders are not visible, follow these instructions.
Right click on the button text and select Edit link.
Select the page of your shop you want to link to.
Under Link text edit the text which is displayed when a visitor to your shop hovers the mouse over the image – it’s the so-called “ALT” tag.
Select Apply.
Save the changes.
If your shop has multiple languages, select another language and repeat step 4 – 8 for each language. If there is no text displayed in the other languages, please follow these instructions.

The text and link of the button have now been changed.

Adjust teaser images

Your shop’s home page contains two teaser images which are displayed below the header image. In order to exchange the placeholders for the teasers, you need to provide teaser images.

We recommend a size of 520px x 230px for each of these images.

How to exchange the teaser images

Select Content / Categories and then Datasheet view.
Select General.
Under Long Description (2), you will find placeholders for the teaser images. If the placeholders are not visible, follow these instructions.
After a right click on the image you want to edit, 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.
In case your image is too large, you can enter the correct width and height for it. However, 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 520px x 230px.
Select OK.
In order to add a link to a teaser image, right click on the image and select Edit Link.
Select Pages.
Select the page of your shop you want to link to.
Select Apply.
Repeat steps 3-14 until you have changed all the teaser images.
Save the changes.
If your shop has multiple languages, select another language and repeat steps 3-16 for each language. If there is no text displayed in the other languages, please follow these instructions.

The teaser images have now been changed.

Adjust footer icons and footer links

You can display various icons in the footer of your shop. For instance, you can embed icons of payment providers to show your customers how they can pay. Another option is to add icons of logistics vendors in the footer which show your customers the delivery options.

If you want to display icons like that, you need to select them first and then define links for them.

Icons need to have a size of 24px x 24px. If your images do not have the right size, you can re-size them directly in the administration area of your shop.

The icons of payment providers and social media icons which were used in the demo in the ePages Theme Store are not included in the purchased theme, but you can download them here for free:

In addition, you can also display any other icon types in the footer such as social media icons or certificates.

How to select footer icons and define links for them

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 will find placeholders for the icons. 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 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 icon you want to use.
Select Apply.
If your image is too large, you can enter the correct width and height for it. In order not to distort the image, the lock icon should be closed. However, we recommend resizing your images correctly before uploading them. The recommended size for these icons is 24px x 24px.
Select OK.
In order to edit the link of an icon, right click on it and select Edit Link.
Edit the Link text and the web address under Link to another website. The Link text is displayed when a visitor to your shop hovers the mouse over the image – it’s the so-called ALT tag. If you are linking to an external site, we recommend selecting New window. That way the link opens in a new browser window and the visitors who click on the link stay in your shop.
Select Apply.
If you want to edit more of the icons, repeat steps 4-13. If not, proceed with the next step.
If your shop has multiple languages, select another language and repeat steps 4-14 for each language. If there is no text displayed in the other languages, please follow these instructions.
Select Apply.
Save the changes.

The icons have now been changed.

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.

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

The links now lead to the correct page.

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. If this occurs, it 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 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 4-5.
Select Content / Categories in the main menu and then Datasheet view.
Select General.
Under Long description, you will 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 will 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 do not 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.