{"id":6486,"date":"2014-11-20T20:27:08","date_gmt":"2014-11-20T20:27:08","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6486"},"modified":"2019-03-03T06:58:04","modified_gmt":"2019-03-03T06:58:04","slug":"como-crear-una-nueva-plantilla-en-prestashop-1-6-x","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/","title":{"rendered":"Como crear una nueva plantilla en Prestashop 1.6.x"},"content":{"rendered":"<p>Existen muchas plantillas predise\u00f1adas para Prestashop que puedes encontrar en diversos portales a precios muy razonables pero en algunas ocasiones necesitamos crear un tema totalmente personalizado y vemos imposible encontrar una plantilla predise\u00f1ada que nos ahorre el trabajo.<\/p>\n<p>La experiencia nos dice que la mejor forma de crear una plantilla totalmente personalizada es partir de la plantilla por defecto de Prestashop y empezar a cambiar los archivos css y tpl\u2019s hasta llegar al objetivo final. Se deber\u00e1 tener unos conocimientos avanzados al menos sobre CSS (especialmente Bootstrap), HTML y Javascript para realizar las labores de maquetaci\u00f3n.<\/p>\n<p>Por otro lado, es importante remarcar que no modificaremos el tema por defecto. Eso nunca lo tenemos que hacer. Tenemos que duplicarlo para evitar problemas futuros.<\/p>\n<p>Qu\u00e9 pasos debemos seguir para duplicar la plantilla por defecto de Prestashop y tener nuestra nueva plantilla?<\/p>\n<p>A\u00f1adiremos un nuevo tema desde <em>Preferencias -&gt; Temas<\/em> de la administraci\u00f3n de nuestra tienda. Pulsaremos en <em>A\u00f1adir tema<\/em>.<\/p>\n<p>Aparecer\u00e1n varias opciones, a nosotros nos va a interesar utilizar la \u00faltima opci\u00f3n, <em>crear una nueva plantilla<\/em>. Seguidamente tendremos que rellenar el siguiente formulario:<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/new_theme_prestashop.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6491\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/new_theme_prestashop.png\" alt=\"new_theme_prestashop\" width=\"1141\" height=\"563\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/new_theme_prestashop.png 1141w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/new_theme_prestashop-300x148.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/new_theme_prestashop-1024x505.png 1024w\" sizes=\"auto, (max-width: 1141px) 100vw, 1141px\" \/><\/a><\/p>\n<ul>\n<li>En el nombre de la plantilla deberemos escribir el nombre identificativo de su plantilla.<\/li>\n<li>No es obligatorio pero ser\u00eda una mejora a\u00f1adir una captura o previsualizaci\u00f3n del tema en el campo Vista previa de la imagen para la plantilla.<\/li>\n<li>Indicar si tu tema va a utilizar columnas por defecto.<\/li>\n<li>Indicar el n\u00famero de productos por p\u00e1gina.<\/li>\n<li>El nombre del directorio de la plantilla deberemos escribir un nombre identificativo y sin espacios.<\/li>\n<li>Seleccionar el tema \u201cdefault-bootstrap\u201d como modelo.<\/li>\n<li>Indicar si queremos un tema adaptado a los dispositivos m\u00f3viles o no.<\/li>\n<\/ul>\n<p>Al pulsar en Guardar nos daremos cuenta de que ahora podemos seleccionar nuestro nuevo tema.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/prestashop_my_theme.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6492\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/prestashop_my_theme.png\" alt=\"prestashop_my_theme\" width=\"1137\" height=\"485\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/prestashop_my_theme.png 1137w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/prestashop_my_theme-300x127.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/prestashop_my_theme-1024x436.png 1024w\" sizes=\"auto, (max-width: 1137px) 100vw, 1137px\" \/><\/a><\/p>\n<p>Seleccionaremos nuestro nueva tema y nos aparecer\u00e1 una p\u00e1gina de M\u00f3dulos para instalar. En esta p\u00e1gina podremos habilitar los m\u00f3dulos que deseemos visualizar y deshabilitaremos los que no.<\/p>\n<p>La siguiente p\u00e1gina solo nos muestra que las im\u00e1genes han sido actualizadas correctamente en la base de datos para nuestro nuevo tema. Por tanto, tan solo deberemos pulsar en terminar para poder seleccionar nuestro nuevo tema.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/my_theme.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6493\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/my_theme.png\" alt=\"my_theme\" width=\"1130\" height=\"530\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/my_theme.png 1130w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/my_theme-300x140.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/11\/my_theme-1024x480.png 1024w\" sizes=\"auto, (max-width: 1130px) 100vw, 1130px\" \/><\/a><\/p>\n<p>De esta forma siempre tendremos el tema por defecto disponible y evitaremos problemas futuros en cuanto a actualizaciones de m\u00f3dulos que se usan en las plantillas. Adem\u00e1s de esto, la plantilla por defecto de Presatshop es la mejor sin duda ya que la han programado ellos mismos sin la interferencia de un tercero. Ahora solo queda realizar las modificaciones sobre el nuevo tema directamente en los archivos css, tpl y js.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Existen muchas plantillas predise\u00f1adas para Prestashop que puedes encontrar en diversos portales a precios muy razonables pero en algunas ocasiones necesitamos crear un tema totalmente personalizado y vemos imposible encontrar una plantilla predise\u00f1ada que nos ahorre el trabajo. La experiencia nos dice que la mejor forma de crear una plantilla totalmente personalizada es partir de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4967,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[124,169],"class_list":["post-6486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-prestashop","tag-modulos-prestashop","tag-themes"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como crear una nueva plantilla en Prestashop 1.6.x - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Explicaci\u00f3n paso a paso de como crear una nueva plantilla en PrestaShop 1.6.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como crear una nueva plantilla en Prestashop 1.6.x - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Explicaci\u00f3n paso a paso de como crear una nueva plantilla en PrestaShop 1.6.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-20T20:27:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-03T06:58:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/prestashop1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/\",\"name\":\"Como crear una nueva plantilla en Prestashop 1.6.x - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/prestashop1.jpg\",\"datePublished\":\"2014-11-20T20:27:08+00:00\",\"dateModified\":\"2019-03-03T06:58:04+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Explicaci\u00f3n paso a paso de como crear una nueva plantilla en PrestaShop 1.6.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/prestashop1.jpg\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/prestashop1.jpg\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como crear una nueva plantilla en Prestashop 1.6.x\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como crear una nueva plantilla en Prestashop 1.6.x - Jose Aguilar Blog","description":"Explicaci\u00f3n paso a paso de como crear una nueva plantilla en PrestaShop 1.6.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Como crear una nueva plantilla en Prestashop 1.6.x - Jose Aguilar Blog","og_description":"Explicaci\u00f3n paso a paso de como crear una nueva plantilla en PrestaShop 1.6.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2014-11-20T20:27:08+00:00","article_modified_time":"2019-03-03T06:58:04+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/prestashop1.jpg","type":"image\/jpeg"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/","url":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/","name":"Como crear una nueva plantilla en Prestashop 1.6.x - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/prestashop1.jpg","datePublished":"2014-11-20T20:27:08+00:00","dateModified":"2019-03-03T06:58:04+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Explicaci\u00f3n paso a paso de como crear una nueva plantilla en PrestaShop 1.6.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/prestashop1.jpg","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/prestashop1.jpg","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Como crear una nueva plantilla en Prestashop 1.6.x"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6486"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6486\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/4967"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}