Table of Contents

  1. Package structure
  2. Important notes regarding 1.5.2 version
  3. Install Instructions
  4. Configuration
  5. Theme settings
  6. Slideshow
  7. Categories Color Schemes
  8. Cms Pages and Static Blocks
  9. JavaScript
  10. PSD Files
  11. Sources and Credits

“Shopper” Documentation by “queldorei” v1.5.2


“Shopper” Magento Theme

Created: 19/09/2012
By: queldorei

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to post your questions here themeforest. Thanks so much!


Package structure


Important notes regarding version 1.5

Separate Design Package

Package & Theme: What's the difference?

Previous versions use the following directory structure.


Separate design package use following directory structure.


Earlier shopper there was a theme of default design package. When you needed to modify a theme you were making changes right in the theme.

Now shopper there is a separate design package, which can contain as many themes as you like. A huge advantage of this system is that as well as having shopper theme as default package theme, you can create new themes which simply improve shopper the theme. This allows you to reduce the amount of code you need to write and maintain!

How to create a custom sub-theme?

How to switch to custom sub-theme?


Installation Instructions


Configuration

Theme Settings

To edit theme settings go to Queldorei -> Shopper -> Theme Settings

  • Ajax features

    • Enable Priceslider for layered navigation - enable/disable priceslider
    • Enable Ajax wishlist and compare - enable/disable Ajax wishlist and compare
    • Enable Ajax cart / Quick view - enable/disable Ajax cart & Quick view
    • Show Quick view button - show/hide Quick view button. Quick view popup will be shown for products with required options regardless of this option
    • Enable Scroll to top button - enable/disable scroll to top button
  • Product Images

    • Zoom method for Product page - Choose zoom method product details page - Magento default | Cloudzoom | Lightbox.
    • Main Product Image Width (px) - Please update the cloudzoom big image size if you override dimensions. If width is not specified, default width and height will be used (363 x 464 pixels).
    • Main Product Image Height (px) - If height is not specified the width value will be used. If width is not specified, default width and height will be used (363 x 464 pixels).
    • Use aspect ratio for all images - Use the main image aspect ration throughout the site
  • Product

    • Show "New" label: show new label on products
    • "New" label position: label position
    • Show "Sale" label: show sale label on products
    • "Sale" label position: label position
    • Enable Upsell Products: show/hide upsell products on product info page
    • Number of Upsell Products in slide: number of products per slide
    • Replace Upsell Products: Upsell products can be replaced with static block queldorei_product_additional. Possible variants are: always replace, never replace, replace if no upsell products
    • Show SKU on product page: show/hide sku
    • Hide the second price after product options on configurable product page: show/hide bottom price
  • Sideblocks

    • [Sideblock] - Enabled: show/hide sideblock
    • [Sideblock] - Sort Order: sideblock order in column

  • Slideshow

    To setup Slideshow configuration - go to Queldorei -> Shopper -> Slideshow -> Configuration

    Slideshow settings

    To manage Flexslider slides - go to Queldorei -> Shopper -> Slideshow -> Manage Flexslider Slides

    Slide parameters On screen with width more than 768 you will see Image on bg and content ( if not empty ). If screen less than 768, slide content and big image will be hidden and small image will be shown instead.

    To manage Revolution slides - go to Queldorei -> Shopper -> Slideshow -> Manage Revolution Slides

    Slide parameters

    Slide captions

    Captions are Containers which can be customized via CSS, classes for the start animation and some data options.
    To add new caption to slide click on "Add new caption" link
    Slide captions

    You will see popup with a plenty of options
    Slide captions

    Required options are:
    Caption look defined by color class option. There are a lot of default classes, however we add some theme specific classes. Please note that by default captions are black.
    To change caption color you need to edit final caption html and add inline style.
    To insert an image in caption you need to:
    1. Upload the image via ftp client to media/queldorei/shopper/ folder 2. Update the caption text with the following code For More info about captions' parameters please refer to the Revolution slider document.

    Categories Color Schemes

    You have an ability to override any theme option for particular category and/or its subcategories. In order to do this you need to go to Queldorei > Shopper > Categories Color Schemes

    Here you can create a new scheme for any category. A scheme has following options:

    All other options corresponding to theme options for Appearance section

    Cms Pages and Static Blocks


    JavaScript

    This theme uses following Javascript files.

    1. jQuery is a Javascript library that greatly reduces the amount of code that you have to write.
    2. Flexslider is the best responsive slider
    3. Swipe jquery swipe plugin
    4. blockUI jquery plugin to block screen
    5. anystretch jquery plugin to stretch background images
    6. jquery ui UI library
    7. jCycle is a slideshow plugin that supports many different types of transition effects
    8. jCarousel is a jQuery plugin for controlling a list of items.
    9. cloud Zoom is a free jquery image zoom plugin.
    10. html5shiv - JavaScript shiv for IE to recognise and style the HTML5 elements.
    11. mColorPicker - nice color picker.
    12. hoverIntent - upgrade of jQuery's built-in hover function.
    13. prevNext - free extension from Inchoo.

    PSD Files

    Some Photoshop basics

    Scale (size change)

    To change the size of buttons, price boxes, etc. select the layer that you want to change, then press ctrl+t and holding left mouse button pressed drag the transformation handles. To change the whole button or pricing plan sizes choose folders. You can change sizes of all buttons if you link them together.

    Text change

    You can click on top of the text with the Type tool (T). You know your cursor is in the right place when the Type tool's cursor changes to an "I-beam." However, if you click in the wrong place, Photoshop will create a new type of layer; in this case, press the Escape key to cancel the new layer. You can change text parameters such as size, kerning etc. in "Character" window, Main menu: Window / Character.

    Shape change

    Shape is a filled layer linked to a vector mask. You can easily change the fill to a different color, a gradient, or a pattern by editing the shape's fill layer. You can also edit the shape's vector mask to modify the shape outline, and apply a style to the layer.

    Visible invisible layers

    To hide/unhide a layer click on the eye icon left to the layer's name in layers' window. To open the layers' window go to main menu on the top of interface Window/Layers.

    Add / hide effect

    Below the layer name can be some effects.  If there is an arrow right to the layer's name it means that this layer has effects. Click on that arrow to show/hide the effects list.

    To hide or show effects in layers click on the eye icon left to effect name in layers' window.

    Link layers

    Linking allows to move and change sizes of all linked layers at a time. Some layers are linked together. To break this link choose a layer and then press on the chain icon between the eye icon and the layer's name. Do this to all the layers you want to link or unlink.

    Duplicate layer

    Go to your "Layers" palette, and click on the layer that you want to duplicate.

    Go to "Layer" and select the duplicate layer. In the pop-up window that opens, give the new layer a name. If the layer you are copying is called "My Layer," call the duplicate something that will make it easily identifiable, such as "My Layer Copy." Click "OK."

    Multiple layers selection

    Press and hold ctrl to select multiple layers.


    Sources and Credits

    1. jQuery is a Javascript library that greatly reduces the amount of code that you have to write.
    2. Flexslider is the best responsive slider
    3. Swipe jquery swipe plugin
    4. blockUI jquery plugin to block screen
    5. anystretch jquery plugin to stretch background images
    6. jquery ui UI library
    7. jCycle is a slideshow plugin that supports many different types of transition effects
    8. jCarousel is a jQuery plugin for controlling a list of items.
    9. cloud Zoom is a free jquery image zoom plugin.
    10. html5shiv - JavaScript shiv for IE to recognise and style the HTML5 elements.
    11. mColorPicker - nice color picker.
    12. hoverIntent - upgrade of jQuery's built-in hover function.
    13. prevNext - free extension from Inchoo.

    Once again, thank you so much for purchasing this theme. As I said at the beginning I'd be glad to help you if you have any questions regarding this theme. No guarantees but I will do my best to assist. If you have a general question about the themes on ThemeForest, you might consider visiting the forums and posting your question in the "Item Discussion" section.

    Queldorei