Documentation for the ePages Lookbook 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 top image

In order to exchange the placeholder in the header area, you need to provide an image with a recommended size of 1100px x 40px.

How to exchange the top 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 at the top of the preview.
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 image you want to use. Please remember the predefined image sizes (preferably 1100px x 40px).
Select Ok.
In the preview, the top image contains a placeholder text with a link. To edit the text as well as the link, hover the mouse over the text and select the pencil icon. If the placeholders are not visible, follow these instructions.
Edit the text.
If you want to add a link to the text, select the text you want to use as a link, right click on the text and select Edit Link. Otherwise, proceed with step 15.
Select Pages.
Select the page in your shop you want to link to.
Select Apply.
Select Apply.
Save the changes.

Your new top image and its text have now been adjusted.

How to exchange the shop logo

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 logo image contains a placeholder image. To edit the image, hover the mouse over the button and select the pencil icon. If the placeholders are not visible, follow these instructions.
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 image you want to use. Please remember the predefined image sizes (preferably 230px x 28px).
Select OK
Save the changes.

Your logo has now been adjusted.

Adjust footer icons and footer links

You can display various icons in the footer of your shop. For instance, you can embed social media icons in the footer which link to your Facebook or Twitter account.

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

The icon’s size should be 24px x 24px.

The 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 icons of logistics providers.

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 can find placeholders for 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.
In case 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 is 24px x 24px.
Select OK.
Right click on the icon you just inserted 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 new icons are now embedded.

Adjust the header and the teaser images

Your theme contains a big header image and two teaser images below that. You need to exchange the placeholders with your own images.

We recommend a size of 1100px x 552px for the header image and a size of 535px x 402px for the teaser images.

How to exchange the header and 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 the header image is 1100px x 552px, for the teaser images 535px x 402px.
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 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.

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 Header 1 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 Page elements (Safe mode).
In the row Bottom 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 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 (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 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.