31/03/2017 THEME ELECTRONICS | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-sub-themes/theme-electronics/ 1/1

Electronics is the PT004 default theme. So if you want to use this theme you only need to add pt004.

See image below.

When you want to use the electronics theme as your theme you can do this by setting the settings in

System > Con�guration > Design as shown in the image below. The rest of the settings are done as

the main PT004 installation.

THEME ELECTRONICS

Pagayo Manuals

31/03/2017 Basic Homepage | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-basic-home/ 1/6

Go to CMS > Pages > home (select home as URL Key), here you will need to add the following data. It

is up to you to use it. This is just sample data. If you want your store to look exactly like our demo

shop, you need to add it.

Under Content > Content box:

{{block type='core/template' template='page/html/comparehome.phtml'}}

<div class="slideshow-container">

<ul class="slideshow">

<li><a href="{{config path="web/secure/base_url"}}#"><img alt="An eye for

detail - Click to Shop Eye Wear" src="{{media

url="wysiwyg/pagayo/pt004/pt004-home-slider1.jpg"}}" /></a></li>

<li><a href="{{config path="web/secure/base_url"}}#"><img alt="Style

solutions - covet-worthy styles in travel-friendly fabrics - Click to Shop

Woman" src="{{media url="wysiwyg/pagayo/pt004/pt004-home-slider2.jpg"}}"

/></a></li>

<li><a href="{{config path="web/secure/base_url"}}#"><img alt="Wing man -

hit the runway in stylish separates and casuals - Click to Shop Man" src="

{{media url="wysiwyg/pagayo/pt004/pt004-home-slider3.jpg"}}" /></a></li>

</ul>

<div class="slideshow-pager">&nbsp;</div>

<span class="slideshow-prev">&nbsp;</span> <span class="slideshow-

next">&nbsp;</span></div>

</div>

<div class="home-row-right">

<img src="{{media url="wysiwyg/pagayo/pt004/pt004-home-topbox.jpg"}}"

BASIC HOMEPAGE

Pagayo Manuals

31/03/2017 Basic Homepage | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-basic-home/ 2/6

alt="" />

</div>

<div class="home-row-2">

<div class="homebox1"><a href="#"><img alt="" src="{{media

url="wysiwyg/pagayo/pt004/pt004-home-box1.jpg"}}" /></a></div>

<div class="homebox2"><a href="#"><img alt="" src="{{media

url="wysiwyg/pagayo/pt004/pt004-home-box2.jpg"}}" /></a></div>

<div class="homebox3"><a href="#"><img alt="" src="{{media

url="wysiwyg/pagayo/pt004/pt004-home-box3.jpg"}}" /></a></div>

</div>

<div class="home-row-3">

<h3>Our Featured Products</h3>

{{block type="catalog/product_list" category_id="3"

template="catalog/product/pagayo/column_list.phtml"}}

{{block type='core/template'

template='pagayo/carousel/home_carousel.phtml'}}

<h3>New in Store</h3>

{{widget type="catalog/product_widget_new" display_type="all_products"

products_count="5"

template="catalog/product/widget/new/content/pagayo/product_column.phtml"}

}

</div>

<div class="home-seo-text">{{widget type="cms/widget_block"

template="cms/widget/static_block/default.phtml" block_id="35"}}</div>

 

31/03/2017 Basic Homepage | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-basic-home/ 3/6

Under Design > Page Layout: Select 1 column from the Layout Dropdown

Changing the number of columns.

You can change the number of products on your homepage. Please go to System > Con�guration >

PT004 > Manage content

31/03/2017 Basic Homepage | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-basic-home/ 4/6

This will give you 3, 4, 5 or 6 products in a grid on the homepage and in your categories.

Changing or adding your featured products category

{{block type="catalog/product_list" category_id="3"

template="catalog/product/pagayo/column_list.phtml"}}

From Magento 1.9.2.2 you have to also do these settings;

System > Permissions > Blocks

Add New Block

Block Name: catalog/product_list

Is Allowed : Yes

Go to Catalog > Manage Categories and add a category. Make it “Is Active” No. Now use the ID (in the

image 9) and replace it with the 3 in the home content code. The red part of the code.

31/03/2017 Basic Homepage | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-basic-home/ 5/6

New in Store

This part is a Magento widget you can replace it with what ever you want. This is a basic Magento

widget, you will have to set your column number here.

{{widget type="catalog/product_widget_new" display_type="all_products"

products_count="5"

template="catalog/product/widget/new/content/pagayo/product_column.phtml"}

}

