Module: Cosyone Theme Panel

Module: Cosyone Theme Panel

for Verison V 2.0.3.1  go to Extension >>module >>and look for Cosyone Theme Panel

for Verison V 2.3.0.2  go to Extension > Extension >> module >>and look for  Cosyone Theme Panel

you can check your version at bottom of admin page.

What it does: This is the heart of the theme. It is in this module you control most of the settings regarding the layouts, design and other configurations.

Most of the settings are pretty obvious, but some of them needs a little more explanations.

Tab: General settings
Layout

Show breadcrumb

breadcum
The breadcrumb is the patch to the current page.

 

Embed retina support
If you enable this feature, your store will check if the visitors are using a high resolution screen, called retina display. A retina display usually enlarge elements since the resolution is higher than normal. Vector based elements, like texts and font based icons can be enlarged without losing sharpness. Images though becomes a bit blurry when they are enlarged. The solution is to enable the retina support.

When retina support is enabled, a bigger image will be used for users with retina displays. There is a pattern with the images, where the larger image have “@2x” in the end of the file name.

If retina support is enabled, you should upload an extra version of images you wish to have brighter. The extra image should be double in size, and have the “@2x” extension in the name. For example:

Your logo is 100*100px in size, and named logo.png

You should upload a retina version image which is 200*200px in size and named logo@2x.png

The retina image should be uploaded in the same folder as the default image.

 

Header

Header style
Cosyone comes in 3 different header variations. Choose the one you like.
cosyone-header

 

Menu

cosy-custom

Second level category thumbs
This will enable or disable image thumbs for the second level categories. The thumbs are uploaded at each category. (Catalog > Categories)

 

 

Custom block
This is a feature to show a custom drop down in the menu containing custom content.
There are a couple of pre-defined layouts that are explained below.

 

 

Custom block layout: 4 columns:
  1. <div class=“column-4″>
  2. <h2>Put your title here</h2>
  3. <p>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</p>
  4. <p><a class=“button” href=“#”>Sample button</a></p>
  5. </div>
  6.  
  7. <div class=”column-4
  8. <h4> Put your title here </h4>
  9. <p>Use Cosyone as a stable base for your custom project. With tons of design options, and several layout configurations you can create unlimited variations of this theme</p>
  10. </div>
  11.  
  12. <div class=”column-4
  13. <h4> Put your title here </h4>
  14. <p>Use Cosyone as a stable base for your custom project. With tons of design options, and several layout configurations you can create unlimited variations of this theme</p>
  15. </div>
  16.  
  17. <div class=”column-4
  18. <h4> Put your title here </h4>
  19. <p>Use Cosyone as a stable base for your custom project. With tons of design options, and several layout configurations you can create unlimited variations of this theme</p>
  20. </div>

 

Custom block layout: 3 columns:
  1. <div class=”column-3
  2. <h4> Put your title here </h4>
  3. <p>Use Cosyone as a stable base for your custom project. With tons of design options, and several layout configurations you can create unlimited variations of this theme</p>
  4. <p><a class=“button” href=“#”>Sample button</a></p>
  5. </div>
  6.  
  7. <div class=”column-3
  8. <h4> Put your title here </h4>
  9. <p>Use Cosyone as a stable base for your custom project. With tons of design options, and several layout configurations you can create unlimited variations of this theme</p>
  10. <p><a class=“button” href=“#”>Sample button</a></p>
  11. </div>
  12.  
  13. <div class=”column-3
  14. <h4> Put your title here </h4>
  15. <p>Use Cosyone as a stable base for your custom project. With tons of design options, and several layout configurations you can create unlimited variations of this theme</p>
  16. <p><a class=“button” href=“#”>Sample button</a></p>
  17. </div>

 

Custom block layout: 2 columns:
  1. <div class=”column-2
  2. <h4> Put your title here </h4>
  3. <p>Use Cosyone as a stable base for your custom project. With tons of design options, and several layout configurations you can create unlimited variations of this theme</p>
  4. <p><a class=“button” href=“#”>Sample button</a></p>
  5. </div>
  6.  
  7. <div class=”column-2
  8. <h4> Put your title here </h4>
  9. <p>Use Cosyone as a stable base for your custom project. With tons of design options, and several layout configurations you can create unlimited variations of this theme</p>
  10. <p><a class=“button” href=“#”>Sample button</a></p>
  11. </div>

 

Contact page

How to embed Google map
To add a map to the category page, you need to find the iframe code from googlemaps.com

1. Go to googlemaps.com

2. Type in and find your address in the top left search field

3. When your address show up on the map, look at the right side at the bottom of the map, you will see this menu:

Click on “Share and embed map”

4. Click on the tab Embed map and you will see the image as below. Now, you should copy the iframe code inside the text field.

 

5. Paste the code inside the text area inside your Cosyone Theme Panel (Google maps iframe)

6. When you have pasted the code. Look for the following part:

  1. width=”600″

Replace this with:

  1. width=”100%”

 

Product listings

Product listing style

Choose how you want your product to look in categories, modules etc. The following styles are available:

cosproduct-listing

 

Cookie bar / Internet explorer warning

Cookie bar
Some countries have laws that requires information to visitors if cookies are used on a website. To enable the cookie bar, set it as enable. Then, the first time a person visit your store, a message appear at the top of the page. The message only shows once unless the visitor clear the browser cache.

Warning to internet explorer users
The oldest versions of Internet explorer are unsafe and cant read CSS effects etc. You can select to display a notification to visitors using Internet Explorer 7/8, recommending them to upgrade their browser.

 

 

Tab: Design options
Custom design

cosyone-design

If you would like to use another design or color scheme than the default one, you can change a range of elements using the design panel.

Start by enable custom design by changing “Use custom design” to Enabled. A good start is also to use the “Reset design settings”. This will auto fill all fields with the default color scheme.

To change a color, you will use the color picker tool. Simply select the color you want, and save it by pressing the icon at bottom left.

Custom fonts

If you would like to use another pair of fonts, you can change the font settings. As default, Roboto + Roboto Slab is used, but any Google web font can be used.

All fonts can be found at: www.google.com/webfonts

How to find the Import link and Font name

1. When you have found a font you wish to use, click on the “Quick use” icon for the chosen font.

 

2. Select which font weights you wish to use.

3. Select if you need to use a special character set. This is only needed for non-latin stores (a-z)

4. Copy and paste the font name into your theme panel as follow: