HelloShopper GO

Documentacion de los templates

Need Help?

Instalando el Tema

-Primero, ingresa a tu Panel de Administracion de Magento GO y ve a “Diseñar” > “Editor de Temas”

-Desde la opcion “Tema Actual”, abajo de “Your Starting Theme”, selecciona “Personalizar”. Si no tienes este Tema (Your Starting Theme) abajo de “Tema Actual”, selecciona el Tema “T-shop” abajo de “Temas Disponibles” (click en Personalizar).

-Desde el menu de “Personalizacion de Tema”, selecciona la pestaña “Editor de CSS”

-Dentro del menu “Editor de CSS”, selecciona “Gestionar” al lado de

-Haz click en “Examinar archivos…” y busca en la carpeta de tu Tema la carpeta “Css Editor Images”. Vas a encontrar todas las imagenes necesarias dentro de esta carpeta, seleccionalas y subelas. Las imagenes deberian estar ahora dentro de la carpeta “Imagenes de Editor CSS”.

-Ahora navega nuevamente al menu “Editor de CSS”, verás la pestañana  “CSS Personalizada”, haz click en “Browse…” al lado de “Cargar el archivo custom.css” y busca el archivo style.css dentro de la carpeta  “Custom CSS” de tu Tema. Luego haz click en “Guardar”.

-Una vez que haz terminado de subir el archivo custom.css, navega al menu de “Editor Java Script”. Dentro de las opciones de “Tema Java Script” haz click en “Examinar Archivos…”, busca los archivos .js adentro de la carpeta “js” de tu Tema, seleccionalos a todos y subelos. Para helloShopper GO, el orden de los archivos .js debe ser: 1° jquery-1.5.2.min.js , 2° jquery.jcarousel.min.js , 3° custom.js  Ahora haz click en “Guardar”.

Finalmente, debes cambiar la dimensión de la imagen “Vista en lista del widget de contenido para nuevos productos” en la opción “Imágenes de Catálogo”, bajo el menú principal “Personalización del tema”. Busca “Vista en lista del widget de contenido para nuevos productos” y cambia la dimensión Ancho (px) a 110, como se muestra en la imagen:

shoppergo-esp

Important!: Be sure to click in "Show/Hide Editor" in order to HIDE the HTML Editor (WYSIWYG Editor). If not, the code will be displayed wrong.

Configurando la HomePage

-Para configurar la HomePage, navega a CMS>Paginas>Administre Contenido>selecciona la HomePage con “Clave URL”= “home”.

-En el menu de “Informacion de la Pagina”, selecciona “Contenido”, asegúrate de ocultar el editor de texto, y copia/pega el contenido siguiente (Content:) o el contenido del archivo “homepage.txt” de tu carpeta del Tema (es lo mismo).

-Luego ve a la pestaña “Diseño” y selecciona “1column” como opcion de “Diseño”. Ahora haz click en “Guardar Pagina”.

 

Content:
<div class="page-home">{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="15"}} {{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="16"}} {{widget type="catalog/product_widget_new" display_products="all_products" show_paginator="0" products_per_page="8" products_count="8" template="catalog/product/widget/new/content/new_list.phtml"}}</div>

 

Static Blocks are extra HTML or Plain Text that can be integrated to your store. We set these up so you can customize links, images or text included in our themes. We are now going to install our static blocks for this theme, within your Admin-panel go to CMS → Static Blocks → Add New Block.
Important!: Be sure to click in "Show/Hide Editor" in order to HIDE the HTML Editor (WYSIWYG Editor). If not, the code will be displayed wrong.

HelloSlide

Para mostrar las imagenes de productos del slider, tienes que subirlas directamente dentro del Bloque-estatico HelloSlide. Para hacer esto, haz click en el boton “Insertar imagen…”, luego haz clikc en “Examinar archivos…” y busca la carpeta “HelloSlide Images” dentro de la carpeta de tu Tema. Selecciona todas las imagenes dentro de esta carpeta y subelas, finalmente haz click en el boton “Subir archivos”. Ahora puedes cerrar la ventana “Insert File…”.

Para subir una imagen de un producto tuyo, solo subela en este bloque-estatico, luego añade el nombre de tu imagen en: <img src=”{{media url=”apple-macbook-pro-ma464ll-a-15-4-notebook-pc.jpg”}}” alt=”Apple MacBook Pro MA464LL/A 15.4&quot; Notebook PC” />

Cambia “apple-macbook-pro-ma464ll-a-15-4-notebook-pc.jpg”  por el nombre de tu imagen. También puedes cambiar el nombre del producto, precio, etc., dentro del contenido de este bloque-estatico.

Block Title: HelloSlide
Identifier: helloslide
Satus: Enabled