31/03/2017 Magento User Manual | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-user-manual/ 1/5

RTL

If you like to use right to left writing you can set it here.

Display top block

Yes will show this block. No will disable this block

When you are using multi language and/or currency it is best to not

disable this block. The switches will not be shown if you do.

The top blocks

Here you can add your own text, function or images. You can use html.

MAGENTO USER MANUAL

Pagayo Manuals

31/03/2017 Magento User Manual | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-user-manual/ 2/5

Show country dropdown or �ags

To add your own �ags and names or other switch images you need to give the images your store view

codes. For example in the demo shop the USA �ag is called pt004.png and the Chinese �ag is

called pt004chinese.png. See image below.

Manage menu

31/03/2017 Magento User Manual | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-user-manual/ 3/5

Here you can add and remove main menu items. You can also add and remove Font Awesome icons.

Footer

Go to CMS > Static Blocks

All this themes blocks start with pt004.

For these footer items you need to change;

pt004-footer-social

pt004-footer-box1

pt004-footer-box2

pt004-footer-box3

pt004-footer-box4

Sale, new and featured corner banners

31/03/2017 Magento User Manual | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-user-manual/ 4/5

Go to CMS > Static Blocks

All this themes blocks start with pt004.

For these banners you need to change;

pt004-sale-label

pt004-new-product-label

pt004-featured-product-label

To make your own labels ect, it would be best to use the .psd or .afdesign �les that come with this

theme. But you can create your own. Size is 80 x 81.

Shipping banner in the cart

Go to CMS > Static Blocks

All this themes blocks start with pt004.

For these shipping banner you need to change;

pt004-cart-shipping-banner

The contact page

31/03/2017 Magento User Manual | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-user-manual/ 5/5

Go to CMS > Static Blocks

All this themes blocks start with pt004.

For the contact page you need to change;

pt004-contact-static-block

pt004-maps-static-block

In the maps block you only add the URL. For example;

https://www.google.com/maps/embed?

pb=!1m18!1m12!1m3!1d5024929.429408368!2d6.310483605557247!3d52.05098341673

797!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c78fdbe138d611%3

A0x6212cca55e0b4a52!2sSpalstraat%2C+7255+Hengelo!5e0!3m2!1sen!2snl!4v14358

32713248

31/03/2017 Magento background colors and images | Pagayo Manuals

http://manuals.pagayo.com/pt004/background-colors-and-images/ 1/4

You can very simple change the background colors and/or add background images to the Magento

PT004 default theme. You need PT004 version 1.2.0.0 or newer for this feature. You can

download/update it in your account.

For most blocks you have 3 options.

1. Use the default theme settings

2. Add your own colors

3. Add your own images

These 3 options can be used in more than 1 location as I will explain below.

First you go to System > Con�guration > Pagayo > PT004

MAGENTO BACKGROUND COLORS AND

IMAGES

Pagayo Manuals

31/03/2017 Magento background colors and images | Pagayo Manuals

http://manuals.pagayo.com/pt004/background-colors-and-images/ 2/4

So what can be changed with what?

31/03/2017 Magento background colors and images | Pagayo Manuals

http://manuals.pagayo.com/pt004/background-colors-and-images/ 3/4

31/03/2017 Magento Category Design | Pagayo Manuals

http://manuals.pagayo.com/pt004/catalog-grid-design/ 1/4

Number of columns in Catalog Grid

Admin view

Frontend view

 

Here you can add the number of columns you like. You can add 3,4,5 or 6.

Catalog Grid and Homepage Grid Design

Below you see the grid designs you can choose from.

MAGENTO CATEGORY DESIGN

Pagayo Manuals

31/03/2017 Magento Category Design | Pagayo Manuals

http://manuals.pagayo.com/pt004/catalog-grid-design/ 2/4

design1

design2

31/03/2017 Magento Category Design | Pagayo Manuals

http://manuals.pagayo.com/pt004/catalog-grid-design/ 3/4

design3

31/03/2017 Magento Category Design | Pagayo Manuals

http://manuals.pagayo.com/pt004/catalog-grid-design/ 4/4

Description above or below the product

You can choose if you want the category description above or below the products.

31/03/2017 Magento Static Blocks | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-static-blocks/ 1/6

Static blocks are installed during installation. But if you deleted one and need the original code, here it is;

pt004-home-carousel

<div class="carousel-title">

PT004 brand carousel

</div>

