Cleo

Responsive Magento Theme

• created: 03/08/2015
• latest update: 07/05/2016
• by: WeltPixel Team
• email: support@weltpixel.com

Cleo Documentation

The use of this product must comply with its terms and conditions. The regular (standard) license allows you to create one End Product for yourself or one client.

Allowed - With regular license you can do the following:

·         Install the theme on a test server for testing and development purposes

·         Customize the template to fit your website's needs

Not Allowed - With the regular license you are not allowed to do the following:

·         Create multiple websites. For multiple websites you will need multiple regular licenses

·         Multi-store Magento installations. Each regular license entitles you to use the theme in only one store (store/domain/subdomain). For multiple stores/domains/subdomains you will need multiple regular licenses

For more information about licenses please contact us at support@weltpixel.com.

The theme includes the following files:

·         Theme files

·         Patch

·         Documentation

·         Licensing

·         Cleo Sample data

Separate Design Package:

Cleo theme comes with its own design package for the theme as you can see in the folder structure:

app/design/frontend/cleo/default

app/design/frontend/cleo/default/layout

app/design/frontend/cleo/default/template

Design Package advantages:

·         We highly recommend to use the same folder structure to implement a theme into Magento to avoid any error

·         Updating your theme will not affect custom template changes

Installing Cleo on a pre-existing Magento Store:

Before installing Cleo template on a Magento Store please check the theme compatibility. Cleo is currently compatible with the following Magento versions:

Magento Community Edition:

·         1.8.0

·         1.8.1

·         1.9.0

·         1.9.1

·         1.9.2

·         1.9.2.x

Magento Enterprise Edition:

·         1.14.0

·         1.14.1

·         1.14.2

·         1.14.2.x

It is highly recommended to install the theme first on a testing server before you install it on a live (production) server.

Step 1.

Disable Magento Cache -> System -> Cache Management -> Select all and hit disable

Step 2.

Disable compilation -> System -> Tools -> Compilation

Step 3.

Disable JavaScript and CSS file Merging -> System -> Configuration -> Developer

After installing the theme all the above can be re-enabled

Step 4.

If any of the base theme file was modified, please remove all changes that you made. Cleo is built as a design package that relies on the "base" Magento theme.

Magento "base" theme should never be modified! Any modification can break Cleo's functionality. All modifications should be made as a custom sub-theme.

Step 5.

Upload the content from Theme Files into the root of your Magento installation via an FTP client.

This process will not overwrite any file that you might have on your server, it will only merge them!

Step 6. Enable the Theme!!

After the steps above have been completed, enable the theme by going to:

 System -> Configuration -> Design

Package -> Current Package Name -> type cleo
Themes -> Default -> type default

Step 7.

Flush any cache that you might still have enabled on your server or in Magento.

Step 8.

Check the "Patch" folder from Cleo Pack and if availlable for your magento version, apply the patch files by simply copying the patch file content on top of your Magento installation.

!Note: Security patch SUPEE-6788

Magento 1.9.2.2 / 1.14.2.2 or higher has this security patch included, no additional action is required. 

If you install this security patch on any magento version previous than 1.9.2.2 / 1.14.2.2 you have to manually allow permision for three Weltpixel blocks in order to corectly display them.

newsletter/subscribe
weltpixel/product_list
weltpixel/product_new

You can do that from Magento Admin > System > Permisions > Block > Add New just like in the picture below.

Import theme settings

Import sample theme configuration

WeltPixel -> WeltPixel Import/Export

Choose file -> Cleo Sample Data -> sample_settings.csv

Import sample pages

WeltPixel -> WeltPixel Import/Export

Choose file -> Cleo Sample Data -> sample_pages.csv

Import Homepage Slider

To import homepage slider go to:

WeltPixel -> AM -> AM Revolution Slider -> Import

Choose file -> Cleo Sample Data -> sample_homepage_slider.zip

To replace your logo simply upload your image to this directory:

/skin/frontend/cleo/default/images/media/ 

Go to System -> Configuration -> Design ->Header and place the name of your image into the Logo Image Src field.

If you want to enable the sample Cleo homepage you must select the right homepage in Magento. You can choose between 4 demo homepages we already created. Before trying to select sample homepage make sure you imported the sample content as described in the section <Import Sample Content>.

