{"id":989,"date":"2014-06-02T15:11:50","date_gmt":"2014-06-02T15:11:50","guid":{"rendered":"http:\/\/blog.productcart.com\/?p=989"},"modified":"2014-06-02T15:11:50","modified_gmt":"2014-06-02T15:11:50","slug":"productcart-v5-themes-choosing-a-pre-set-theme-or-creating-your-own","status":"publish","type":"post","link":"https:\/\/blog.productcart.com\/index.php\/2014\/06\/02\/productcart-v5-themes-choosing-a-pre-set-theme-or-creating-your-own\/","title":{"rendered":"ProductCart v5 Themes: Choosing a Pre-Set Theme or Creating Your Own"},"content":{"rendered":"<p>If you have a shopping cart or are currently evaluating shopping carts, then you have probably heard of themes and\/or templates.\u00a0 As it applies to a store design &#8220;theme&#8221; and &#8220;template&#8221; are two different words for the same thing.\u00a0 Essentially, they are a set of files (CSS, HTML, JavaScript, etc.) that control the look and feel of your store.\u00a0 When a theme is applied to a store, the store instantly transforms to the specifications of the theme.\u00a0 A theme could do something as simple as changing the background color to light blue, or it could go as far as redesigning the entire cart layout.\u00a0 That is the beauty of themes: it is a great way for store owners to get up and running with a unique, professional design quickly and at a reasonable cost.\u00a0 Today we are going to examine ProductCart v5 themes.\u00a0 Specially, let&#8217;s talk about what makes ProductCart v5 themes so important to web developers and store owners alike, \u00a0what separates them from other ecommerce systems, and how insanely simple it is to choose a pre-set theme or create your own.<!--more--><\/p>\n<p>ProductCart v5 themes are unlike any other themes on the market today.\u00a0 Web Developers will find they are a breath of fresh air in that they are built simply with pure HTML and CSS.\u00a0 There is absolutely no need to learn any fancy, proprietary code language as there are with the vast majority of shopping carts out there today.\u00a0 That said, if you are a coder, then you can tap into the ProductCart core and incorporate your own business ideas and logic using the same familiar programming languages you know and love.\u00a0 We also have a number of simple &#8220;code snippets&#8221; that are &#8220;plug and play&#8221; for extra functionality, such as displaying a slide out shopping cart preview. Web Developers love that ProductCart v5 makes building themes simple without placing limits on their creativity.<\/p>\n<p>Store owners understand that when developers and designers can build themes easily, with no limits on creativity, then the results are going to be more options at more reasonable prices.\u00a0 In fact, ProductCart comes with several 100% free, beautiful, responsive themes out of the box that look good across all devices.\u00a0 More free themes will become available to <a href=\"http:\/\/www.productcart.com\/store\/pc\/ProductCart-Support-Updates-Plan-143p489.htm\" target=\"_blank\" rel=\"noopener noreferrer\">Support and Updates<\/a> members throughout 2014 as our team of designers unleash their creativity.\u00a0 Premium themes will also be available as our amazing ProductCart development community starts to release their creations (we&#8217;ve already seen several gorgeous themes coming out of the community!).<\/p>\n<p>What is even more amazing than how simple it is to build themes, is how simply anyone can modify an existing theme.\u00a0 Nearly every single design element of a theme can be modified with CSS via a single, well-documented file called &#8220;theme.css&#8221;, which is located in the theme directory.\u00a0 Why is this important?\u00a0 It means that if you find a theme you love, but maybe you just don&#8217;t like the color (maybe the blue doesn&#8217;t match your logo) then you can easily make that change in a matter of minutes.\u00a0 Unlike other platforms out there you don&#8217;t need to work for NASA to change the look of ProductCart.<\/p>\n<p>Take a look at how simple it is\u2026<\/p>\n<h2>\u00a0Make a copy of the theme you want to work on.<\/h2>\n<p><a href=\"http:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-copy.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-990\" alt=\"theme-copy\" src=\"http:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-copy.png\" width=\"521\" height=\"279\" srcset=\"https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-copy.png 521w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-copy-300x161.png 300w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-copy-480x257.png 480w\" sizes=\"(max-width: 521px) 100vw, 521px\" \/><\/a><\/p>\n<h2>Give the theme a new name.<\/h2>\n<p>It&#8217;s your creation, so select anything you want.<\/p>\n<p><a href=\"http:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-rename.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-991\" alt=\"theme-rename\" src=\"http:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-rename.png\" width=\"521\" height=\"279\" srcset=\"https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-rename.png 521w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-rename-300x161.png 300w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-rename-480x257.png 480w\" sizes=\"(max-width: 521px) 100vw, 521px\" \/><\/a><\/p>\n<p>As you can see I called my new theme &#8220;bootstrap_lightblue&#8221; because I love the bootstrap&#8217;s responsive design, but just want to make the colors lighter to match my logo.<\/p>\n<h2>Modify the new theme.<\/h2>\n<p>Next, I can use my HTML Editor to modify the &#8220;theme.css&#8221; to change the colors and upload the entire folder to my store&#8217;s new theme directory.<\/p>\n<p><a href=\"http:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-modify.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-992\" alt=\"theme-modify\" src=\"http:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-modify.png\" width=\"624\" height=\"395\" srcset=\"https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-modify.png 624w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-modify-300x190.png 300w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-modify-480x304.png 480w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/a><\/p>\n<h2>Switch your storefront to your new theme.<\/h2>\n<p>Going live is as simple as selecting the new theme from the control panel.\u00a0 It shows up automatically!<\/p>\n<p><a href=\"http:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-switch.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-993\" alt=\"theme-switch\" src=\"http:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-switch.png\" width=\"452\" height=\"222\" srcset=\"https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-switch.png 452w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-switch-300x147.png 300w\" sizes=\"(max-width: 452px) 100vw, 452px\" \/><\/a><\/p>\n<p>That&#8217;s all there is to it!\u00a0 Now let&#8217;s take a look at how the brand new light-blue background looks against our demo product.<\/p>\n<p><a href=\"http:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-test.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-994\" alt=\"theme-test\" src=\"http:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-test.png\" width=\"515\" height=\"382\" srcset=\"https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-test.png 515w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-test-300x223.png 300w, https:\/\/blog.productcart.com\/wp-content\/uploads\/2014\/06\/theme-test-480x356.png 480w\" sizes=\"(max-width: 515px) 100vw, 515px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you have a shopping cart or are currently evaluating shopping carts, then you have probably heard of themes and\/or templates.\u00a0 As it applies to a store design &#8220;theme&#8221; and &#8220;template&#8221; are two different words for the same thing.\u00a0 Essentially, they are a set of files (CSS, HTML, JavaScript, etc.) that control the look 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":[12,4],"tags":[],"class_list":["post-989","post","type-post","status-publish","format-standard","hentry","category-tips-how-tos","category-updates"],"_links":{"self":[{"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/posts\/989","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=989"}],"version-history":[{"count":0,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/posts\/989\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/media?parent=989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/categories?post=989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/tags?post=989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}