<div id="owl-demo">

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner1.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner2.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner3.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner4.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner5.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner6.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner7.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner8.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner1.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner2.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner3.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner4.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner5.png"}}" alt="" /></div>

MAGENTO STATIC BLOCKS

Pagayo Manuals

31/03/2017 Magento Static Blocks | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-static-blocks/ 2/6

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner6.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner7.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner8.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner6.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner7.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner8.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner1.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner2.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner3.png"}}" alt="" /></div>

<div class="item"><img src="{{media

url="wysiwyg/pagayo/pt004/banner4.png"}}" alt="" /></div>

</div>

pt004-footer-social

<ul>

<li><a title="twitter" href="https://twitter.com"><img alt="twitter"

src="{{media url="wysiwyg/pagayo/pt004/icon-social-twitter.png"}}" /></a>

</li>

<li><a title="youtube" href="http://www.youtube.com"><img alt="youtube"

src="{{media url="wysiwyg/pagayo/pt004/icon-social-youtube.png"}}" /></a>

</li>

<li><a title="linkedin" href="http://www.linkedin.comf"><img

alt="linkedin" src="{{media url="wysiwyg/pagayo/pt004/icon-social-

pinterest.png"}}" /></a></li>

<li><a title="Facebook FraVin" href="https://nl-nl.facebook.com"><img

title="Facebook" alt="" src="{{media url="wysiwyg/pagayo/pt004/icon-

social-facebook.png"}}" /></a></li>

</ul>

pt004-footer-box1

31/03/2017 Magento Static Blocks | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-static-blocks/ 3/6

<h6>About us</h6>

<p>Lorem ipsum dolor sit amet, consectetur</p>

<p><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin

fermentum leo et tortor consequat, nec pharetr</p>

<p><br />Lorem ipsum dolor sit amet, consectetur<br /><br />Telefoon:

+123456789&nbsp;<br />Lorem ipsum:&nbsp;<a title="Vragen? Mail ons"

href="mailto:info@test.com" target="_blank">info@test.com</a></p>

<p><img src="{{media url="wysiwyg/pagayo/pt004/paypal.png"}}" alt="" />

</p>

pt004-footer-box2

<h6>Popular Sites</h6>

<ul>

<li><a href="https://pagayo.com"><i class="fa fa-external-link fa-fw">

</i> Pagayo</a></li>

<li><a href="https://paypal.com"><i class="fa fa-external-link fa-fw">

</i> PayPal</a></li>

<li><a href="http://www.magento.com"><i class="fa fa-external-link fa-

fw"></i> Magento</a></li>

<li><a href="http://www.cpanel.com"><i class="fa fa-external-link fa-fw">

</i> cPanel</a></li>

<li><a href="http://www.siteground.com/magento-hosting.htm?

afcode=82c12c39d59354fafcadfcba935af5ec"><i class="fa fa-external-link fa-

fw"></i> SiteGround</a></li>

<li><a href="http://www.freepik.com/free-vector/promotion-price-tags-

vector-set_723506.htm"><i class="fa fa-external-link fa-fw"></i> Designed

by Freepik</a></li>

<li><a href="http://themeforest.net/?ref=Pagayo"><i class="fa fa-

external-link fa-fw"></i> ThemeForest</a></li>

</ul>

pt004-footer-box3

<h6>CUSTOMER SERVICE</h6>

<ul>

<li><a href="#"><i class="fa fa-envelope"></i> Contact</a></li>

<li><a title="Terms and Conditions" href="#"><i class="fa fa-pencil"></i>

Terms and Conditions</a></li>

<li><a href="#"><i class="fa fa-shield"></i> Disclaimer</a></li>

31/03/2017 Magento Static Blocks | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-static-blocks/ 4/6

<li><a href="#"><i class="fa fa-gavel"></i> Privacy</a></li>

<li><a href="#"><i class="fa fa-shield"></i> Legal Stuff</a></li>

<li><a href="#" target="_self"><i class="fa fa-user"></i> Customer

Care</a></li>

<li><a href="#"><i class="fa fa-users"></i> Our People</a></li>

<li><a href="#"><i class="fa fa-globe"></i> Our Way of Life</a></li>

<li><a href="#"><i class="fa fa-link"></i> Links</a></li>

</ul>

pt004-footer-box4

<h6><i class="fa fa-pencil-square-o fa-lg"></i> BLOG</h6>

{{widget type="blog/last" blocks_count="5" categories="1"}}

 

pt004-sale-label