Go to System -> Configuration -> General -> Web -> Default Pages and from the dropdown menu select between 

Cleo Home Page V1

Cleo Home Page V2

Cleo Home Page V3

Cleo Home Page V4

CMS page elements

Featured Products

{{block type="weltpixel/product_list" category_id="13" num_products="5" title="Featured Products" template="catalog/product/featured_products.phtml"}}

New Products

{{block type="weltpixel/product_new" num_products="5" title="New Products" template="catalog/product/new_products.phtml"}}

Recently Viewed Products

{{block type="weltpixel/product_recent" num_products="5" title="Recent Products" template="catalog/product/recent_products.phtml"}}

We added some additional page layouts to perfectly fit your design needs:

·         1 column

·         2 columns with left bar

·         2 columns with right bar

·         3 columns

·         Full Screen

·         1 column merged header

·         2 columns with left bar merged header

·         2 columns with right bar merged header

·         3 columns merged header

Merged Header

The merged header page layouts will offer a modern look to your store, it works perfectly when the header is set to transparent.

Full Width Layout

Full width page layout is especially designed to go over any boundary and take advantage of full-width design in alternative with the boxed one.

Category page extra content

Category extra content fields will offer you an additional area where you can easily plug in content.

The top section is designed to highlight beautiful category heroes and stylish category descriptions that take advantage of the full width of the page.

The bottom section is an amazing place for additional content that you might want to feature at the end of every category page such as a brand bar, recently viewed products, featured categories and extra description for SEO purposes.

To add content to each category:

Go to Catalog -> Manage Categories -> Custom Design -> here you will find two additional text areas called Extra description top and Extra description bottom

We also considered the traditional position that works best when a left or right sidebar is used. In this scenario the category description goes under General Information -> Description and the image in the image upload section.

All content areas can be used either separate or combined.

Look and feel of the category page

Additional customization options can be found under:

WeltPixel -> Cleo Theme -> Theme Settings -> Category page options

·         Quick view design - Cleo offers 2 quickview styles

o   Inline

o   Lightbox

·         Any product information setting can be enabled or disabled , the list of options include:

o   Show Price [ Yes / No ] *Choose the quick view design

o   Show Ratings [ Yes / No ] *The element will be displayed on product  hover

o   New and Sale tag [ Yes / No ] *The element will be displayed on product  hover

o   Product name [ Yes / No ] *The element will be displayed on product  hover

o   Add to cart button [ Yes / No ] *The element will be displayed on product  hover

o   Add to wishlist button [ Yes / No ] *The element will be displayed on product  hover

o   Add to compare [ Yes / No ] *The element will be displayed on product  hover

o   Quickview [ Yes / No ] *The element will be displayed on product  hover

o   Add to cart button behavior [ Open lightbox / open product page ]

o   One line title [ Yes / No ] *Limit the product title to one line

o   Equal height of product grid images [ Yes / No ] 

o   Image size [ Value, without px]

o  Activate Magento swatches on product listing pages [ Yes / No ]  *Default swatches only in magento 1.9.1 and over. Make sure they are enabled in Cofigurale Swatches Menu

o  Hide title [ Yes / No ] 

o  Default category page layout [ 1,2,3 columns with left or right bar / Full screen / 1,2,3 columns with merged header and left or right bar ]

·         Sidebar options

      o   Recently compared products enable [ Yes / No ]

      o   Pool enable [ Yes / No ]

      o   Compare products enable [ Yes / No ]

      o   Newsletter signup enable [ Yes / No ]

      o   Tags enable [ Yes / No ]

      o   Recently viewed enable [ Yes / No ]

WeltPixel -> Cleo Theme -> Theme Settings -> Product page options

The product pages in Cleo are extremely customizable; we even included a Smart box!

Right from the beginning you can select the layout that you want and from here you will have to define the ratio of each block. You can even define if you wish your secondary column to be displayed on the right hand side or below the main product info section. This option is available below

Here is an example of right secondary column location: 

After you have decided on the final position of the secondary column, you can choose between displaying the related product or some custom CMS block when there are no related products.

The next step would be to define the width of each section. If you choose to have the secondary column on the right hand side you will have the following options:

