{"id":185803,"date":"2021-04-20T12:52:53","date_gmt":"2021-04-20T10:52:53","guid":{"rendered":"https:\/\/guide.jtl-software.com\/nova-template\/"},"modified":"2023-09-07T14:32:17","modified_gmt":"2023-09-07T12:32:17","slug":"nova-template","status":"publish","type":"page","link":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/","title":{"rendered":"Detailed description: NOVA template"},"content":{"rendered":"<div class=\"wpb-content-wrapper\">[vc_row][vc_column width=&#8221;1\/3&#8243; responsive=&#8221;{&#8220;col&#8220;: &#8220;12&#8220;, &#8220;order-md&#8220;: &#8220;1&#8220;, &#8220;col-lg&#8220;: &#8220;4&#8220;, &#8220;order-lg&#8220;: &#8220;12&#8220;}&#8221; advanced=&#8221;{&#8220;class&#8220;: &#8220;&#8220;, &#8220;hash&#8220;: &#8220;&#8220;}&#8221;]<div id=\"toc\">\n\t<div class=\"card border-0 bg-rysywhite mt-0 mt-lg-5 mb-5 w-100\" data-toc-element>\n\t\t<div class=\"d-none d-lg-flex flex-column\">\n\t\t\t<span class=\"fa-layers mx-auto mt--4 fa-fw fa-3x text-shaftblue\">\n\t\t\t\t<span class=\"fas fa-circle\"><\/span>\n\t\t\t\t<span class=\"fas fa-inverse fa-list-ul\" data-fa-transform=\"shrink-8\"><\/span>\n\t\t\t<\/span>\n\t\t\t<span class=\"font-weight-bold text-shaftblue text-center h5 mt-3 mb-0\">Contents<\/span>\n\t\t<\/div>\n\t\t<div class=\"d-block d-lg-none\">\n\t\t\t<a class=\"text-decoration-none card-header-link collapsed\" data-toggle=\"collapse\" href=\"#collapse-toc\" aria-expanded=\"false\" aria-controls=\"collapse-toc\">\n\t\t\t\t<div class=\"card-header d-flex bg-white align-items-center\" role=\"tab\" id=\"heading-toc\">\n\t\t\t\t\t<span class=\"h4 mb-0 d-flex align-items-center\">\n\t\t\t\t\t\t<span class=\"fa-layers fa-fw fa-2x mr-2 text-shaftblue\">\n\t\t\t\t\t\t\t<span class=\"fas fa-circle\"><\/span>\n\t\t\t\t\t\t\t<span class=\"fas fa-inverse fa-list-ul\" data-fa-transform=\"shrink-8\"><\/span>\n\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<span>Contents<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<span class=\"flex-shrink-0 ml-auto fas fa-caret-down text-gray\"><\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/a>\n\t\t<\/div>\n\t\t<div id=\"collapse-toc\" class=\"collapse show\" data-parent=\"#toc\" role=\"tabpanel\" aria-labelledby=\"heading-toc\">\n\t\t\t<div class=\"card-body p-4 table-of-content\">\n\t\t\t\t<ul data-toc-headings=\"h2,h3\" data-toc class=\"list-shop\"><\/ul>\n\t\t\t<\/div>\n\t    <\/div>\n\t<\/div>\n<\/div>[\/vc_column][vc_column responsive=&#8221;{&#8220;col&#8220;: &#8220;12&#8220;, &#8220;col-md&#8220;: &#8220;8&#8220;, &#8220;order-md&#8220;: &#8220;12&#8220;, &#8220;order-lg&#8220;: &#8220;1&#8220;}&#8221; width=&#8221;2\/3&#8243; advanced=&#8221;{&#8220;class&#8220;: &#8220;&#8220;, &#8220;hash&#8220;: &#8220;&#8220;}&#8221;]<h1 class=\"d-flex align-items-center hl-shop\" id=\"detailed-description-nova-template\">Detailed description: NOVA template <span id='anchor-detailed-description-nova-template' data-href='#detailed-description-nova-template' class='far fa-link' data-anchor><\/span><\/h1>\t<p>On this page, you will find a detailed description of the setting options for the standard NOVA template of JTL-Shop 5. You can reach the options via <span class=\"highlight\">View &gt; Settings &gt; Templates &gt; NOVA &gt; Settings<\/span>.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"pane-a-general\">Pane A: General <span id='anchor-pane-a-general' data-href='#pane-a-general' class='far fa-link' data-anchor><\/span><\/h2>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-general-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-general-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-general-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-general-1-1024x181.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-general-1-768x135.png 640w\" width=\"1526\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"269\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/nova-template-settings-general-1.png&quot;,&quot;w&quot;:1526,&quot;h&quot;:269}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"media-object media-object-border d-flex align-items-top\">\n\t\n\t\t\n\t\t<span class=\"mt-1 mr-3 flex-shrink-0 far fa-info-circle fa-2x columnsize-fa-2x text-shop\"><\/span>\n\t\t\t<span class=\"media-content border-shop\">\n\t\n\t\t\t<span style=\"color: #5cbcf6;\"><strong>Note:<\/strong><\/span> The standard template for JTL-Shop 5 is the NOVA template. If you still want to use the EVO template, you can find its settings <span style=\"color: #5cbcf6;\"><a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/jtl-shop-4\/optik\/evo-template\/\">here<\/a><\/span>.\t\t\t<\/span>\n\t\n\t<\/div>\n\n\n\t<p><b>Compression of JavaScript and CSS files:<\/b> You can have JTL-Shop compress the JavaScript and CSS files. This removes unnecessary characters from the files and improves the performance of your online shop.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"pane-b-theme\">Pane B: Theme <span id='anchor-pane-b-theme' data-href='#pane-b-theme' class='far fa-link' data-anchor><\/span><\/h2>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-theme-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-theme-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-theme-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-theme-1-1024x480.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-theme-1-768x360.png 640w\" width=\"2060\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"965\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/nova-template-settings-theme-1.png&quot;,&quot;w&quot;:2060,&quot;h&quot;:965}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p><b>Theme:<\/b> Here you can choose between the themes <span class=\"highlight\">clear, midnight<\/span> and <span class=\"highlight\">blackline<\/span>.<\/p>\n<hr  \/>\n\t<p><b>Animated buttons when hovering:<\/b> If you activate this option, a short glossy effect appears on the button when a customer moves the cursor over it.<\/p>\n<hr  \/>\n\t<p><b>Show animation for wish list and comparison list:<\/b> Here you define whether and when an animation is displayed when customers add an item to the wish list or comparison list. You can choose between <span class=\"highlight\">With desktop and mobile devices<\/span>, <span class=\"highlight\">Only with mobile devices<\/span>, <span class=\"highlight\">Only with desktop devices<\/span> and <span class=\"highlight\">No<\/span>.<\/p>\n<hr  \/>\n\t<p><b>Show button &#8220;Scroll to top&#8221;:<\/b> Specify whether an arrow button should be displayed at the bottom of the page so that customers can jump back to the top of the page.<\/p>\n<hr  \/>\n\t<p><b>Slider position\/Banner position: <\/b>Here you can specify whether sliders\/banners are to be displayed in the content area or between the content and the header.<b><br \/>\n<\/b><\/p>\n<hr  \/>\n\t<p><b>Show left sidebar: <\/b>Here you can specify whether the left sidebar is displayed &#8220;Only with item lists&#8221; or &#8220;On all pages&#8221;.<b><br \/>\n<\/b><\/p>\n<hr  \/>\n\t<p><b>Favicon:<\/b> Here you can save a file for a favicon. This small icon is displayed, for example, in the bookmark list or on tabs in the browser.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"pane-c-header\">Pane C: Header <span id='anchor-pane-c-header' data-href='#pane-c-header' class='far fa-link' data-anchor><\/span><\/h2>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-header-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-header-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-header-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-header-1-1024x557.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-header-1-768x417.png 640w\" width=\"2171\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"1180\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/nova-template-settings-header-1.png&quot;,&quot;w&quot;:2171,&quot;h&quot;:1180}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p>For NOVA, there are 5 different ready-made layouts available, from which you can choose by clicking on the respective preview graphic. In addition, you can create a <span class=\"highlight\">Custom layout<\/span> with just a few clicks. The icon behind each setting indicates whether the setting affects the desktop view or mobile devices.<\/p>\n<p>The settings described below are only visible if you click on <span class=\"highlight\">Custom Layout<\/span>.<\/p>\n\t<p><b>Selected template:<\/b> The text displayed here briefly describes the different preview graphics. If you select a different preview graphic, the corresponding description is displayed here.<\/p>\n<hr  \/>\n\t<p><b>Display menu in separate line:<\/b> If you select <span class=\"highlight\">Yes<\/span>, the menu below Search and Logo will be displayed in a separate line.<\/p>\n<hr  \/>\n\t<p><b>Display of many menu entries:<\/b> This setting is only available if <span class=\"highlight\">Display menu in separate line<\/span> has been set to Yes. Specify how the menu behaves if there are many menu entries. You can choose between a multi-line display and a single-line, scrollable to the left\/right view.<\/p>\n<hr  \/>\n\t<p><b>Menu justification:<\/b> This setting is only available if <span class=\"highlight\">Display menu in separate line<\/span> has been set to Yes and\u00a0<span class=\"highlight\">Display for many menu items<\/span> has been set to Multiple lines. Specify whether the menu should be <span class=\"highlight\">Left-justified<\/span>, <span class=\"highlight\">Centred<\/span> or <span class=\"highlight\">Justified<\/span>.<\/p>\n<hr  \/>\n\t<p><b>Display when scrolling:<\/b> This setting is only available if <span class=\"highlight\">Display menu in separate line<\/span> has been set to Yes. Specify which items are still displayed at the top of the screen when customers scroll down in the online shop. You can choose to display only the <span class=\"highlight\">Menu<\/span>, <span class=\"highlight\">Nothing<\/span> or <span class=\"highlight\">Menu, logo, and search field<\/span>.<\/p>\n<hr  \/>\n\t<p><b>Logo height (in px):<\/b> Here you define the height of the logo in pixels. The aspect ratio of the logo is maintained.<\/p>\n<hr  \/>\n\t<p><b>Centre logo:<\/b> This setting is only available if <span class=\"highlight\">Display menu in separate line<\/span> has been set to Yes. If you select <span class=\"highlight\">Yes<\/span>, the logo will be displayed between the search and personal area. If you select <span class=\"highlight\">No<\/span>, the logo is displayed on the left side next to the search. When you centre the logo, the possible <span class=\"highlight\">Search field position<\/span> can be influenced by it.<\/p>\n<hr  \/>\n\t<p><b>Show top bar<\/b>: Top bar refers to the area in the online shop that appears in the top right by default and contains currency and language selection as well as links to the blog and contact form. If you select <span class=\"highlight\">No<\/span>, currency and language selections are displayed below next to the personal area.<\/p>\n<hr  \/>\n\t<p><b>Search field width (in px): <\/b>Specify the width of the search field. If you enter &#8220;0&#8221;, the field completely fills the space available to it. The <span class=\"highlight\">Search field position<\/span> option only has an effect if you enter a search field width where the search field does not extend the available width.<\/p>\n<hr  \/>\n\t<p><b>Search field position: <\/b>This setting is only available if <span class=\"highlight\">Display menu in separate line<\/span> has been set to Yes. Specify the position of the search field. You can choose between <span class=\"highlight\">Right-justified<\/span>, <span class=\"highlight\">Left-justified<\/span> and <span class=\"highlight\">Centred<\/span>. If the search field is very wide (for example &#8220;0&#8221;, full width) or if the option <span class=\"highlight\">Centre logo<\/span> is set to <span class=\"highlight\">Yes<\/span>, the setting may not have any effect.<\/p>\n<hr  \/>\n\t<p><b>Display header over full width: <\/b>Specify whether to display the header across the entire width of the screen. If you select <span class=\"highlight\">No<\/span>, a narrow margin remains clear on the left and right. <span class=\"highlight\">Boxed<\/span> places the contents of the header further in the middle and leads to a wider margin.<\/p>\n<hr  \/>\n\t<p><b>Display of search:<\/b> Specify how the search is displayed in the view on a mobile device. You can display the search field when <span class=\"highlight\">scrolling up<\/span>. It is also displayed when a visitor is at the bottom of a page and scrolls there. The other option is to display the search field as a <span class=\"highlight\">magnifying glass icon<\/span> in the header. If the visitor taps on it, the search box opens.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"pane-d-mega-menu\">Pane D: Mega menu <span id='anchor-pane-d-mega-menu' data-href='#pane-d-mega-menu' class='far fa-link' data-anchor><\/span><\/h2>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img sizes=\"(max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" data-pswp=\"[]\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p><b>Categories (instead of category box\/box administration): <\/b>With this option enabled, categories are displayed in the upper part of the page in the mega menu. If you deactivate this option, you must activate a category box for each page in the box administration so that your customers can still reach the categories.<b><br \/>\n<\/b><\/p>\n<hr  \/>\n\t<p><b>Open menu in current category: <\/b>This setting allows you to define in which category customers start when they access the menu on mobile devices. If <span class=\"highlight\">No<\/span>, the customer sees all categories in the menu and clicks through from the topmost category to the desired subcategory. If <span class=\"highlight\">Yes<\/span>, the navigation begins in the category the customer is in at that moment.<b><br \/>\n<\/b><\/p>\n<hr  \/>\n\t<p><b>Category images for first subcategory:<\/b> With this option enabled, you can display images for the subcategories of main categories.<\/p>\n<hr  \/>\n\t<p><b>Subcategories:<\/b> With this option enabled, the mega menu also shows the subcategories of main categories. When the option is disabled, you will only see main categories.<\/p>\n<hr  \/>\n\t<p><b>Pages of the link group \u201cmegamenu\u201d:<\/b> Here you can activate and deactivate the pages from the link group \u201cmegamenu\u201d. The pages belonging to that group can be maintained under <span class=\"highlight\">View &gt; Settings &gt; Pages.<\/span><\/p>\n<hr  \/>\n\t<p><b>Manufacturer drop-down:<\/b> Adds the additional menu item <span class=\"highlight\">Manufacturer<\/span> to the mega menu. In that menu item, you will find all manufacturers of the items currently offered in JTL-Shop.<\/p>\n<hr  \/>\n\t<p><b>Manufacturer images:<\/b> Specify whether images should be displayed for manufacturers.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"pane-e-list-and-gallery-view\">Pane E: List and gallery view <span id='anchor-pane-e-list-and-gallery-view' data-href='#pane-e-list-and-gallery-view' class='far fa-link' data-anchor><\/span><\/h2>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-list-gallery-view-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-list-gallery-view-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-list-gallery-view-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-list-gallery-view-1-1024x472.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-list-gallery-view-1-768x354.png 640w\" width=\"2106\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"970\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/nova-template-settings-list-gallery-view-1.png&quot;,&quot;w&quot;:2106,&quot;h&quot;:970}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p><b>Filter position:<\/b> Specify where additional filter options are to be displayed. Select <span class=\"highlight\">Sidebar<\/span> to display them on the left side. If you select <span class=\"highlight\">Separate window<\/span>, the <span class=\"highlight\">Filter<\/span> button is displayed above the item overview. The button opens a small window with the filters.<\/p>\n<p>The individual filters themselves can be set under <span class=\"highlight\">View &gt; Standard views &gt; Item overview<\/span>.<\/p>\n<hr  \/>\n\t<p><b>Show filter search from X filter options onwards:<\/b> Filter lists can become very confusing for extensive product ranges. Specify from how many entries a search field is displayed above the list to facilitate the selection of the desired filter.<\/p>\n<hr  \/>\n\t<p><b>Always expand filters initially: <\/b>Here you can specify whether the existing filters of the individual filter categories are immediately visible or whether they must be expanded first.<\/p>\n<hr  \/>\n\t<p><b>Number of initially visible filter options per filter: <\/b>Here you can determine how many filter options are to be displayed per filter. If more filter options are available, online shop visitors can display them at any time.<b><br \/>\n<\/b><\/p>\n<hr  \/>\n\t<p><b>Add items to basket:<\/b> Specify whether to display the <span class=\"highlight\">shopping basket button<\/span> next to the item preview in the list view so that items can be added to the basket immediately.<\/p>\n<hr  \/>\n\t<p><strong>Number of possible variations:<\/strong> Here you can define how many variations in the list view are displayed in the item preview. You can select <span class=\"highlight\">0 &#8211; Show no options<\/span>, <span class=\"highlight\">1\u20135 variations<\/span> or <span class=\"highlight\">no restriction<\/span>. This allows customers to see available variations without having to go to the item&#8217;s detail page first.<\/p>\n<hr  \/>\n\t<p><strong>Number of possible variation values for radio buttons\/swatches:<\/strong> Here you can define the maximum number of variation values that can be displayed in the list view in the item preview using radio buttons and swatches. In JTL-Wawi, you define how the variation values are displayed in the item master data. You can select <span class=\"highlight\">3, 5, 9, 12 or no restriction<\/span>.<\/p>\n<hr  \/>\n\t<p><b>Show variation preview:<\/b> Specify the maximum number of variations that are to be offered for selection in the gallery view. With items that have more variations, the variation selection will not be displayed in the gallery view.<\/p>\n<hr  \/>\n\t<p><strong>Number of possible variation values for radio buttons\/swatches:<\/strong> Here you can define the maximum number of variation values that can be displayed in the item preview in the gallery view using radio buttons and swatches. In JTL-Wawi, you define how the variation values are displayed in the item master data. You can select <span class=\"highlight\">3, 5, 9, 12 or no restriction<\/span>.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"pane-f-display-of-variation-values\">Pane F: Display of variation values <span id='anchor-pane-f-display-of-variation-values' data-href='#pane-f-display-of-variation-values' class='far fa-link' data-anchor><\/span><\/h2>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-display-variation-values-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-display-variation-values-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-display-variation-values-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-display-variation-values-1-1024x134.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-display-variation-values-1-768x100.png 640w\" width=\"2103\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"275\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/nova-template-settings-display-variation-values-1.png&quot;,&quot;w&quot;:2103,&quot;h&quot;:275}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p><strong>Sliders for swatches from X elements onwards:<\/strong> Specify the number of elements from which swatches are to be displayed with a slider.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"pane-g-colours\">Pane G: Colours <span id='anchor-pane-g-colours' data-href='#pane-g-colours' class='far fa-link' data-anchor><\/span><\/h2>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-colours-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-colours-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-colours-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-colours-1-1024x446.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-colours-1-768x334.png 640w\" width=\"2113\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"920\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/nova-template-settings-colours-1.png&quot;,&quot;w&quot;:2113,&quot;h&quot;:920}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p>The following settings allow easy colour adjustments in the online shop. The adjustments will not be overwritten even during updates.<\/p>\n<p>The changes made are visible, as soon as the settings have been saved in the admin back end, the page has been updated in the front end and, if necessary, the cache has been emptied. If you do not select a colour, the default colour of the respective template will be applied. <strong><br \/>\n<\/strong><\/p>\n\t<p><strong>Primary colour: <\/strong>Here you can define in which colour the categories, for example, are displayed in the menu when you hover over them with the mouse, and in which colour buttons are displayed. To do this, simply select the desired colour in the colour selection on the right.<strong><br \/>\n<\/strong><\/p>\n<hr  \/>\n\t<p><strong>Secondary colour: <\/strong>Here you can change the background of the search icon in the header, for example.<\/p>\n<h4 class=\"d-flex align-items-center hl-wawi\" id=\"header\">Header <span id='anchor-header' data-href='#header' class='far fa-link' data-anchor><\/span><\/h4>\t<p><strong>Primary background colour: <\/strong>Here you can specify which colour is used for the background in the header. <strong><br \/>\n<\/strong><\/p>\n<hr  \/>\n\t<p><strong>Primary font colour: <\/strong>Specifies the font colour in which the entries and icons are displayed in the header.<strong><br \/>\n<\/strong><\/p>\n<hr  \/>\n\t<p><strong>Secondary background colour: <\/strong>Here you can specify which background colour is used, for example, in the lower part of the personal area.<\/p>\n<hr  \/>\n\t<p><strong>Secondary font colour: <\/strong>Here you can, for example, adjust the font colour in the mini shopping cart.<\/p>\n<h4 class=\"d-flex align-items-center hl-wawi\" id=\"footer\">Footer <span id='anchor-footer' data-href='#footer' class='far fa-link' data-anchor><\/span><\/h4>\t<p><strong>Background colour: <\/strong>Here you adjust the colour in which the background of the footer is displayed.<\/p>\n<hr  \/>\n\t<p><strong>Font colour: <\/strong>Here you can adjust the font colour of some elements in the footer of the online shop.<\/p>\n<hr  \/>\n\t<p><strong>Copyright background colour: <\/strong>Here you can change the colour of the background of the copyright area at the bottom of the footer.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"pane-h-custom-styles\">Pane H: Custom Styles <span id='anchor-pane-h-custom-styles' data-href='#pane-h-custom-styles' class='far fa-link' data-anchor><\/span><\/h2>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-custom-styles-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-custom-styles-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-custom-styles-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-custom-styles-1-1024x462.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-custom-styles-1-768x347.png 640w\" width=\"2157\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"974\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/nova-template-settings-custom-styles-1.png&quot;,&quot;w&quot;:2157,&quot;h&quot;:974}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p>Custom variables and custom CSS, Sass or Scss allow you to visually customise various areas in the online shop. After saving and clearing the cache, the changes are visible in the online shop.<\/p>\n<p><strong>Custom variables:<\/strong> In order to use custom variables for customisation, you should have knowledge of <a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/getting-started\/theming\/\">Bootstrap<\/a> variables, such as in\u00a0<span class=\"highlight\">templatesNOVAthemesclearsass_variables.scss<\/span>. Possible adjustments are, for example, a change in the background or font colour of error messages or the font size.<\/p>\n<hr  \/>\n\t<p><strong>Custom CSS, Sass or Scss:<\/strong> Custom CSS is useful if you only want to make small visual changes in certain places, such as changing the background colour of the top bar. Sass and Scss are also possible.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"pane-i-footer\">Pane I: Footer <span id='anchor-pane-i-footer' data-href='#pane-i-footer' class='far fa-link' data-anchor><\/span><\/h2>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-footer-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-footer-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-footer-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-footer-1-1024x360.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/nova-template-settings-footer-1-768x270.png 640w\" width=\"2160\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"760\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/nova-template-settings-footer-1.png&quot;,&quot;w&quot;:2160,&quot;h&quot;:760}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p><b>Show newsletter subscription:<\/b> This option allows customers to subscribe to your newsletter. For more information on newsletters go <span style=\"color: #5cbcf6;\"><a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/marketing-search-engine-optimisation\/sending-newsletters\/\">here<\/a><\/span>.<\/p>\n<hr  \/>\n\t<p><b>Show Social Media buttons:<\/b> Shows the buttons for Social Media channels for which you have entered a link into the fields below this option.<\/p>\n\t<p><b>Facebook\/Twitter\/YouTube\/Xing\/LinkedIn\/Vimeo\/Instagram\/Pinterest\/Skype link: <\/b>Enter the link to your profile on the respective channel here.<b><br \/>\n<\/b><\/p>\n[\/vc_column][\/vc_row]<\/div>","protected":false},"excerpt":{"rendered":"Contents Contents Detailed description: NOVA template On this page, you will find a detailed description of the setting options for <a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/\">[...]<\/a>","protected":false},"author":2,"featured_media":0,"parent":187891,"menu_order":685,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","footnotes":""},"tags":[],"class_list":["post-185803","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Detailed description: NOVA template &#8211; JTL-Guide<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Detailed description: NOVA template &#8211; JTL-Guide\" \/>\n<meta property=\"og:url\" content=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/\" \/>\n<meta property=\"og:site_name\" content=\"JTL-Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-07T12:32:17+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/\",\"url\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/\",\"name\":\"Detailed description: NOVA template &#8211; JTL-Guide\",\"isPartOf\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/#website\"},\"datePublished\":\"2021-04-20T10:52:53+00:00\",\"dateModified\":\"2023-09-07T12:32:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/#breadcrumb\"},\"inLanguage\":\"en-en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"JTL-Shop\",\"item\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Appearance\",\"item\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Detailed description: NOVA template\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/#website\",\"url\":\"https:\/\/guide.jtl-software.com\/en\/\",\"name\":\"JTL-Guide\",\"description\":\"Dokumentation f\u00fcr die gesamte Produktfamilie von JTL\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/guide.jtl-software.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-en\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Detailed description: NOVA template &#8211; JTL-Guide","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/","og_locale":"en_US","og_type":"article","og_title":"Detailed description: NOVA template &#8211; JTL-Guide","og_url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/","og_site_name":"JTL-Guide","article_modified_time":"2023-09-07T12:32:17+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/","url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/","name":"Detailed description: NOVA template &#8211; JTL-Guide","isPartOf":{"@id":"https:\/\/guide.jtl-software.com\/en\/#website"},"datePublished":"2021-04-20T10:52:53+00:00","dateModified":"2023-09-07T12:32:17+00:00","breadcrumb":{"@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/#breadcrumb"},"inLanguage":"en-en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/nova-template\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"JTL-Shop","item":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/"},{"@type":"ListItem","position":2,"name":"Appearance","item":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/appearance\/"},{"@type":"ListItem","position":3,"name":"Detailed description: NOVA template"}]},{"@type":"WebSite","@id":"https:\/\/guide.jtl-software.com\/en\/#website","url":"https:\/\/guide.jtl-software.com\/en\/","name":"JTL-Guide","description":"Dokumentation f\u00fcr die gesamte Produktfamilie von JTL","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/guide.jtl-software.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-en"}]}},"_links":{"self":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/185803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/comments?post=185803"}],"version-history":[{"count":5,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/185803\/revisions"}],"predecessor-version":[{"id":232711,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/185803\/revisions\/232711"}],"up":[{"embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/187891"}],"wp:attachment":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/media?parent=185803"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/tags?post=185803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}