Theme "Berlin" offers the following choice of typefaces (Google webfonts):

• Open Sans
• Droid Sans
• Lato
• Inconsolata
• Libre Baskerville
• Merriweather
• Roboto
• Roboto Slab
• Arapey
• Playfair display
• Great Vibes
• Tangerine
• Rock Salt

In the back office you can choose per webpage element which font to use. Some fonts are solely suited for bigger font sizes, so mainly for headings; others can be used for both headings and regular body text. Below you'll find a preview of these typefaces (the font size is relative, and is adjustable via the back office settings):

• Open Sans

  Dit is een voorbeeld van dit specifieke lettertype, zodat u uw keuze kunt maken welk lettertype u wilt gebruiken. Sommige lettertypes werken beter voor koppen dan voor hele tekstparagrafen.

  This is an example of this specific font, so you can make a choice with font suits you best. Some fonts only work well as a heading, not for paragraph text.

• Droid Sans

  Dit is een voorbeeld van dit specifieke lettertype, zodat u uw keuze kunt maken welk lettertype u wilt gebruiken. Sommige lettertypes werken beter voor koppen dan voor hele tekstparagrafen.

  This is an example of this specific font, so you can make a choice with font suits you best. Some fonts only work well as a heading, not for paragraph text.

• Lato

  Dit is een voorbeeld van dit specifieke lettertype, zodat u uw keuze kunt maken welk lettertype u wilt gebruiken. Sommige lettertypes werken beter voor koppen dan voor hele tekstparagrafen.

  This is an example of this specific font, so you can make a choice with font suits you best. Some fonts only work well as a heading, not for paragraph text.

• Inconsolata

  Dit is een voorbeeld van dit specifieke lettertype, zodat u uw keuze kunt maken welk lettertype u wilt gebruiken. Sommige lettertypes werken beter voor koppen dan voor hele tekstparagrafen.

  This is an example of this specific font, so you can make a choice with font suits you best. Some fonts only work well as a heading, not for paragraph text.

• Libre Baskerville

  Dit is een voorbeeld van dit specifieke lettertype, zodat u uw keuze kunt maken welk lettertype u wilt gebruiken. Sommige lettertypes werken beter voor koppen dan voor hele tekstparagrafen.

  This is an example of this specific font, so you can make a choice with font suits you best. Some fonts only work well as a heading, not for paragraph text.

• Merriweather

  Dit is een voorbeeld van dit specifieke lettertype, zodat u uw keuze kunt maken welk lettertype u wilt gebruiken. Sommige lettertypes werken beter voor koppen dan voor hele tekstparagrafen.

  This is an example of this specific font, so you can make a choice with font suits you best. Some fonts only work well as a heading, not for paragraph text.

• Roboto

  Dit is een voorbeeld van dit specifieke lettertype, zodat u uw keuze kunt maken welk lettertype u wilt gebruiken. Sommige lettertypes werken beter voor koppen dan voor hele tekstparagrafen.

  This is an example of this specific font, so you can make a choice with font suits you best. Some fonts only work well as a heading, not for paragraph text.

• Roboto Slab (H2) (only headlines)

  Heading 3

  ,

  Heading 4

  ,

  Heading 5

  ,

  Heading 6

• Arapey (H2) (only headlines)

  Heading 3

  ,

  Heading 4

  ,

  Heading 5

  ,

  Heading 6

• Playfair display (H2) (only headlines)

  Heading 3

  ,

  Heading 4

  ,

  Heading 5

  ,

  Heading 6

• Great Vibes (H2) (only headlines)

  Heading 3

  ,

  Heading 4

  ,

  Heading 5

  ,

  Heading 6

• Tangerine (H2) (only headlines)

  Heading 3

  ,

  Heading 4

  ,

  Heading 5

  ,

  Heading 6

• Rock Salt (H2) (only headlines)

  Heading 3

  ,

  Heading 4

  ,

  Heading 5

  ,

  Heading 6

The back office settings where you can choose which typeface and font-sizes to use (headings, H-tags, body text).

If you want to use other typefaces (webfonts), please contact us via This email address is being protected from spambots. You need JavaScript enabled to view it., we will be glad to support you with this.

By clicking on the "quick shop"-button (or "quick view") your visitors can get a quick impression of the product specs, without having to click through to the specific product detail page.

In the quick shop window, a compact view of the product is shown in an "overlay" window (where the background is dimmed). The main advantage here is a better user experience: visitors don't need to open a new page (this also saves page loading time), and they can place their order directly from within the quickshop window, and after adding to the cart they can then choose whether to stay on the overview page to continue shopping, or to proceed to the checkout for final payments.

The cart will be updated automatically, and the new total amount is being calculated. This means also an improvement for the selling proces and adds to the conversion rate.

Note: This quick shop function is only meaningfull if the visitor doesn't has to choose product variants; these can only be shown on the product detail page. If this is the case, the add-to-cart button text for these products will be automatically altered in "go to product detail page" (instead of "add to cart").

For a complete overview of all product information visitors can then click to go to the product detail page.