!Note: Make sure that the sum of the columns is not more than 12.

The above example will set:

·         Image section to be 50% of the width of the website

·         Product info section 25% of the width

·         Secondary column 25% of the width

This will only look like this on desktop, on mobile devices the columns will automatically take advantage of the responsive design.

Product Image Style

WeltPixel -> Cleo Theme -> Theme Settings -> Product page options -> Product Image Style [ Single or Double image] (double image example below)

Image gallery position

WeltPixel -> Cleo Theme -> Theme Settings -> Product page options ->Image gallery position [ Left / Bottom or None] (left gallery example below)

Product Information Layout 

WeltPixel -> Cleo Theme -> Theme Settings -> Product page options ->Product Information Layout [Single or Double column] (double column example below)

Product information Format 

WeltPixel -> Cleo Theme -> Theme Settings -> Product page options ->Product Information Format [ Accordion /  List / Tabs ] (accordion example below)

The left hand side is the long description, additional info and tags section. This section can be styled to be either Accordion, List or Tabs.

On the right hand side comes what we call "Smart Box".

Smart Box

The smart box is designed for attribute specific product information. You can easily select an attribute such as Brand or Apparel type and based on the attribute value you can display for example size charts or shipping info.

How to setup a smart box in 2 steps:

WeltPixel -> Cleo Theme -> Theme Settings -> Product page options -> Smart Box

1.       Select the attribute based on which you want to setup the attribute specific content

2.       Go to CMS -> Static Blocks and create a block that follows this syntax:

[attribute value]_smart_box

Example:  female_smart_box

The attribute value can be found under Catalog -> Attributes -> Manage Attributes

Select the attribute, (gender) -> Managed Label / Options

Carousels on product page

Limit the number of upsell or related products that you want to show on product page. It may be possible you have a lot of related and upsell products, with this options you can limit the number showed in the carousels on the product page.

Cloud zoom

With this intuitive option users ca zoom into your product by simply mousing over them, and can be enabled in 2 easy steps:

WeltPixel -> Cleo Theme -> Theme Settings -> Product page options -> Enable cloud zoom -> Yes

WeltPixel -> Cleo Theme -> Theme Settings -> Product page options -> Zoom image width (px) ->  [value]

Ajax for add to cart and add to compare

You can disable ajax for add to cart or for add to compare with a single click.

WeltPixel -> Cleo Theme -> Theme Settings -> Product page options -> Use ajax for add to cart -> [ Yes / No ]

WeltPixel -> Cleo Theme -> Theme Settings -> Product page options -> Use ajax for add to compare -> [ Yes / No ]

Add to cart confirmation box

You can set the add to cart confirmation box to hide after a specified number of seconds, if you don't want autohide, set the value to 0.

WeltPixel -> Cleo Theme -> Theme Settings -> Product page options -> Confirmation box hide after specified seconds [value in seconds]

Product page layout

Select the layout you want for the product page.

WeltPixel -> Cleo Theme -> Theme Settings -> Product page options -> Default product page layout

Preselect configurable product options

This option is available ONLY with WeltPixel Swatches but not with magento default swatches. See the chapter "Layered navigation and color swatch" for activating WeltPixel swatches.

If is set to [Yes] the first option for each swatch is pre-selected and the client can just hit "Add to cart" without having to select the <default> options. 

Sku, Availability, Compare feature, Additional info and Reviews

You can enable or disable these page elements by selecting [ Yes / No ] for each of them.

Example 1 of product page with settings and frontend view

Example 2 of product page with settings and frontend view

Example 3 of product page with settings and frontend view

WeltPixel -> Cleo Theme -> Theme Settings -> Header options

Header Style 1

Header Style 2

Header Style 3

Other Header options:

·         Sticky Header [ Yes / No ]

·         Sticky Header on mobile [ Yes / No ]

·         Search design   [ Version1 / Version 2 ]

·         Disable compare features [ Yes / No ]

 Weltpixel -> MegaMenu -> General Settings

·         Enable MegaMenu  – [Yes / No ] , if you do not have other extension of MegaMenu this option should be yes.

·         Display home link - [ Yes /  No ], choose to display or not the Home link in the MegaMenu.

