{"id":1258,"date":"2021-06-24T11:19:29","date_gmt":"2021-06-24T11:19:29","guid":{"rendered":"https:\/\/support.webdinge.nl\/knowledge-base\/product-display\/"},"modified":"2021-06-24T11:19:30","modified_gmt":"2021-06-24T11:19:30","slug":"product-display","status":"publish","type":"ht_kb","link":"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/","title":{"rendered":"Product display"},"content":{"rendered":"\n<p>This section will describe how to customize every single product container. What we consider to be a product container is showed in the image below:<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Webdinge-Department-v2-1.png\" alt=\"\" class=\"wp-image-1888\"\/><\/figure>\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n<h2 class=\"wp-block-heading\">Container setup<\/h2>\n\n<p>The first few settings are mentioned to \u201cdesign\u201d your product container.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Department-V2-&#xBB;-Settings-Lightspeed-eCom.png\" alt=\"\" class=\"wp-image-1893\"\/><\/figure>\n<ul class=\"wp-block-list\"><li><strong>Product container: <\/strong>With this setting you can set a background color for the container.<\/li><li><strong>Product border:<\/strong> Setting this to active will add a small border around your container<\/li><li><strong>Product border color:<\/strong> If choosen yes above then you can set the color for the border here.<\/li><li><strong>Product info background:<\/strong> This will set a very light background to your product info. So the part under your product image, with title, prices etc.<\/li><li><strong>Product shadow on hover:<\/strong> Setting this to yes will add a shadow behind the container when you hover over the container. As seen below:<\/li><\/ul>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Webdinge-Department-v22.png\" alt=\"\" class=\"wp-image-1885\"\/><\/figure>\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n<h2 class=\"wp-block-heading\">Products per row<\/h2>\n\n<p>Choose how many products per row you want to show in your shop. Choose between 3 or 4 products. <img loading=\"lazy\" decoding=\"async\" width=\"1162\" height=\"163\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Department-V2-%C2%BB-Settings-Lightspeed-eCom1.png\" alt=\"\"\/><\/p>\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n<h2 class=\"wp-block-heading\">Product images<\/h2>\n\n<p>This section will setup the images used in the product container.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Department-V2-&#xBB;-Settings-Lightspeed-eCom2.png\" alt=\"\" class=\"wp-image-1901\"\/><\/figure>\n<ul class=\"wp-block-list\"><li><strong>Product images:<\/strong> You have two options here, <strong>fill them<\/strong> and <strong>with space around<\/strong>. Which you choose depends on what kind of images you use in the setting below (<strong>Product images orientation<\/strong>). When you choose <strong>rectangle<\/strong> images then choose <strong>fill them<\/strong>. Using square images then use <strong>with space around them<\/strong>.<\/li><\/ul>\n<p>Below are two images in different sizes. The left one is <strong>rectangle<\/strong>, the right one is <strong>square<\/strong><\/p>\n\n<div class=\"wp-block-image\"><figure class=\"alignleft\"><img decoding=\"async\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-theme-department-v2.png\" alt=\"\" class=\"wp-image-1886\"\/><\/figure><\/div>\n\n<div class=\"wp-block-image\"><figure class=\"alignleft\"><img decoding=\"async\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Webdinge-Department-v23.png\" alt=\"\" class=\"wp-image-1887\"\/><\/figure><\/div>\n\n<p>Below image shows the difference between <strong>space around<\/strong> and <strong>fill them. <\/strong>Left is a filled image and right has the red space around.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/index2.png\" alt=\"\" class=\"wp-image-1902\"\/><\/figure>\n<ul class=\"wp-block-list\"><li><strong>Grey product images: <\/strong>With this setting you can give your images a grey background. This will override the default background of your image. The below image had a white background. Activate this setting and your image will turn from a white background to a grey background.<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-theme-department-v2.png\" alt=\"\" width=\"182\" height=\"286\"\/><\/li><\/ul>\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n<h2 class=\"wp-block-heading\">Product labels <\/h2>\n\n<p>In this theme you can set some labels which will be shown in your product containers.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Collectie.png\" alt=\"\" class=\"wp-image-1905\"\/><\/figure>\n<ul class=\"wp-block-list\"><li><strong>Product label color:<\/strong> This is a custom created label in which you can set your own text. This setting will set the color for this label.<\/li><\/ul>\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon\"><strong>How to setup a custom label:<\/strong> To activate this custom label you\u201dll need to activate <a href=\"http:\/\/ecom-support.lightspeedhq.com\/hc\/nl\/search?utf8=%E2%9C%93&amp;query=extra+template+data\">\u201cextra data fields\u201d<\/a>. When you have done that you need to go to a product in your backoffice. When you scroll all the way down you\u2019ll see three new fields called \u201cdata_01, data_02 and data_03\u201d. When you type a text inside data_01 then that will be shown as label.<\/p>\n\n<ul class=\"wp-block-list\"><li><strong>Sale label color:<\/strong> The sale label is a label that will be showed when a product has a discounted price. This is done automatically.<\/li><li><strong>Hide custom product labels:<\/strong> Hide\/show the custom label<\/li><li><strong>Hide discount label:<\/strong> Hide\/show the sale label.<\/li><\/ul>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Department-V2-&#xBB;-Settings-Lightspeed-eCom3.png\" alt=\"\" class=\"wp-image-1904\"\/><\/figure>\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n<h2 class=\"wp-block-heading\">Other settings <\/h2>\n\n<p>This section describes all different settings that are not mentioned in previous settings.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/product-container.jpg\" alt=\"\" class=\"wp-image-1889\"\/><\/figure>\n<p>The above image will show you what setting will add\/remove which numbered item.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Department-V2-&#xBB;-Settings-Lightspeed-eCom4.png\" alt=\"\" class=\"wp-image-1907\"\/><\/figure>\n<ul class=\"wp-block-list\"><li><strong>(1.) Show second image:<\/strong> This setting will load the second image from each product and show that when you hover over the product.<\/li><li><strong>(7.) Show stock message:<\/strong> This setting will show a <strong>on stock\/out of stock<\/strong> message.<\/li><li><strong>(5.) Show quantity box: <\/strong>This will add a quantity box where people can add a quatity to be added to the cart<\/li><li><strong>(6.) Show add to cart button:<\/strong> This will add a small add to cart button.<\/li><\/ul>\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon\"><strong>Note:<\/strong> You can show the <strong>quantity boxwithout anadd to cart<\/strong> button but that will obviously don\u2019t do anything good. The quantity box will be useless then. However showing the cart button <strong>without the quantity box<\/strong> will work. Mostly shops who sell large quantites (or B2B) will use this function.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Department-V2-&#xBB;-Settings-Lightspeed-eCom5.png\" alt=\"\" class=\"wp-image-1908\"\/><\/figure>\n<ul class=\"wp-block-list\"><li><strong>(below product image) Quick shop:<\/strong> This function will show a <strong>button<\/strong> which will open up a popup. In this popup the full product data will be shown and people can add the product from the same screen they are on right now.<\/li><li><strong>(8.) Compare\/wishlist buttons: <\/strong>This will add\/hide the compare and wishlist buttons.<\/li><li><strong>(2.) Brand name: <\/strong>This setting will add\/remove the brandname in front off the <strong>(3.) product title<\/strong><\/li><\/ul>","protected":false},"excerpt":{"rendered":"<p>This section will describe how to customize every single product container. What we consider to be a product container is showed in the image below: Container setup The first few settings are mentioned to \u201cdesign\u201d your product container. Product container: With this setting you can set a background color for&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"ht-kb-category":[141],"ht-kb-tag":[],"class_list":["post-1258","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-theme-department-v2-de"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Product display - Help center<\/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:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Product display - Help center\" \/>\n<meta property=\"og:description\" content=\"This section will describe how to customize every single product container. What we consider to be a product container is showed in the image below: Container setup The first few settings are mentioned to \u201cdesign\u201d your product container. Product container: With this setting you can set a background color for...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/\" \/>\n<meta property=\"og:site_name\" content=\"Help center\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-24T11:19:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Webdinge-Department-v2-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"3\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/\",\"url\":\"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/\",\"name\":\"Product display - Help center\",\"isPartOf\":{\"@id\":\"https:\/\/support.webdinge.nl\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Webdinge-Department-v2-1.png\",\"datePublished\":\"2021-06-24T11:19:29+00:00\",\"dateModified\":\"2021-06-24T11:19:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/#primaryimage\",\"url\":\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Webdinge-Department-v2-1.png\",\"contentUrl\":\"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Webdinge-Department-v2-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/support.webdinge.nl\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Product display\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/support.webdinge.nl\/de\/#website\",\"url\":\"https:\/\/support.webdinge.nl\/de\/\",\"name\":\"Help center\",\"description\":\"Get answers to all your questions\",\"publisher\":{\"@id\":\"https:\/\/support.webdinge.nl\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/support.webdinge.nl\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/support.webdinge.nl\/de\/#organization\",\"name\":\"Webdinge | Theme support\",\"url\":\"https:\/\/support.webdinge.nl\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/support.webdinge.nl\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/support.webdinge.nl\/wp-content\/uploads\/2021\/05\/logo-hc.png\",\"contentUrl\":\"https:\/\/support.webdinge.nl\/wp-content\/uploads\/2021\/05\/logo-hc.png\",\"width\":300,\"height\":90,\"caption\":\"Webdinge | Theme support\"},\"image\":{\"@id\":\"https:\/\/support.webdinge.nl\/de\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Product display - Help center","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:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/","og_locale":"de_DE","og_type":"article","og_title":"Product display - Help center","og_description":"This section will describe how to customize every single product container. What we consider to be a product container is showed in the image below: Container setup The first few settings are mentioned to \u201cdesign\u201d your product container. Product container: With this setting you can set a background color for...","og_url":"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/","og_site_name":"Help center","article_modified_time":"2021-06-24T11:19:30+00:00","og_image":[{"url":"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Webdinge-Department-v2-1.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/","url":"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/","name":"Product display - Help center","isPartOf":{"@id":"https:\/\/support.webdinge.nl\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/#primaryimage"},"image":{"@id":"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/#primaryimage"},"thumbnailUrl":"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Webdinge-Department-v2-1.png","datePublished":"2021-06-24T11:19:29+00:00","dateModified":"2021-06-24T11:19:30+00:00","breadcrumb":{"@id":"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/#primaryimage","url":"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Webdinge-Department-v2-1.png","contentUrl":"https:\/\/webdinge.nl\/wp-content\/uploads\/2019\/02\/Screenshot_2019-02-06-Webdinge-Department-v2-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/support.webdinge.nl\/de\/knowledge-base\/product-display\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/support.webdinge.nl\/de\/"},{"@type":"ListItem","position":2,"name":"Product display"}]},{"@type":"WebSite","@id":"https:\/\/support.webdinge.nl\/de\/#website","url":"https:\/\/support.webdinge.nl\/de\/","name":"Help center","description":"Get answers to all your questions","publisher":{"@id":"https:\/\/support.webdinge.nl\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/support.webdinge.nl\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/support.webdinge.nl\/de\/#organization","name":"Webdinge | Theme support","url":"https:\/\/support.webdinge.nl\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/support.webdinge.nl\/de\/#\/schema\/logo\/image\/","url":"https:\/\/support.webdinge.nl\/wp-content\/uploads\/2021\/05\/logo-hc.png","contentUrl":"https:\/\/support.webdinge.nl\/wp-content\/uploads\/2021\/05\/logo-hc.png","width":300,"height":90,"caption":"Webdinge | Theme support"},"image":{"@id":"https:\/\/support.webdinge.nl\/de\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/support.webdinge.nl\/de\/wp-json\/wp\/v2\/ht-kb\/1258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.webdinge.nl\/de\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/support.webdinge.nl\/de\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/support.webdinge.nl\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/support.webdinge.nl\/de\/wp-json\/wp\/v2\/comments?post=1258"}],"version-history":[{"count":1,"href":"https:\/\/support.webdinge.nl\/de\/wp-json\/wp\/v2\/ht-kb\/1258\/revisions"}],"predecessor-version":[{"id":1259,"href":"https:\/\/support.webdinge.nl\/de\/wp-json\/wp\/v2\/ht-kb\/1258\/revisions\/1259"}],"wp:attachment":[{"href":"https:\/\/support.webdinge.nl\/de\/wp-json\/wp\/v2\/media?parent=1258"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/support.webdinge.nl\/de\/wp-json\/wp\/v2\/ht-kb-category?post=1258"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/support.webdinge.nl\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=1258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}