JTL Shop 5 OnPage Composer

How to design your store pages

With JTL Shop 5 OnPage Composer you can easily design your store pages. The OnPage Composer lets you create your own online store – thanks to the modular system – innovatively, piece by piece, without having to have programming knowledge. You can see how this works in this screencast tutorial.

Create your store page with the simple modular system

We can find the JTL Shop 5 OnPage Composer in the store backend in the left column directly above as the first under representations. The good thing is that you can access OnPage Composer from both the backend and the frontend. This means you can go to the page you want to edit and edit it directly with it. In our case, we have a first draft, which we can adjust by clicking on the edit icon.
For people already familiar with the WordPress content management system, this is probably a familiar view. The JTL Shop 5 OnPage Composer is also based on a modular system of elements, which are called portlets here, can be inserted via drag and drop and are basically first divided into two categories at the highest level. Content and Layout.

These portlets are provided by the JTL Shop 5 OnPage Composer

With the layout elements, the appearance or the structure and arrangement can be defined – in other words, the layout. Thus, a dividing line can be inserted to visually separate two sections from each other, grid layouts can be integrated with which you can construct any number of columns and thus, for example, insert text on one side and an image on the other side, or tabs that structure the content well. While we’re on the subject of content. Here you can find banners, images, product streams, image sliders and videos. That means you can e.g. drag and drop a grid layout into the main area and use a text portlet from the content section for one side and design the other side with an image or video. In each block you have the possibility to design it individually.

Color adjustments can be made in JTL Shop 5 OnPage Composer using RGBA code

If you click on the edit icon in this block, you can change the text content first. But also the complete layout and appearance. The background and font color can be adjusted to your CI colors using RGBA code. That means you determine the red, green, blue portion and the transparency to get your desired color. Frames can also be added here and formally and color matched. The last tab is also very interesting, with which you can determine and adjust the fade-in animation.

Content Portlets Summary

We will now go through the individual content elements only once roughly. The banner is intended to be placed first on the store page to visually demonstrate what it is about. Here, too, we find the typical three-way split: General / Layout / Animation in the Edit menu. The image slider gives you the possibility to create multiple images, for example. illustrate your products in the slider. Buttons can be used as CTAs. A specific link can be stored, for example. the respective page of your store reported in the section before.
Countdowns are also very popular, but I don’t think they need any explanation. An image gallery also exists, in which several images can be presented sorted in a given layout. A successful product presentation incl. Image, pricing and direct linking can be ensured with the product stream. We already touched on the video connection. This currently supports local videos, but also YouTube or Vimeo videos that can be embedded using Video ID.

The layout portlets of the JTL store 5

So much for content portlets. The rest of the layout portlets are also self-explanatory. Thus, an accordion is a menu that opens and closes, a container is a comprehensive element for any content media, a flipcard is a map that rotates on mouse click, a panel is a container with the possibility to zoom in on the content and tabs is a tab based layout as you know it from your browser.

The JTL Shop 5 agency eBakery will be happy to help you

If there are any specific questions about the OnPage Composer of the new JTL store, let us know in the comments. Otherwise, as a JTL service partner and JTL Shop 5 agency, we are happy to answer any questions you may have about the JTL software products.

  • 0/5
  • 0 ratings
0 ratingsX
Very bad! Bad Hmmm Oke Good!
0% 0% 0% 0% 0%

Haben Sie Fragen oder brauchen ein individuelles Angebot? Zögern Sie nicht, uns zu kontaktieren.


    eBakery requires the contact information you provide to contact you regarding our products and services. You can unsubscribe from these notifications at any time. For information on unsubscribing, as well as our privacy practices and commitment to protecting your privacy, please see our Privacy Policy.*.

    Related Posts

    Leave a Comment

    Hat dir der Artikel gefallen?

    Dann melde dich doch zu unserem Newsletter an!

    Neben unseren Blog Themen informieren wir dich darin regelmäßig zu neuen Features und Tutorials