·         Always display category blocks - [ Yes /  No ], if set to "Yes", custom Category Blocks will be displayed in the drop-down box even if the category doesn't have any subcategories.

 Weltpixel -> MegaMenu -> Mobile Settings

·         Width threshold - [ value] px, threshold on mobile devices when MegaMenu changes from desktop view to off canvas MegaMenu.

Catalog -> Manage Categories -> WeltPixel Menu

Content Areas

The Mega Menu was built to hold additional content in 3 main areas

·         Top Block – category block displayed above the subcategories.

·         Right Block – category block displayed at the right side of the subcategories.

·         Bottom Block – category block displayed below the subcategories.

Number of columns in dropdown menu

Define the number of subcategory columns that you wish to have, for example if you have 4 main subcategories and you choose 2 columns, it will render 2x2.

Title appearance customization

You can customize the appearance of the title of every category with the help of these 3 options:

·         Title color - input the code of the title color or just use the color picker

·         Title hover color – input the code of the title color when mousing over it or just use the color picker

·         Title image - you can even use an image for the title of category, just choose the file and upload it

Header appearance customization

You can customize the appearace of the header with the help of these 3 options:

·         Header color - input the code of the header color or just use the color picker

·         Header hover color – input the code of the header color when mousing over it or just use the color picker

Content appearance customization

You can customize the appearance of the mega menu content box with the help of these 3 options:

·         Content background image - select an image for the background of the content box

·         Display mode – [ Stretch or Repeat ] 

·         Content background color - input the code of the content background color or just use the color picker

Custom Link option

If you would like to have a custom link in the main navigation just scroll to the URL section and in the custom link field type any of the following solutions:

·         Use http:// to create an external link

·         Use "/" to create a link to the homepage

·         Use "#" to disable the link

CMS block in mega menu

You can insert a static block in MegaMenu, just select the block from  this dropdown list. 

Below, in <full width> display mode, you can see an example of CMS block inserted in the mega menu just by selecting it with this mega menu option.

Display Mode

·         Full width - Width of the menu dropdown is full width, side to side. This option is the best if you want to feature a lot of content in your MegaMenu

·         Sectioned - It's very similar to full width, you can take advantage of all the MegaMenu blocks and options. However this selection will be aligned perfectly with the position of the tab you are hovering over

·        Dropdown - Standard dropdown menu

 WeltPixel -> Cleo Theme -> Theme Settings -> Customization Settings

·         Website width - [value]px , input website width in pixels, ex: 960px

·         Display mode - [ Full width or Boxed ]

·         Enable ionicons - enable ionicons as well in the theme.

·         Load custom CSS - Enable this option to load "wp_custom.css" file in which you can override the default styling of the theme. File is located in /skin/frontend/cleo-v1/default/css/ directory.

·         Enable retina images- [ Yes / No ]

·         Enable free shipping message - [ Yes / No ] , if [ yes] it will always show in the shopping cart that you offer free shipping over an treshold ammount that you set and calculates how much the client has to spend in order to get free shipping. If set to [no], if will show in your shopping cart ONLY after you reach the treshold ammount for free shipping. 

To enable free shipping message calculator got to WeltPixel -> Theme Settings -> Customization settings -> Enable free shipping calculator message -> Yes

To configure the value for free shipping, go to System -> Configuration -> Shipping Methods -> Free Shipping

·         Remove shipping estimator - [ Yes / No ] 

·         Login background image - customize the login page by uploading a picture in the following formats: jpg, jpeg, gif or png.

·         Login page layout - select the layout of the login page.

·        Google API key - fill in the Google API key for your contact page.

·        Contact page longitude and latitude - insert the latitude and longitude in order to locate the pin on the contact page. The longitude and latitude of your address can be easily obtained from services such as http://www.gps-coordinates.net/

·         Contact page - [ Version 1 or Version 2 ] , select between 2 versions of contact page.

WeltPixel -> Ajax Search and Autocomplete

Minimal number of characters

Define here after how many characters you want to start searching and displaying results in the preview section.

More items message in footer of results.

Use the following line of code if you want to change the message for more results:

<p class="more_result">For more results click: <a href="javascript:void(0)" id="advanced_search">here</a></p>

