Als je Magento eenmaal geïnstalleerd hebt, ziet de frontend er standaard nou niet echt geweldig uit. Daarom ga ik je nu uitleggen hoe je een (gratis) Magento template moet installeren. Over het algemeen is die niet zo heel moeilijk, ik doe dit aan de hand van een gratis Magento template, zodat iedereen er mee kan oefenen. Maar wil je voor jouw webwinkel een unieke template hebben, dan adviseer ik je een betaalde aan te schaffen. Installatie hiervan gaat vrijwel op de zelfde manier, dus dat moet vast lukken.

Magento template downloaden

Ik wil beginnen met de uitleg aan de hand van een gratis Magento template, die gemaakt is door Template Master. Later wil ik jullie nog een overzicht geven van de beste gratis Magento templates en de beste templates sites om een unieke template aan te schaffen. Voor nu kun je even kiezen uit de Magento Absolute Theme en de Magento Classics Theme. Over het algemeen wordt er bij de meeste templates ook wel een installatie handleiding gegeven, de werkwijze komt over het algemeen overeen met de wijze zoals deze hieronder wordt besproken.

Magento Absolute Theme

In deze tutorial maak ik gebruik van het Magento Absolute Theme. Je besteld hem door het invullen van je domeinnaam en te klikken op ‘add to cart’. Alle overige opties zijn niet nodig om aan te schaffen. Je moet nu even een account aanmaken voor deze webwinkel, maar gelukkig is dat door de one page checkout redelijk snel voor elkaar. Vervolgens ontvang je een mailtje, voorzien van een download link en je kunt er ook altijd bij via jouw eigen account op Template Master, onder ‘My Downloadable Products’. Als het goed is heb je nu het bestand f001.absolute. zip gedownload.

Magento template installeren

We gaan nu de zojuist gedownloade template installeren. Voor de gene die nog niet helemaal wegwijs zijn met het gebruik van FTP, raadt ik aan even het artikel over Magento installeren te lezen. We gaan daar nu namelijk iets sneller door heen.

• pak het zip bestand met de template uit (in de map installation zit het bestand install.html waar ook alles uitgelegd wordt)
• upload nu de bestanden uit het juiste Magento versie mapje template source x.x.x. naar de root van jouw webserver (public_html). In mijn geval dus ‘template source 1.6.1.0’.
• als het goed is heb je jouw Magento cache nog uit staan, maar check dit nog even onder: Systeem -> Cache-beheer in de backoffice.
• ga nu naar Systeem -> Configuratie ->Algemeen -> Inhoud beheren en zet ‘WYSWIGY editor activeren’ op Standaard gedeactiveerd.

WYSIWYG editor standaard uitschakelen

• vervolgens ga je naar CMS -> Pagina’s en klik je op de pagina met de titel Home page (dit is de homepage van jouw webwinkel)
• vervolgens klik je op inhoud en hier vervang je de tekst voor de volgende code:

<div id=”slider”>
<div>
<div>
<a href=”#section1″ title=”Slide 1″ class=””>1</a>
<a href=”#section2″ title=”Slide 2″ class=””>2</a>
<a href=”#section3″ title=”Slide 3″ class=””>3</a>
<a href=”#section4″ title=”Slide 4″ class=””>4</a>
<a href=”#section5″ title=”Slide 5″ class=””>5</a>
</div>
</div>
<div>
<div>
<div id=”section1″>
<a href=”{{store url=””}}”><img src=”{{skin url=”images/slider/slider1.jpg”}}” alt=”” /></a>
</div>
<div id=”section2″>
<a href=”{{store url=””}}”><img src=”{{skin url=”images/slider/slider2.jpg”}}” alt=”” /></a>
</div>
<div id=”section3″>
<a href=”{{store url=””}}”><img src=”{{skin url=”images/slider/slider3.jpg”}}” alt=”” /></a>
</div>
<div id=”section4″>
<a href=”{{store url=””}}”><img src=”{{skin url=”images/slider/slider4.jpg”}}” alt=”” /></a>
</div>
<div id=”section5″>
<a href=”{{store url=””}}”><img src=”{{skin url=”images/slider/slider5.jpg”}}” alt=”” /></a>
</div>
</div>
</div>
</div>
<script type=”text/javascript” charset=”utf-8″>
var my_glider = new Glider(‘slider’, {duration:0.5, autoGlide: true, frequency: 4, initialSection: ‘section1’});
</script>

• onder ontwerp kies je bij layout voor ‘2 kolommen met rechterbalk’ en bij layout update xml plaats je de volgende code:

<reference name=”head”>
<action method=”addItem”><type>skin_js</type><name>js/glider.js</name></action>
<action method=”addItem”><type>skin_js</type><name>js/slider.js</name></action>
<action method=”addItem”><type>skin_js</type><name>js/productInfo.js</name></action>
</reference>
<reference name=”content”>
<block type=”catalog/product_new” name=”home.new” alias=”product_new” template=”catalog/product/new.phtml”>
<action method=”setProductsCount”><count>8</count></action>
<action method=”addPriceBlockType”>
<type>bundle</type>
<block>bundle/catalog_product_price</block>
<template>bundle/catalog/product/price.phtml</template>
</action>
</block>
</reference>
<reference name=”right”>
<block type=”core/template” name=”right.callout1″ template=”callouts/left_col.phtml” before=”-“>
<action method=”setImgSrc”><src>images/media/callout_side1.jpg</src></action>
<action method=”setImgAlt” translate=”alt” module=”catalog”><alt>Call Us Toll Free. (555) 555-555</alt></action>
<action method=”setLinkUrl”><url>checkout/cart</url></action>
</block>
<block type=”core/template” name=”right.callout2″ template=”callouts/left_col.phtml” after=”right.callout1″>
<action method=”setImgSrc”><src>images/media/callout_side2.jpg</src></action>
<action method=”setImgAlt” translate=”alt” module=”catalog”><alt>Free domestic shippings</alt></action>
<action method=”setLinkUrl”><url>checkout/cart</url></action>
</block>
<block type=”newsletter/subscribe” name=”right.newsletter” template=”newsletter/subscribe.phtml” after=”right.callout2″/>
<block type=”tag/popular” name=”tags_popular” template=”tag/popular.phtml”/>
</reference>
<reference name=”before_footer”>
<block type=”featured/featured” name=”home.featured” template=”catalog/product/featured.phtml”>
<action method=”setProductsCount”><count>25</count></action>
</block>
</reference>

• we klikken op pagina opslaan om zo de homepagina aanpassingen op te slaan
• voor deze template moeten we een nieuw productattribuut aan maken, ga hiervoor naar catalogus -> attributen -beheer attributen
• klik rechts bovenin op nieuw attribuut aanmaken
• bij attribuutcode vul je ‘featured’ in en catalogus invoertype voor winkeleigenaar zet je op ja/nee
• onder beheer label / opties vul je bij admin (de naam zoals het attribuut wordt weergegeven in de backoffice) ‘Featured’ in
• de rest blijft op de standaard waardes, zoals in de afbeelding hieronder. Klik vervolgens op attribuut opslaan om het attribuut op te slaan.

Featured attribuut aanmaken

• we gaan nu een aantal static blocks aanmaken. Dit zijn geen complete pagina’s maar blokken die we in principe overal in Magento kunnen aanroepen. Ga naar CMS -> Statische blokken en klik op Nieuw blok toevoegen.
• vul nu bij blocktitel de naam ‘Contacts’ in en bij Identifier ‘contacts’. Met het eerste geef je het static block een naam voor eigen gebruik, de indentifier is de code waarmee het static block aangeroepen kan worden binnen Magento.
• de status stel je uiteraard in op ingeschakeld, anders kan het block ook niet weergegeven worden. Bij inhoud plak je de volgende (aangepaste) tekst:  Company Name | USA, NY, Street Address | Phone:  1-800-000-0000

Het aanmaken van een static block

•  er moeten nu nog een aantal static blocks aangemaakt worden, dit gaat op dezelfde manier als hierboven beschreven
• static block ‘menu’ met de volgende inhoud:

 <li><a href=”{{store url=”about”}}”><span>About Us</span></a></li>
<li><a href=”{{store url=”contacts”}}”><span>Contact Us</span></a></li>

• wijzig het bestaande static block ‘footer_links’ met de volgende inhoud:

<div>
<ul>
<li><h6>About us</h6>
<ul>
<li><a href=”{{store direct_url=”about”}}”>About Us</a></li>
<li><a href=”{{store direct_url=”our-company”}}”>Our company</a></li>
<li><a href=”{{store direct_url=”catalog/seo_sitemap/category”}}”>Sitemap</a></li>
</ul>
</li>
<li><h6>Customer information</h6>
<ul>
<li><a href=”{{store direct_url=”contacts”}}”>Contact Us</a></li>
<li><a href=”{{store direct_url=”price-matching”}}”>Price matching</a></li>
<li><a href=”{{store direct_url=”testimonials”}}”>Testimonials</a></li>
</ul>
</li>
<li><h6>Security & privacy</h6>
<ul>
<li><a href=”{{store direct_url=”privacy”}}”>Privacy Policy</a></li>
<li><a href=”{{store direct_url=”safe-shopping”}}”>Safe & secure shopping</a></li>
<li><a href=”{{store direct_url=”terms”}}”>Terms & conditions</a></li>
</ul>
</li>
<li><h6>Shipping & returns</h6>
<ul>
<li><a href=”{{store direct_url=”delivery”}}”>Delivery information</a></li>
<li><a href=”{{store direct_url=”guarantees”}}”>Satisfaction guarantee</a></li>
<li><a href=”{{store direct_url=”returns”}}”>Returns policy</a></li>
</ul>
</li>
</ul>
</div>

Magento theme activeren

Alles staat nu klaar om het theme te activeren in Magento. Volg onderstaande stappen op en het uiterlijk van jouw webwinkel is totaal vernieuwd 😉

• we gaan naar Systeem -> Configuratie -> Algemeen -> Ontwerp -> Thema’s
• vul nu onder vertalingen, templates, skin en layout ‘f001’ in en klik op configuratie opslaan

• surf naar of refresh de frontend van jouw webwinkel en zie daar jouw zelf gemaakte webwinkel
• waarschijnlijk heb je onderin een lelijke balk staan, deze wordt later nog gevuld met producten. Zodra je producten aanmaakt en hierbij featured op ja zet worden die daar afgebeeld.
• liever een andere kleur? Vul bij skin een van de volgde waarde in: f001, f001_green, f001_grey, f001_orange, f001_pink, f001_red, f001_sea_green, f001_silver, f001_violet, f001_yellow.