icon lightspeedLightspeed platform

Custom translations

Add custom translations to your webshop (extend the multi-language experience of your webshop)

Because of the fact that it's not possible to automatically install custom extra translation keys that can be added to a theme, we decided to offer another way to make use of these extra translations inside our "Berlin" theme, to make sure all our added text headings and other instructional text (such as USP-texts, banner texts, mission statement etc.) can be translated in all the languages your shop is offering. To get these text elements translated, some extra steps are needed. On this page you'll find instrcutions how to do so. The result of this is, that you can achieve maximum usability /ease of use for your customers in all languages.

Add your custom translations

By default on several locations within theme "Berlin" code is added to offer multi-language translations for headings, USP texts etc. To make this work, you need to add a set of extra custom "translation keys" in the back office. How to do this is is explained as follows.

content custom translations
content custom translations keylist

Override a translation

First thing to check if you want to use custom translations, is whether there's already a translation key available to use (and to override). To do so, click on the button in the top right corner, "Override a translation". There, you cab check in the dropdown field "Translation to override, if there already is a key to override. For example, if you want to ente ryour own USP text in the USP bar at the top of the page, if you type in "usp" in the dropdown field, you'll be taken to the 3 translation keys for our USP texts that start with the names "USPmessage_" are already available. Choose one of the USP meassages to edit it;   

override custom translation usp

override custom translation usp customtxt
Enter your custom USP text and save to publish your USP text for the USP-bar at the top of the webpages.

Translation keys for theme "Berlin" that are already available in the default translation key list:

  1. Text (name label) as heading with main menu-icoon ("hamburger"-icon): key is Menu
  2. Text USP message #1 (header, all pages): key is USPmessage_1
  3. Text USP message #2 (header, all pages): key is USPmessage_2
  4. Text USP message #3 (header, all pages): key is USPmessage_3
  5. Main banner text (homepage, left): key is Main_bannertext_left
  6. Main banner text (homepage, right): key is Main_bannertext_right
  7. Heading for text widget sidebar: key is Sidebar Text Widget Heading
  8. Text for text widget sidebar: key is Sidebar Text Widget Body Text
  9. Name main menu item for blog: key is blog
  10. Heading "Show {number} of total {number}" (on product category page): key is Showing $1 - $2 of $3
  11. Button text "Go to productpage" (on product category page and quickshop window): key is Go to productpage
  12. Heading "Your selection" (heading text with filter on product category page): key is Your selection
  13. Heading at price slider (product category page): key is Price range
  14. Subheading "Set the price range to filter" (price filter on product category page): key is Set the price range to filter
  15. Label "Action": key is Action
  16. Label "Exclusive": key is Exclusive
  17. Mentioning of brand name "By (brand name)": key is By_brandname
  18. Tab name "Options" (product page): key is Options
  19. Tab name "Share" (product page, social media): key is Share
  20. Text at "Read reviews" on product page (in case of several reviews): key is Read $1 reviews
  21. Text at company contact information in footer: key is missionstatement
  22. Mouse text (tooltip) at buttons "Delete filter" (product overview pages): key is Remove this filter
  23. Mouse text at + button (number of ordered products, on product detail page and quickshop window): key is Increase
  24. Mouse text at - button (number of ordered products, on product detail page and quickshop window): key is Decrease
  25. Mentioning text: Page not found (404): key is Not found text
  26. Mentioning text: Title not found: key is Not found title
  27. Mouse text at scrolling to top button (bottom of the pages): key is Scroll to top
  28. Mouse text (Title-tag) category images (homepage): key is browse our $1 collection

Custom "translation keys"

Theme "Berlin" also has some custom translations that are not available in the list with default translations keys; here's how to use these translation keys with your own content:

Add custom "translation keys" and translations:

  1. In back office, go to Content > Translations
  2. Click on top of the page on the button "Add a custom translation"
    scrnshot bo berlin vertaalsleutel toevoegen01
  3. Under "Add item" you can add a new key(name), for example "blog"; please note that this keyname must match exactly with the keys that we used in our code. See below for a full list.
  4. Click on "Save"; in the next window you can then specify the translations per language.
scrnshot bo berlin aangep vertal01scrnshot bo berlin aangep vertal02

List of translation keys (note: Capitals and/or lowercase!)

(Copy the yellow marked translation keys to the tab "Custom translation" in the SEOshop back office); at the moment there's only 1 translation key that's not available in the default dropdown field with translation keys, this could change later on):

  1. Text at "Read review" on product page (in case of 1 review): key is Read $1 review