Additional options:

·         Thumbnail width/height, px - defines the size of the product thumbnail

·         Maximum no. of items displayed - set the max no. of items that can be displayed

·         Show short description - [ Yes / No ]

·         Show Price - [ Yes  No ] 

·         Text for no search result - define the text in case the search returns no results

·         Search results header - text displayed in the dropdown above the search results

·         Search results footer - text displayed in the dropdown under the search results

·         Width of results container - defines the size of the container in which the search result previews are located, please specify the width of the container without px.

WeltPixel -> Newsletter

Display Mode

·         Just homepage - It will display the newsletter pop-up box only on the homepage

·         All pages - It will display the newsletter on all the pages except checkout and cart page (we considered that there, the most important is to let the customer concentrate on the checkout process instead of disturbing them from the main reason they are on your website)

·         Display after visited pages - In this section you can define after how many visited pages you want to display the newsletter popup box. (We recommend to initiate the newsletter popup box after at least 2-3 visited pages, this way they get familiar with your website and they do not automatically close the box)

·         Display on mobile - [ Yes / No ]

·         Wait this seconds to display - Define here how many seconds after the webpage loads you want to display the Newsletter popup

·         Display static block - by default the content of your newsletter box lives in the static block weltpixel_newsletter however you are not limited to use this block, here you have the option to switch between any static block.

·         Popup Lifetime - this option defines the lifetime of the newsletter cookie (This option is great if you decide to feature a promotional message that requires the customer to sign-up for a newsletter)

·         Disable newsletter pop-up:

o   Close button is clicked - it will disable completely the newsletter box from appearing after the close button is clicked

o   From Close button or clicked outside of the box - it will disable the new newsletter box in any of the mentioned situations, beneficial if you experience a high bounce rate after enabling the newsletter pop-up box

Layered Navigation simplifies the product search filtering items based on their attributes. For example, handbags can be filtered by color, size, material, price, etc. Since your visitors know what interests them the extension allows finding the desired product faster.

The look and feel of the Layered Navigation can be easily customized by going under:

WeltPixel --> Layered Navigation

Here you will find self explanatory descriptions for each look and feel option.

Enable Ajax - [Yes / No ], enable or disable ajax in layered navigation.

Disable Mouse clicks while performing Ajax refresh - [Yes / No ], enable or disable users mouse click while performing ajax.

Filter Positioning - [ Left column / Top / Right Column], select where you want the filters to be displayed.

Show currently shopping by - [ Yes / No ], show the already selected filters or not.

Show Categories as - [ Default or Dropdown ], on default view only one category ca be selected at a time

Show product count for categories - [ Yes / No ], you can choose to show the no. of products available in categories.

Show product count for attributes - [ Yes / No ], you can choose to show the no. of products for each attribute 

Show price filter as - [ Default / Default From-To/ Dropdown / Slider / Slider From-To / From-To only ]

Show All other filters as - [ Default / Checkbox or Dropdown ]

Sort Items by - [ Position / Name or Count ]

Order Items by - [ Ascendent or Descendent ]

Display all items as - [ Show more and less / Default ], if selected [show more and less], also configure the Show item limit below. !Note: On mobile devices only default display will be available, we have plenty of space on mobile layered navigation to show all options without the need of <show more>.

Show item limit - [ value ], limit the nr of items to display, you can see the rest of the items that is over this limit with <show more/less> option.

Show "Clear All" - [ Yes / No ], with clear all you can clear all selected filters with one click

Category Image On Mobile Devices - [upload file], on mobile devices you have the mobile version of filters, and each attribute and the category tab have a suggestive image displayed. Here you can upload the image for category tab. The rest of the images for attributes are uploaded in the attribute settings, as you can see at the end of this chapter.

Individual Attribute Filter Customization

Any attribute that you have can be customized by style:

·         Default

·         Checkbox

·         Dropdown

Just go to Catalog -> Attributes -> Manage Attributes

Here you will find the full list of attributes that your Magento Store is using, select the attribute that you wish to change the style.

Under the proprieties tab you will find Filter type in layered navigation. This option will allow you to select the design that will work the best with your attribute.

Color Swatch Customization

Using the color swatches is an amazing option for any attribute (color, material, manufacturer etc).

