{"id":895,"date":"2014-05-19T19:45:17","date_gmt":"2014-05-19T19:45:17","guid":{"rendered":"http:\/\/blog.productcart.com\/?p=895"},"modified":"2014-05-19T19:45:17","modified_gmt":"2014-05-19T19:45:17","slug":"productcart-v5-tabbed-product-displays","status":"publish","type":"post","link":"https:\/\/blog.productcart.com\/index.php\/2014\/05\/19\/productcart-v5-tabbed-product-displays\/","title":{"rendered":"ProductCart v5 Tabbed Product Displays"},"content":{"rendered":"<p>If you shop online, you\u2019ve probably noticed many Product Pages that utilize &#8220;Tabs&#8221; to economize space and make it easier for customers to access more information without having to &#8220;scroll&#8221; up and down the page. I<strong><\/strong>n ProductCart v5, you now have the ability to utilize Tabs on your own Product pages in the storefront and easily customize the layout and content of those Tabs via your Control Panel! <!--more-->Here are some of our favorite examples from well-know online retailers.<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_899\" style=\"width: 550px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-899\" class=\" wp-image-899  \" alt=\"An example of &quot;Tabs&quot; on Target's product pages.\" src=\"http:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/05\/target-tabs.jpg\" width=\"540\" srcset=\"https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/05\/target-tabs.jpg 650w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/05\/target-tabs-282x300.jpg 282w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/05\/target-tabs-480x510.jpg 480w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><p id=\"caption-attachment-899\" class=\"wp-caption-text\">An example of &#8220;Tabs&#8221; on Target&#8217;s product pages.<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_900\" style=\"width: 550px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-900\" class=\" wp-image-900  \" alt=\"Overstock.com uses &quot;Tabs&quot; on Product Pages for quick access to shipping and Q &amp; A's\" src=\"http:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/05\/overstock-tabs.jpg\" width=\"540\" srcset=\"https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/05\/overstock-tabs.jpg 650w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/05\/overstock-tabs-300x292.jpg 300w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/05\/overstock-tabs-480x467.jpg 480w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><p id=\"caption-attachment-900\" class=\"wp-caption-text\">Overstock.com uses &#8220;Tabs&#8221; on Product Pages in a similar way<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>So what does this mean to you?! Tabbed Product Displays are a great way to show all the information and tools a customer could ever need before making a purchase! Like what? We\u2019re glad you asked\u00a0 &#8212; here\u2019s the current list of things for which Tabs can be used:<\/p>\n<ul>\n<li>Add This Zone<\/li>\n<li>Add To Cart Zone<\/li>\n<li>Back-Order Message<\/li>\n<li>Brand Name<\/li>\n<li>BTO Configuration<\/li>\n<li>Category Breadcrumbs<\/li>\n<li>Cross Selling Zone<\/li>\n<li>Custom HTML Element<\/li>\n<li>Custom Input Fields<\/li>\n<li>Non-Shipping Item Message<\/li>\n<li>Next &amp; Back buttons<\/li>\n<li>Out of Stock Message<\/li>\n<li>Product Description<\/li>\n<li>Product Inventory<\/li>\n<li>Product Images<\/li>\n<li>Product Long Description<\/li>\n<li>Product Name<\/li>\n<li>Product Options<\/li>\n<li>Product Prices<\/li>\n<li>Product Promo Message<\/li>\n<li>Product Rating<\/li>\n<li>Product Reviews<\/li>\n<li>Product Reward Points<\/li>\n<li>Product Search Fields<\/li>\n<li>Product SKU<\/li>\n<li>Product Weight<\/li>\n<li>Quantity Discounts<\/li>\n<li>Subscription Bridge<\/li>\n<li>Wish List Zone<\/li>\n<\/ul>\n<p>The best thing about the new Tabbed Display is that you can customize the Tabs for each Product Page in your store! This means that if certain Tabs aren\u2019t relevant to a particular item (e.g. Promotional Message)\u2026 you can choose not to show them on those Product pages. Or you can create and use a Tab layout for a certain type of product, say electronics, but use a standard layout for the rest of your products.<\/p>\n<p>Oh, and did we mention that you can drag and drop the order in which Tabs are shown? Better than tell you about it, check it out for yourself on one of our <a href=\"https:\/\/www.productcart.com\/shopping-cart-software-demos.asp\" target=\"_blank\" rel=\"noopener noreferrer\">Demo Stores<\/a>.<\/p>\n<p>Overall, we think you\u2019re going to love the Tabbed Display feature in ProductCart v5, as it allows you to elegantly add more information to the page without unnecessary clutter. This can translate into higher customer satisfaction and increased sales!<\/p>\n<p>Oh \u2013 and one more thing. There is a very flexible and powerful Tab called \u2018Custom HTML Element\u2019 that you can use for just about anything you want! In the Product Example on our Demo below, notice that the 4<sup>th<\/sup> Tab is a YouTube video, which is inserted by simply Copying and Pasting the YouTube embed code.<\/p>\n<div id=\"attachment_902\" style=\"width: 550px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.productcartdemo.com\/standardv5\/pc\/viewPrd.asp?idproduct=198\"><img decoding=\"async\" aria-describedby=\"caption-attachment-902\" class=\" wp-image-902  \" alt=\"ProductCart 5 &quot;Tab&quot; example using the &quot;Custom HTML Element&quot; field\" src=\"http:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/05\/custom-html-tab.jpg\" width=\"540\" srcset=\"https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/05\/custom-html-tab.jpg 650w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/05\/custom-html-tab-261x300.jpg 261w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/05\/custom-html-tab-480x551.jpg 480w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/a><p id=\"caption-attachment-902\" class=\"wp-caption-text\">ProductCart 5 &#8220;Tab&#8221; example using the &#8220;Custom HTML Element&#8221; field<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>Using the &#8220;Custom HTML Element, your possibilities are endless. You could use that to present: a size chart, model information (&#8220;This model is 5&#8217;8&#8243; and is wearing a 4.&#8221;), embedded videos or audio, specialized product FAQs, care instructions, and so much more.<\/p>\n<p>Let us know what you think\u2026<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you shop online, you\u2019ve probably noticed many Product Pages that utilize &#8220;Tabs&#8221; to economize space and make it easier for customers to access more information without having to &#8220;scroll&#8221; up and down the page. In ProductCart v5, you now have the ability to utilize Tabs on your own Product pages in the storefront and [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[6,4],"tags":[44,45,46,47],"class_list":["post-895","post","type-post","status-publish","format-standard","hentry","category-about-productcart","category-updates","tag-product-detail-page","tag-product-page","tag-productcart-5-0","tag-tab-display"],"_links":{"self":[{"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/posts\/895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/comments?post=895"}],"version-history":[{"count":0,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/posts\/895\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/media?parent=895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/categories?post=895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/tags?post=895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}