The quick shop function can be activated via the setting "Show Quickshop:" (See 06a. PAGE TYPE: Catalog & Collection Page)

Activate the "quick shop" function only if not all your products have product variants.

Berlin is a fully "responsive" theme, aimed for the fashion and & lifestyle speciality. The most important features of this theme are:

• "full responsive": het subject adjusts seamlessly to the dimentions of the screen (desktop, tablet, smartphone).
• optimal userexperience through bigger productpictures, "quick shop" function and a clean layout.
• retina-ready: this theme is suited for high resolution "retina" screens.
• many more settings so you can "brand" your webshop for the best possible brand experience.
• a "quick shop"-option (a compact product view in an "overlay" window, with add to cart button or option to continue shopping (preset: turn on/off), combined with:
• "Ajax"-cart: when placing an order, the visitor stays on the page and can choose whether to continue shopping, or to proceed to checkout.   
• "sticky menu": top bar (header) with main menu stays in view (preset: turn on/off);
• choice of 3 or 4 columns layout on category/collection (product overview) pages;
• headlines (homepage) with multiple layout options (and with/without carousel/slideshow)

More information on the "Berlin" features can be found here.

By default theme preset "Standard" is being installed.

Live demos for the theme presets:

• Standard
• Minimal
• Streetwise
• Home

All 4 theme presets for "Berlin": "Standard" (Default), "Minimal", "Streetwise" and "Home"

The main extra functions and options that are build in by default are:

1. Use of "sale" product label (as text, or as custom sale-icon) directly to setting
2. Add product labels "Actions", "Exclusive" and "New" (making multi-language by using the "Custom template data"-fields) directly to setting
3. Add product videos (using "custom template data"-fields) directly to setting

General: activating "Custom template data"-fields

Via the back office option "Custom template data" you can add extra functionality to this theme. These custom template data must be filled in per separate product. This way in "Berlin" it's possible to:

• add YouTube product videos to the product detail page
• show extra product labels on the product overview pages and product detail pages

To use these extra features, first you need to activate the use of custom template data option, as follows:

1. (log into the back office)
2. Go to "Settings", and click on "Workflow" from the first row of items under "General";
   
3. Click on the option "Custom template data" to activate.

Now you're all set to use these features. 

1. SALE label

The "Sale" label is automatically assigned to a product as soon as a product has a discount price, so as soon as there is a new and an old product price. How the "Sale" label looks like, is your choice:

• as text label, so as the word "sale" (this word will be translated automatically into all the languages your shop is using);
• as graphic, with your own custom sale icon image. You can upload this image through the back office at Design > Settings. If you want this icon to be crisp also for "retina"  displays, then you can upload a second "retina'-ready" sale icon (the pixel dimension of this image needs to be twice the size of the regular sale icon. Note: this sale icon image will then be used for all languages.
  
  

2. Add labels Action/New/Exclusive to products

The extra product labels that can be shown on the product overview pages and product detail pages that can be made multi-language by using custom translation keys.

First make sure the "Custom template data" option is activated (see above: General: activating "Custom template data"-fields). Now you're ready to make the text labels "Action", "New" and/or "Exclusive". This goes as follows, via the 1st "custom template data" field:

1. Go in the backoffice under "Catalog" to "Products"
2. Look up the product in question
3. Click on the tab "General" and scroll all the way down, and fill in the first custom template data field for this label:
   1. for label "ACTION": fill in text "Action" (note the Uppercase!)
   2. for label "NEW": fill in text "New" (note the Uppercase!)
   3. for label "EXCLUSIVE": fill in text "Exclusive" (note the Uppercase!)

Translate labels

To make these label texts multilingual (in all the languages your webshop is offering), you must enter these translations yourself. This you can do under Design > Custom translations. (See this webpage for more information on how to add custom translations).

1. Go in back office to Design > Custom translations
2. Click on top on the green plus-icon
3. Under heading "Add item" you enter the translation key, for example "Action" for the "action" label; please note thatv this key name should match exactly with the key name that we used in our code, and that they're all in English.
4. Hit "Save"; in the next window you enter the subsequent translations for this key (per language, dependant on the number of languages your show is set up for).
5. Repeat this (if you want) for the label "Exclusive".

3. Add product video to product detail page (only YouTube videos)

1. Go in back office under "Catalog" to "Products";
2. Look in the list for the product;
3. Click on the tab "General" and scroll all the way to the bottom;
4. Enter under "Custom template data", at "data 03", the unique YouTube ID for the product video; for example: "1HCh1AOWEWs". So if the address bar of this YouTube film is "https://www.youtube.com/watch?v=1HCh1AOWEWs", then this last part is the unique video ID that you must enter into the 3rd data field (this ID consists of 11 numbers and letters);
5. Hit "Save and Continue".

The video will then be shown on the product detail page, right below the product thumbnails.

Copy the YouTube ID (11 numbers/letters) from the address bar to the SEOshop back office.

 Enter the YouTube ID  into the 3rd "custom template data" field to show a product video.