***Product page swatch configuration:

You can choose to use our weltpixel swatches or the Default Magento Swatches (available only in magento 1.9.1 and over) by enable or disable this option:  WeltPixel -> Product Page Swatches -> Deactivate Weltpixel swatches and use default magento swatches - [Yes / No ].

!! If you choose [ No ] than you will use our own swatches and all the options below will be activated. 

!! If you choose [Yes] than default mageno swatches it will be automatically activated and you can set the swatches using magento documentation; none of the options below will be active.

Here you can easily define the product page swatch size, resize as well as you can define the border radius with the options below:

Colors and Images width - [ value ] in px, do not specify px in the box.

Colors and Images height - [ value ] in px, do not specify px in the box.

Resize images - [ Yes / No ]

Border Radius - [ value ] in px, do not specify px in the box.

***Category page swatch configuration:

WeltPixel ->Cleo Theme -> Theme settings -> Category page options -> Activate Magento swatches on product listing pages - [ Yes / No] .

!! Choose [ No ] and you will use our own weltpixel swatches and all the options below will be activated. 

!! Choose [Yes] and default magento swatches it will be automatically activated and you can set the swatches using magento documentation; none of the options below will be active.

!Note: Make sure the configurable swatches are also activated in System ->Configuration -> Catalog -> Configurable Swatches

After you activated the swatches you can find additional swatch options below:

WeltPixel -> Layered Navigation -> 

Here you can easily define the category page (layered navigation) swatch size, resize option (if the image uploaded by you is bigger than the size defined by you as well as you can define the border radius.

Colors and Images width - [ value] in pixels but without px.

Colors and Images height  - [ value] in pixels but without px.

Resize images - [ Yes / No ], if [yes] images that you upload are resized at the sizes specified in above settings.

Border Radius - [value]  - [ value] in pixels but without px.

Assign images to your attributes and setup color swatch

The proper way to setup Color Swatch and Layered Navigation is the following:

1) Enable color swatch to any of your attributes:

Catalog -> Attributes -> Manage Attributes select the attribute that you wish to assign images and select Yes for the following two options:

·         Enable swatch on product page [ Yes / No ]

·         Enable swatch in layered navigation [ Yes / No ]

Here you can define if you would like to enable swatches in layered navigation (category pages) and product page (option when adding the product to your cart)

2) To assign an image to any attribute click on the Manage Label Options.

 Here you will find the option to assign images to any of your attribute values.

Tip: you can assign the exact same image to both pages, however we offer you the option to have different images for each page (product page/category page)

 Mobile design attribute images

<section id="page-title">

	<div class="container clearfix">
		<h1>Page Title</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

<section id="page-title" class="page-title-right">

	<div class="container clearfix">
		<h1>Page Title Right</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

<section id="page-title" class="page-title-center">

	<div class="container clearfix">
		<h1>Page Title Center</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

<section id="page-title" class="page-title-mini">

	<div class="container clearfix">
		<h1>Page Title Mini</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

<section id="page-title" class="page-title-dark">

	<div class="container clearfix">
		<h1>Page Title Dark</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

<section id="page-title" class="page-title-nobg">

	<div class="container clearfix">
		<h1>Page Title No BG</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

<section id="page-title" class="page-title-pattern">

	<div class="container clearfix">
		<h1>Page Title with Pattern</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

<section id="page-title" class="page-title-parallax page-title-dark" style="background-image: url('');"
data-stellar-background-ratio="0.3">

	<div class="container clearfix">
		<h1>Page Title Parallax</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

<section id="page-title" class="page-title-parallax page-title-dark page-title-video">

	<div class="video-wrap">
		<video width="100%" src="images/videos/deskwork.mp4" preload="auto" loop autoplay muted></video>
		<div class="video-overlay"></div>
	</div>

	<div class="container clearfix">
		<h1>Page Title Video</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

Bootstrap Grid

<a href="#header" data-scrollto="#header" class="button button-3d">Scroll to Header</a>

