Theme "Loft": How to set up your theme

This guide will assist you to get started with your new theme. Therefore, please read these instructions carefully and follow the steps described.

Start now
Header Image
Step 1
Import the new theme
Step 2
Take care of some adjustments
Step 3
Activate the theme

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:

  • 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

  1. In the administration area in the main menu, select Design and then My themes.
    My themes
  2. Scroll down to the bottom and select Import theme.
    Import theme
  3. 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.

  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 File
  5. Select Import.

  6. If the import was successful, you will find the theme listed on the bottom of the My themes page.
    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.
Exchanging the themes placeholder images

Adjust the header and the teaser images

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

You also need to provide teaser images. We recommend a size of 585px x 270px.

How to exchange the header image and the teaser images

  1. Select Content / Categories and then Datasheet view.
    My themes
  2. Select General.
    Select general
  3. Under Long Description, you will find three placeholders. The first placeholder is for the header image (recommended size: 1200 px x 520 px), the other two are for the teaser images which are displayed below the header image (recommended size: 585 px x 270 px). If the placeholders are not visible, follow these instructions.
    Header area
  4. Right click on the placeholder you want to edit and select Image.
    Select image
  5. Select Upload image.
    Upload image
  6. If you want to upload a new file, select Upload files and upload an image from your computer, otherwise proceed with the next step.
    Upload files
  7. Select the image you want to use.
    Select image
  8. Select Apply.

  9. 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 teaser images is 585px x 270px. The recommended size for the header image is 1200px x 520px.
    Resize image
  10. Select OK.

  11. You can now add a link to the image. To do so, right click on it and select Edit Link.
    Edit link
  12. Select Pages.
    Edit link
  13. Select a page of your shop you want to link to.

    Under Link text you can enter a text which is displayed when a visitor to your shop hovers the mouse over the image. It’s the so-called “ALT” tag.
    Select a page
  14. Select Apply.

  15. Repeat steps 3-14 until you have changed all the teaser images and the header image.

  16. Save the changes.
    Save the changes
  17. 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.
    Save the changes

Your new header image and your new teaser images have now been selected.


Step 3: Activate the theme

  1. In the administration area in the main menu, select Design and then My themes.
    My Themes
  2. Find your imported theme and select Activate now.
    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.

  1. In the administration area in the main menu, select Design and then My themes.
    My themes
  2. Create a backup copy of the active theme by selecting Create backup copy.
    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.

  1. 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.
    Datasheet view
  2. Select Pages.
    Select Pages
  3. At the bottom of the table, in the column Name, enter a name for the backup – for example “Home page content backup”.
    Enter a name for the backup
  4. Select Save.

  5. Select General.
    Select General
  6. Copy the home page content you would like to keep – e.g. text and images in the field Long description.
    Long description
  7. Select Pages.
    Select Pages
  8. In the table, select the page you created in step 3.
    Select the page you created
  9. Select Texts.
    Select Texts
  10. Paste the content that you copied into the corresponding field – e.g. Long description.
    Long description
  11. Save the changes.
    Select Save
  12. If you want to backup other content of your home page, select Home page and then repeat steps 5-11.

  13. 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.
    Select Save

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”:
Delivery link
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

  1. In the main menu, select Product and then Product settings.
    Product settings
  2. Select Texts.
    Select texts
  3. In the text field at the top, right click on the word delivery and select Edit link.
    Edit link
  4. Select the right of withdrawal page.
    Select the right of withdrawal page
  5. Select Apply.

  6. Repeat steps 3-6 for each text field that contains the delivery link.

  7. Save the changes.
    Save the changes
  8. If your shop has multiple languages, select another language and repeat steps 3-7 for each language.
    Select another language
  9. Select Notes texts for net prices.
    Select Notes texts for net prices
  10. Repeat steps 3-8 for all text fields containing the delivery link.

How to create a logo out of the shop title

This part is optional. You are free to follow these instructions if you want to use the shop title as logo instead of uploading an image or continue using your current shop logo.

  1. In the administration area in the main menu, select Design and then My themes.
    My themes
  2. Find your imported theme and select Start advanced design for it.
    Start advanced design
  3. If you already have an image as your logo, hover the mouse over the header area with the placeholder for the logo and select the delete icon. If you don’t have any logo yet, you can skip this step and proceed with step 4.
    Delete the logo
  4. Hover over the plus icon and select Insert page element.
    Select the plus icon
  5. Select More page elements.
    Select more page elements
  6. Select Name of website with slogan.
    Select name of website with slogan
  7. Select Insert.

  8. Edit the fields Name of website and the Slogan if you want.
    Edit the fields
  9. If your shop has other languages, change the language and repeat step 8 for each language.

  10. Select Apply.

  11. Save the changes.
    Save the changes

Your shop logo is now generated out of the shop title.