Electronics Homepage 2

Just a different homepage idea

Go To CMS > Pages and open the page with Url key “home”. Past the code below in it.

Screen Shot 2016-01-22 at 12.38.19

<p>{{block type='core/template' template='page/html/comparehome.phtml'}}</p>
<p>{{block type='core/template' template='pagayo/carousel/home_one.phtml'}}</p>
<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">
<div class="scroll-background">
<div class="scroll-background-text">
<h2>This is just a cool idea</h2>
<h3>If you like it you can use it. If not, just delete it!</h3>
<p>I am doing my best to keep this theme as clean as possible. But if you like something and you do not see it, just ask!</p>
<div class="button"><a href="elizabeth-knit-top-710.html">Click me</a></div>
</div>
</div>
<h3>Our Featured Products</h3>
{{block type="catalog/product_list" category_id="3" template="catalog/product/pagayo/column_list.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="4"}}</div>

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

Schermafbeelding 2015-07-25 om 16.50.15.png

Changing the number of columns.
You can change the number of products on your homepage. Please go to System > Configuration > PT004 > Manage content

Schermafbeelding 2015-10-07 om 17.46.19
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

Schermafbeelding 2015-10-29 om 09.58.16

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"}}

Schermafbeelding 2015-10-13 om 08.38.03

Changing/creating the carousel/slider

Go To CMS > Static Block and create a new static block “pt004-home-one-carousel”. Add the following code below. Replace the category id’s (marked red) for your own. Just like you did with the featured products. Or if you just like to see the slides, remove the <div></div> that contain the category products.

There are two owl carousels in this homepage! Make sure to keep them both!

The reason for this is that on a smartphone the sliding products look bad. So than only the slides are loaded. But you can play with it.

<div class="pt004-carousel-small">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img src="{{media url="wysiwyg/pagayo/sport/slide11.jpg"}}" alt="" /></div>
<div class="item"><img src="{{media url="wysiwyg/pagayo/sport/slide21.jpg"}}" alt="" /></div>
<div class="item"><img src="{{media url="wysiwyg/pagayo/sport/slide31.jpg"}}" alt="" /></div>
</div>
</div>
<div class="pt004-carousel">
<div id="owl-demo2" class="owl-carousel owl-theme">
<div class="item"><img src="{{media url="wysiwyg/pagayo/sport/slide11.jpg"}}" alt="" /></div>
<div class="item">{{block type="catalog/product_list" category_id="56" template="catalog/product/pagayo/column_list.phtml"}}</div>
<div class="item"><img src="{{media url="wysiwyg/pagayo/sport/slide21.jpg"}}" alt="" /></div>
<div class="item">{{block type="catalog/product_list" category_id="56" template="catalog/product/pagayo/column_list.phtml"}}</div>
<div class="item"><img src="{{media url="wysiwyg/pagayo/sport/slide31.jpg"}}" alt="" /></div>
<div class="item">{{block type="catalog/product_list" category_id="56" template="catalog/product/pagayo/column_list.phtml"}}</div>
</div>
</div>