<div style="position: relative; margin-bottom: -60px;" class="ohidden" data-height-lg="426" data-height-md="567" data-height-sm="470" data-height-xs="287" data-height-xxs="183">
	<img src="images/services/main-fbrowser.png" style="position: absolute; top: 0; left: 0;" data-animate="fadeInUp" data-delay="100" alt="Chrome">
	<img src="images/services/main-fmobile.png" style="position: absolute; top: 0; left: 0;" data-animate="fadeInUp" data-delay="400" alt="iPad">
</div>

To display the Instagram widget in your homepage you must set your Instagram username and authorize the widget to use your account.

1. Steps to have the instagram widget:

In admin CMS -> Pages -> select your homepage and click Content tab

Replace HereYourUsername with your Instagram username <div id="instagram-widget" class="instagram-photos masonry-thumbs coll-5" data-user="HereYourUsername" data-count="5" data-type="user"></div>

2. Go to http://instagram.com/developer. Login to your account or create one. Then click on Manage Clients, and finally on Register a New Client.

3. Fill out the Application Name, Description, Website(which should be your website) . Fill our http://localhost in the field Valid redirect URIs and press enter to confirm that field.

4. In Security tab DO NOT CHECK Disable implicit OAuth or Enforce signed requests.

5. Now you should see a Success message as seen in the image below. From this page you need the CLIENT ID code.

6. Paste the following url into your web browser.

https://instagram.com/oauth/authorize/?client_id=[CLIENT_ID_HERE]&redirect_uri=http://localhost&response_type=token&scope=public_content

and add the client id you generated to the url replacing [CLIENT_ID_HERE] Hit enter, and you will connect to Instagram’s servers. Instagram will ask you whether you want to grant the client you registered in Step 2 access to your account. Once your client has been granted access to your account, Instagram will redirect your browser to your localhost and your newly generated access token will be appended to the url after localhost/#access_token=Treat your Instagram access token like you would your password. Do not share your access token with anyone.

7. This is the last page you will see after Authorizing access. Now copy code you see after localhost/#access_token=”yourcode”

8. In WeltPixel Menu -> Cleo Theme -> Customization Settings -> Instagram Client ID field insert the ID generated in step 5, and in Instagram Access Token field insert the code from step 7.

9. That’s it, you’re all done! Now your instagram widget should work on your store homepage.

FAQ

Please consult the FAQ section from our website at this link: Cleo Theme FAQ

Troubleshooting

·         Make sure that you cleaned your cache after installing the theme

·         If the theme is not enabled properly, go to System -> Configuration -> Design

§  Package -> Current Package Name -> type cleo

§  Themes -> Default -> type default

·         You have some third party extensions which can break theme's default behavior. The solutions is to disable all extensions and flush the cache, than enable each module one by one to find the extension that is causing the issue.

·         Blank or 404 page when trying to open theme admin page? Simply log out and log back into Magento

Website Optimization Tips

A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

• gZip Compression & Browser Caching

  This is probably one of the Most Important Techniques you should definitely implement in order to bump up your Website's Loading Speed. gZip Compressionis used to compress the Files that are delivered when loading a Website. It covers HTML, CSS, Javascript & Font Files along with other miscellaneous text files. Where as Browser Caching also covers Images & Videos apart from including the above files. This is used to saves the Static Data in your Browser itself so that when you open the Next Pages on the Same Website, the content does not gets Downloaded again, loading the Website fast.

  gZip Compression & Browser Caching can be enabled using the .htaccess File on an Apache Web Server. You can use the Codes from here:https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess to enable these modules on your server.

• Image Compression & Optimization

  We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:

  • Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's <img> Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of 1200px x 800px in a Content Size of300px x 200px as this is unnecessary. Resize it to 300px x 200px
  • Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background useJPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
  • Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
    For MAC use ImageOptim
    For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.

• CSS & jQuery Minifications

  It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
  For CSS use CSS Minifier and For Javascript use Javascript Minifier.

• Content Delivery Network

  You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font Files. There are several CDN Hosting Providers available on the Internet but we would recommendMaxCDN or CloudFlare. Note: CDN setup requires Extra monthly Fees to setup, so it is completely optional & according to your needs.

All options can be found under:

WeltPixel -> IWD one page checkout

Global

·         Enable Module? -  Enable / disable extension

·         Title - Meta title to be used for the checkout page

Default Settings

·         Default Payment Method - Select default available payment method