Content:
<div id="slide">
<ul class="slide">
<li class="item">
<div class="content"><img src="{{media url="apple-macbook-pro-ma464ll-a-15-4-notebook-pc.jpg"}}" alt="Apple MacBook Pro MA464LL/A 15.4" Notebook PC" />
<div class="product-details">
<h2 class="product-name">Apple MacBook Pro MA464LL/A 15.4" Notebook PC</h2>
<div class="price-box"><span id="product-price-25" class="regular-price"><span class="price">$2,299.99</span></span></div>
<div class="description">You've seen improvements in notebook performance before - but never on this scale. The Intel Core Duo powering MacBook Pro is actually two processors built into a single chip.</div>
<a class="button" title="Apple MacBook Pro MA464LL/A 15.4" Notebook PC" href="http://helloshoppergo.gostorego.com/electronics/computers/laptops/apple-macbook-pro-ma464ll-a-15-4-notebook-pc-2-0-ghz-intel-core-duo-1-gb-ram-100-gb-hard-drive-superdrive.html"><span><span>View Details</span></span></a></div>
</div>
</li>
<li class="item">
<div class="content"><img src="{{media url="acer-ferrari-3200-notebook-computer-pc.jpg"}}" alt="Acer Ferrari 3200 Notebook Computer PC" />
<div class="product-details">
<h2 class="product-name">Acer Ferrari 3200 Notebook Computer PC</h2>
<div class="price-box"><span id="product-price-26" class="regular-price"><span class="price">$1,799.99</span></span></div>
<div class="description">This exclusive edition is another striking symbol of cooperation between Acer and Ferrari -- two progressive companies with proud heritages built on passion, innovation, power and success</div>
<a class="button" title="Acer Ferrari 3200 Notebook Computer PC" href="http://helloshoppergo.gostorego.com/electronics/computers/laptops/acer-ferrari-3200-notebook-computer-pc.html"><span><span>View Details</span></span></a></div>
</div>
</li>
<li class="item">
<div class="content"><img src="{{media url="toshiba-m285-e-14.jpg"}}" alt="Toshiba M285-E 14"" />
<div class="product-details">
<h2 class="product-name">Toshiba M285-E 14"</h2>
<div class="price-box"><span id="product-price-28" class="regular-price"><span class="price">$1,599.99</span></span></div>
<div class="description">Get the competitive edge with the Gateway M285-E. This widescreen Convertible Notebook functions as both a conventional notebook and a tablet.</div>
<a class="button" title="Toshiba M285-E 14"" href="http://helloshoppergo.gostorego.com/electronics/computers/laptops/toshiba-satellite-a135-s4527-155-4-notebook-pc-intel-pentium-dual-core-processor-t2080-1-gb-ram-120-gb-hard-drive-supermulti-dvd-drive-vista-premium.html"><span><span>View Details</span></span></a></div>
</div>
</li>
<li class="item">
<div class="content"><img src="{{media url="sony-vaio-11-1-notebook-pc.jpg"}}" alt="Sony VAIO 11.1" Notebook PC" />
<div class="product-details">
<h2 class="product-name">Sony VAIO 11.1" Notebook PC</h2>
<div class="price-box">
<p class="minimal-price"><span class="price-label">As low as:</span> <span class="price">$2,699.99</span></p>
</div>
<div class="description">Weighing in at just an amazing 2.84 pounds and offering a sleek, durable carbon-fiber case in charcoal black. And with 4 to 10 hours of standard battery life, it has the stamina to power you through your most demanding applications. With the integrated wireless WAN, you can access the national Sprint Mobile Broadband service to extend your wireless coverage beyond LAN access networks and hotspots, giving you the freedom to go farther, do more, and stay connected.</div>
<a class="button" title="Sony VAIO 11.1" Notebook PC" href="http://helloshoppergo.gostorego.com/electronics/computers/laptops/sony-vaio-vgn-txn27n-b-11-1-notebook-pc.html"><span><span>View Details</span></span></a></div>
</div>
</li>
</ul>
</div>
<div class="blockhome"><img src="{{media url="homeblock1.jpg"}}" alt="" /></div>
<div class="blockhome"><img src="{{media url="homeblock2.jpg"}}" alt="" /></div>

 

HomeCategory

Block Title: HomeCategory
Identifier: homecategory
Satus: Enabled

Content:
<div class="clear"> </div>
<div class="blockCategory" style="margin-left: 0!important;">
<div class="cat-image"><span class="cat-title"><span>Furniture</span></span> <img src="{{media url="furniture.png"}}" alt="" /></div>
<div class="cat-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
<a class="cat-view" href="http://helloshoppergo.gostorego.com/furniture.html">> View Products</a></div>
<div class="blockCategory">
<div class="cat-image"><span class="cat-title"><span>Electronics</span></span> <img src="{{media url="electronic.png"}}" alt="" /></div>
<div class="cat-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
<a class="cat-view" href="http://helloshoppergo.gostorego.com/electronics.html">> View Products</a></div>
<div class="blockCategory">
<div class="cat-image"><span class="cat-title"><span>Apparel</span></span> <img src="{{media url="apparel.png"}}" alt="" /></div>
<div class="cat-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
<a class="cat-view" href="http://helloshoppergo.gostorego.com/apparel.html">> View Products</a></div>