<img src="{{media url="wysiwyg/pagayo/pt004/sale-banner.png"}}" alt="" />

pt004-new-product-label

<img src="{{media url="wysiwyg/pagayo/pt004/new-banner.png"}}" alt="" />

pt004-featured-product-label

<img src="{{media url="wysiwyg/pagayo/pt004/featured-banner.png"}}" alt=""

/>

pt004-cart-shipping-banner

<img src="{{media url="wysiwyg/pagayo/pt004/free-shipping-banner.jpg"}}"

alt="" />

pt004-contact-static-block

31/03/2017 Magento Static Blocks | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-static-blocks/ 5/6

<p>We&rsquo;d love to hear from you &ndash; please feel free to get in

touch with comments, questions and suggestions about our work or about

this website. You can contact most staff members directly by going to

the&nbsp;<a class="person"

href="http://pagento.com/#">People</a>&nbsp;section, or for:</p>

<p>&nbsp;</p>

<dl><dd><strong>General enquirie</strong>s</dd><dd>T +1 (0)23 4567

8900&nbsp;</dd><dd><a href="mailto:info@pagento.com">info@pagento.com</a>

<br /><strong>&nbsp;</strong></dd><dd><strong><br />Media

enquiries</strong><br />Sophie Gaston - Press and Communications

Manager</dd><dd><a href="mailto:info@pagento.com">info@pagento.com</a>

</dd><dd>T&nbsp;+1 (0)23 4567 8900</dd><dd></dd><dd><strong><br />Event

enquiries</strong><br />Megan Poole - Events Manager<br /><a

href="mailto:info@pagento.com">info@pagento.com&nbsp;</a><br />T&nbsp;+1

(0)23 4567 8900</dd></dl><dl><dd></dd><dd></dd></dl>

pt004-maps-static-block

https://www.google.com/maps/embed?

pb=!1m18!1m12!1m3!1d5024929.429408368!2d6.310483605557247!3d52.05098341673

797!2m3!1f0!2f0!3f0!3m2!1i1024!

2i768!4f13.1!3m3!1m2!1s0x47c78fdbe138d611%3A0x6212cca55e0b4a52!2sSpalstra

at%2C+7255+Hengelo!5e0!3m2!1sen!2snl!4v1435832713248

pt004-home-seo-text

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

<p>Sed varius congue cursus. Praesent id finibus sem, a scelerisque

libero. Fusce euismod, ex vel dapibus ullamcorper, felis purus posuere

nisi, ac venenatis odio tellus vitae ante. Cum sociis natoque penatibus et

magnis dis parturient montes, nascetur ridiculus mus. Nunc ante augue,

bibendum at mattis in, lobortis eget ex.</p>

<p><em>Nulla laoreet non est eu euismod. Proin sed dictum leo. Maecenas

fringilla enim in pretium gravida. Pellentesque cursus leo eu velit semper

condimentum. Quisque ante ante, placerat a finibus non, sagittis id

turpis. Morbi ut quam nec felis ultrices malesuada ac eu justo. Nullam

quam ante, tempus vitae convallis vitae, rutrum sit amet lectus. Phasellus

eu porta elit. </em></p>

<ul>

<li>Pellentesque venenatis felis at urna congue, id lobortis lorem

31/03/2017 Magento Static Blocks | Pagayo Manuals

http://manuals.pagayo.com/pt004/pt004-static-blocks/ 6/6

vestibulum.</li>

<li>Pellentesque dui massa, blandit a ipsum imperdiet, blandit imperdiet

mi.</li>

<li>Nam sed sem non sapien laoreet suscipit ultricies nec mi.</li>

</ul>

31/03/2017 Magento Customization | Pagayo Manuals

http://manuals.pagayo.com/pt004/customization/ 1/3

When you want to customize my PT004 theme please read this page.CSS customization

When you want to make your own changes. Make sure you do not change the default theme  les. If

you do they will be overwritten when you update the theme. Below you can see how to make your

changes in css. You should use the sample-pt004-custom.css le, as you can see below and rename it

to pt004-custom.css than add your changes in this le.

Create your own sub theme

When you want to create your own sub theme you can do that. You should add the theme to Magen-

to as shown below.

MAGENTO CUSTOMIZATION

Pagayo Manuals

31/03/2017 Magento Customization | Pagayo Manuals

http://manuals.pagayo.com/pt004/customization/ 2/3

You should name your sub theme the same on your server.

31/03/2017 Magento Customization | Pagayo Manuals

http://manuals.pagayo.com/pt004/customization/ 3/3