·         Show Subscribe to Newsletter - Show checkbox “Subscribe to Newsletter”

·         Check Subscribe to Newsletter by default - Automatically have this checked for the customer

·         Show Shipping Address Form - Show / hide shipping address form

·         Terms and Conditions Output Type - Select pop-up or inline

·         Show Comment Field? - Show / hide comment field

Geo IP

·         Enable Country Detection - Enable / disable detection country by user IP

·         GeoIp filename - Download and unzip file under the 'MAGENTO_ROOT/lib/MaxMind/GeoIP/data' folder if you don't have it by detection country. Enter file name to field.

·         Enable City Detection - Enable / disable detection city by user IP

·         GeoCity filename - Download and unzip file under the 'MAGENTO_ROOT/lib/MaxMind/GeoIP/data' folder if you don't have it by detection city. Enter file name to field.

PayPal Express LightBox

·         Enable PayPal Express Lightbox - Enable / disable PayPal Lightbox

·         Sandbox - Enable / disable test mode of PayPal gateway

Log in with PayPal

·         Enable Log in with PayPal -  enable / disable Log in with PayPal

·         Client ID - enter client ID for PayPal

·         Secret - enter secret for PayPal account

Sandbox - enable / disable test mode of PayPal gateway

If you would like to customize Cleo we can help you with that. We are Certified Magento Developers and we know our product well. Just send us an email with your requests and we'll send you a quotation. Contact us at support@weltpixel.com .

What's new in 1.4.5 (July 05, 2016):

- fix for addtocart issue with cleo and other themes in paralel. (other themes add to cart was broken before)

- new instagram widget added with canvas and client id + token configurable from backend

What's new in 1.4.4 (June 08, 2016):

Community:

- new feature: google cards module added to the theme

- adding form-key, in case One Page Checkout is disabled to customer login

- normalisation of rating summary for schemas

- fix for One Page Checkout agreement

Enterprise:

- new feature: google cards module added to the theme

- adding form-key, in case One Page Checkout is disabled to customer login

- normalisation of rating summary for schemas

- removing IWD One Page Checkout from the theme, adding support for IWD OPC Pro (installed separately)

What's new in 1.4.3 (March 31, 2016):

- admin custom css colour options button hover and button background colour proper saving

- mobile mega menu, global notification css adjustments

- adding proper ordering for configurable products attribute options

- fix for static content import notification

- fix for ajax layered navigation rendering, there was a problem when category was called products

- fix for mobile layered navigation price filtering

- fix for wishlist addToCart

- fix for home menu link translation

- fix for cart page product quantity input issue: when enter button was clicked cart was emptied

- Enterprise version: Adding customer custom attributes to registration and login forms

What's new in 1.4.2 (January 04, 2016):

- checkout cart page css fix, when no cart shipping message the layout was broken

- checkout order summary fix (css fix)

- checkout shipping estimate validation fixes (css fix)

- checkbox image taken from cleo/default hardcoded image fix (css fix)

- translation fixes (more details in quickview)

- adding global message promo block functionality (new feature)

- fix for patched magento installations (permission blocks updated properly)

- scroll to top of the page after ajax calls (javasript update)

- customer account creation fix, missing form_key

What's new in 1.4.1 (November 09, 2015):

What's new in 1.4.0 (Nov 03, 2015):

- important Megamenu optimization
- User Guide major update
- CSS improvements
- small general layout fixes
- fixes for layout in product page
- documentation for static blocks and static pages


What's new in 1.3.0 (Aug 2015):

-design improvements
-functionality improvements for cart and ajax
- fixed add to cart product counter for more than 3 products
- fixed list view - picture size fix for mobile 
- fixed top layered navigation overlapping issue if left right columns are there
- fixed grid vs list view - ajax bug
- improvement - add to cart, suggest to select options by sliding down
- spacing improvements
- optimization of category page

What's new in 1.2.0 (June 2015):

-added contact form V2
-added header style V3
-added category and product page default layout option
-improved layered navigation swatch rendering with relative path in CSS
-navigation font styling
-layered navigation checkbox look update
-lightbox styling update
-product page spacing improvements

Thank you for your purchase

We hope you like our product and we look forward to work with you again in the future.