Need help? We'll be glad to help you out. Call or mail us (without any obligation) on +31 (0)78 369 05 55 or mail: This email address is being protected from spambots. You need JavaScript enabled to view it.

Social media integration

The social media services are built in as follows:

  1. as links (icons) to your general social media profile pages (on top of the footer, on all pages) directly to adjustment
  2. as a widget for facebook (like box) and twitter (in the footer, on all pages)  directly to adjustment
  3. as a tab on the product  "tab" on the product detail page; in this tab people can share a the product through Facebook, Twitter, Google+ and Pinterest.
  4. as customer feedback on the blog-pages; visitors can like, share or tweet the artcile through  the socialmedia channels. 

Social Media profile pages

As soon as you filled in the links to the social media profile pages in the backoffice, the icons  are shown in the footer (see the screenshot below).

social media icons

Backoffice settings for links to the social media profile pages:

04d social media urls
Here you can enter the URL for your social media profile page(s). If you leave it empty, this icon will stay hidden.

In case you leave an inputfield empty, the respected icon will not be shown. You can adjust the size and color of the social media icons yourself. 

Social media widgets (boxes)

You can show Facebook and / or Twitter boxes in the footer. The widgets appear in columns, optionally together with the Webwinkelkeur or Kiyoh widget.

04 fe footer socialmedia widgets

Settings for the Facebook widget:

In order to visually integrate the widgets in your theme, u can adjust the widgets at own will (Twitter offers more options then facebook).

04e fb settingsDe backoffice instellingen voor de Facebook widget.

Settings for the Twitter widget:

04g twitter settingsThe backoffice settings for the Twitter widget.

Sharing a product on the product detail page

Sharing a specific product is possible on the product detail page: Here the visitor of your store can share can share the cureent product through the tab "share". This option is made invisible on purpose so the visitor is not distracted from the purchase proces, which can lead to lower conversion rate; eventually you want customers to first finalize the purchase before sharing the product with others. 

social media share optionsOn the product detail page the feature to share a product is build in as "tab". This way, sharing it doesn't distract from actually ordering a product.

Sharing a blog post through social media

On the blogpage archive, a blogpost can be shared as well. The Facebook, Twitter and Google+ buttons are built in as standard.  

blogpost articleOn the blog page visitors can share their experience with others.

 

Third party integration

Yotpo

YOTPO, a review service, has been integrated into thema "Berlin" since the 27-08-2015 theme update. This means that you can use this reviewing service to collect customer reviews that can be shown on your webshop. All the products that received such a YOTPO rating will be marked with stars (maximum 5 stars) on the product overview pages (Homepage, Category pages and Collection pages), and also on the product detail page itself, where the average customer rating is displayed at the top right, near the product title, and further down below the detail page where visitors can read the reviews in question at the tab "Reviews".

Note: As soon as you enter the YOTPO API key, the default Lightspeed eCom reviews will be automatically replaced with the YOTPO review system.

We advise you to configure your webshop to have the "Reviews" tab as default opened tab, so visitors can see immediately that a product has reviews. You'll find this setting under 05a. PRODUCT DETAIL PAGE: Settings, item "Default Opened Tab Panel", choose "Reviews" there.

05a default opened tab

Back office settings YOTPO

See 01c. GENERAL integrations:

01c yotpo apikey
Under section "1c. GENERAL integrations" you enter your YOTPO API key to activate these reviews.

As soon as you've entered the  YOTPO API key that you received from YOTPO, the YOTPO reviews will be displayed on your webshop page (instead of the default Lightspeed review system).

yotpo fe rating
yotpo fe rating pdp
yotpo fe rating pdp reviews

Note: Settings for YOTPO colors etc. can only be configured through your YOTPO account, this is not possible via the "Berlin" theme settings.

Fonts

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
01b bo fonts
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.

Theme "Berlin"

logo lightspeed redblack w200px"Berlin" is a fully 'responsive' theme, especially designed for the Lightspeed eCom platform. It aimes at fashion & lifestyle webshops, but can also easily be used for customer electronic shops, or shops on interiour decoration. With its open, spacious design and many theme settings (more than 300) it can be customized to a maximum degree.

The most important features of this theme are:

  • "full responsive": the website adjusts seamlessly to the dimensions of the screen (desktop, tablet, smartphone).
  • optimal user experience through bigger product images, "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 "Default" is installed.

Live demos for the theme presets:

scrnshot fe berlin vars
All 4 theme presets for "Berlin": "Default, "Minimal", "Streetwise" and "Home"