BuyShop Magento theme. User Documentation

(1)

BuyShop – Magento theme

User Documentation

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this documentation, please feel free to submit ticket to http://etheme.ticksy.com/. Thanks so much! eTheme

16.06.2013

(2)

2 INTRODUCTION

4

4 SUPPORT SERVICES

4 CHAPTER 1 — PACKAGE STRUCTURE

5 UPDATES

5 H

OW TO INSTALL UPDATES

5 JUNE

16,

2013

-

VERSION

1.5

6 M

AY

12,

2013

-

VERSION

1.4.2

6 M

AY

6,

2013

-

VERSION

1.4.1

6 A

PRIL

30,

2013

-

VERSION

1.4

6 A

PRIL

15,

2013

-

VERSION

1.3.1

7 A

PRIL

11,

2013

-

VERSION

1.3

7 A

PRIL

1,

2013

-

VERSION

1.2

7 M

ARCH

30,

2013

–

VERSION

1.1

7 CHAPTER 2 — INSTALLING THEME

9 INSTALL MAGENTO

9 INSTALL THEME

9 POST-INSTALL CONFIGURATION

11 H

OW DO

I

TRANSLATE

M

AGENTO INTERFACE

?

M

AGENTO LOCALIZATION TIPS

11 H

OW DO

I

ENABLE

M

AGENTO INLINE TRANSLATION FEATURE

11 H

OW TO CONFIGURE CURRENCY

.

12 INSTALLATION SERVICE

13 CHAPTER 3 — THEME CONFIGURATION

14 THEME STRUCTURE

14 I

NDEX PAGE

14 L

ISTING PAGE

15 P

RODUCT PAGE

16 GENEREAL THEME OPTIONS

17 MANAGE THEME COLORS, BACKGROUNDS, FONTS

20 MANAGE THEME LAYOUT

25 MANAGE PRODUCT INFO IMAGE PREVIEW

33 CONFIGURE LOGIN USING FACEBOOK/TWITTER ACCOUNT

37 MANAGE THEME SLIDER

37 E

DIT

F

LEX SLIDER

38 E

DIT

P

ARALLAX SLIDER

39

(3)

E

DIT STATIC IMAGE

41 CHAPTER 4 — SAVE / LOAD THEME CONFIGURATION

42 CHAPTER 5 — THEME CONTENT (CMS PAGES/BLOCKS)

43 L

IST OF

CMS

PAGES

43 L

IST OF

CMS

BLOCKS

43 H

OW TO RESET

CMS

PAGES

/

BLOCKS TO DEFAULT

46 CHAPTER 6 — HOW TO

47 H

OW TO CHANGE TITLE OF THE HOME PAGE

47 H

OW TO CHANGE LOGO

47 H

OW TO CHANGE COLORS

47 H

OW TO CHANGE

P

HONE NUMBER

@

HEADER

50 H

OW TO CHANGE

“D

EFAULT WELCOME MSG

!”

@

HEADER

50 H

OW TO CUSTOMIZE NAVIGATION

50 H

OW TO EDIT SLIDE IMAGE

/

URL

52 H

OW TO CUSTOMIZE

N

EW

/

S

ALE

/

B

ESTSELLERS CAROUSELS

@

HOME PAGE

52 H

OW TO ADD PRODUCTS TO

FEATURED

PRODUCTS

BLOCK

53 H

OW TO EDIT SLIDER NEAR

FEATURED

PRODUCTS

53 H

OW TO EDIT BANNERS

54 H

OW TO EDIT CONTENT

@

FOOTER

55 H

OW TO CUSTOMIZE PRODUCT LISTING PAGE

55 H

OW TO CUSTOMIZE PRODUCT INFO PAGE

56 CHAPTER 7 — SOURCE FILES

59 PSD

F

ILES

59

FRONT

-

END FRAMEWORK

60 J

AVA

S

CRIPT

60 M

AGENTO CONNECT EXTENSIONS

60

(4)

INTRODUCTION

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this documentation, please feel free to submit ticket to http://etheme.ticksy.com/.

Thanks so much!

SUPPORT SERVICES

Please submit ticket @ http://etheme.ticksy.com for support services. Please make use of this service after you have tried to answer your questions using the existing documentation.

(5)

CHAPTER 1 — PACKAGE STRUCTURE

This chapter describes package structure.

1. documentation – documentation files for current package 2. html_version – html version of theme

3. languages – theme language files. Read languages/!Readme.txt file for details. 4. Licensing – license information

5. patch – SVN patch/diff files 6. psd – design source files

7. sample_data – sample data files 8. upload – theme source files

UPDATES

HOW TO INSTALL UPDATES

Backup all your data (files/database) before applying updates.

Option 1: If you do not change files, just download new version and copy it over old files. That's it. Note new updates will overwrite your slides to default values. You have to upload slides after updates.

Option 2: If you have made a lot of changes to your theme and want to upgrade, please check patch folder. It contain information in svn patch/diff format.

For example check svn-diff-file-from-v1.0-to-v1.1.diff file. You will see list of changes. - width: 530,

+ width: 876,

line with minus was deleted line with plus was added

You can browse thru patch files manually or update it SVN utilities.

Please note that patches should be applied version by version. I.e. if you have v1.0 and download v1.5 - you should first apply patches from v1.0-to-v1.1, after that from v1.1-to-v1.2 and so on

Step by step update example:

1. Upload patch files (svn-diff-file-from-v1.0-to-v1.1.diff, svn-diff-file-from-v1.1-to-v1.2.diff) to your web server’s root folder.

2. Login to your server via SSH

3. Change directory to your webserver root folder. “cd /u01/www/support.ethemeuk.com/svntest” – in my case.

4. Run patch command to apply first patch. “patch -p7 < svn-diff-file-from-v1.0-to-v1.1.diff” 5. Run patch command to apply second patch. “patch -p7 < svn-diff-file-from-v1.1-to-v1.2.diff” 6. Check patch log.

(6)

JUNE 16, 2013 - VERSION 1.5

Added features:

1. MegaMenu

2. Theme adapted to 12 languages English,German, Italian, French, Dutch, Greek, Danish, Poland, Russian, Swedish, Spain, Portuguese. Included into package.

3. Added instruction how easy create your own translation via translate.csv file 4. Added js cloud zoom (flash cloud zoom badly works with android)

Fixed issue:

1. Category option 'Include in Navigation Menu' works now with categories navigation 2. 4 level of navigation in MegaMenu (in simple 3)

3. Grouped products have price with 'From' 4. Clear all action after ajax add to compare fixed 5. Show product names (center align) in catalogue mode 6. Twitter api updated from 1.0 to 1.1

MAY 12, 2013 - VERSION 1.4.2

Fixed issue:

1. catalogue mode fixed

2. carousel of mini photos in product info

3. parallax and revolution sliders have no conflict now 4. grouped product price was zero in product listing

MAY 6, 2013 - VERSION 1.4.1

Added missed files for revolution slider

APRIL 30, 2013 - VERSION 1.4

Added features:

1. enable/disable top navigation menu

2. enable/disable navigation menu in left column @ listing page 3. enable/disable left column @ home page

4. enable/disable right banner @ home page 5. revolution slider

6. scroll for small product preview images 7. currency symbols to currency switcher Fixed issue:

1. hover “Remove This Item” in filter shifts man menu to the right. 2. tax is not showing in list view and shopping cart

3. second line of categories menu(if many items) has misplaced submenu 4. empty review, tags tabs @ product page when modules disabled 5. validation errors

6. formatting issue for including and excluding tax in price in product info 7. cart box misplaced when British Pounds Sterling is chosen in amazing theme

(7)

APRIL 15, 2013 - VERSION 1.3.1

Fixed issue:

1. delete from ajax cart issue

APRIL 11, 2013 - VERSION 1.3

Fixed issues:

1. disable price filter in shop by block when ajax price slider is enabled 2. fix google fonts

3. catalogue mode fixed (disable price/wish list/compare) 4. updated Oauth library for twitter login

5. in shopping cart page in block DISCOUNT CODES changed label 'Zip/Postal Code' to 'Enter your coupon code if you have one'

6. set limit sale, bestsellers, new products carousels to 12 items

7. currency changing is enabled in 'new products' block when top currency switcher changed 8. special products block is multi store now as every other blocks

Added features:

1. ability change custom tab title in product info page

2. shop by brands is multi store now (non-standard feature for Magento) 3. rollover product ability to choose show short description or attributes 4. flex slider is cashed now

5. WYSIWYG editor for custom tab block in product info

Update details:

After updating files you have to manually create CMS block with name “buyshop_social_like_buttons” and HTML content from file patch/buyshop_social_like_buttons.txt

APRIL 1, 2013 - VERSION 1.2

Fixed issue:

1. Account sidebar is visible now

MARCH 30, 2013 – VERSION 1.1

Added features:

1. Ability set flexslider width (wide/fixed width) 2. All sliders multistore now

3. Added compare button to home page 4. Footer popup now can be static 5. Icon animation (css3) can be disabled

(8)

6. Flexslider has original navigation animation 7. Fixed menu categories in amazing layout on ipad 8. Discount labels on sale products on/off

9. Added crossels product in shopping cart on/off 10. Ajax search auto complete

11. Added quick view option

12. Product short attributes in hover preview (on/off) 13. Count of products in categories menu

Fixed issues:

1. Show labels ‘sale ’ and ‘new’ in featured products on home page 2. Fixed Shop by category

3. Menu categories is multistore now

4. Rss now available in categories (enable/disable)

5. Fixed buyshop_sample_data.sql(was bug with adding new attribute in the attributes manager) 6. Added out of stock in product preview

(9)

CHAPTER 2 — INSTALLING THEME

This chapter describes how to install BuyShop magento theme.

INSTALL MAGENTO

Before using BuyShop theme you should have installed copy of Magento Community Edition open source e-commerce web application.

If you already have installed Magento you can skip this section. To install Magento, follow these steps:

1. Check if your server is compatible with Magento. Find detailed instructions here -

http://www.magentocommerce.com/knowledge-base/entry/how-do-i-know-if-my-server-is-compatible-with-magento

2. If you want install BuyShop simple data use document - http://www.magentocommerce.com/knowledge-base/entry/magento-installation-cheat-sheet

Go to link in step 3 – “More information: Installing the Sample Data for Magento”

Use files from BuyShop theme package located in “Sample Data” folder for “Step 1—Download the sample data”

3. If you want clean Magento config use document - http://www.magentocommerce.com/knowledge-base/entry/magento-installation-guide

4. When your Magento installation completed successfully you can start theme installation procedure.

INSTALL THEME

Warning!

Before uploading theme files on a production environment, make sure you have tested it before on a development environment. Make sure to create a backup of your original files and database before uploading theme files.

To install BuyShop theme, follow these steps:

1. Using an FTP client, upload all contents of upload folder to the web root on your web server (usually public_html). Pay attention you should copy content of upload folder, it will overwrite some files.

(10)

2. go to System -> Cache management. Select all, choose refresh action and submit. After that you will see new menu item – eTheme - BuyShop. now log out and login again to refresh access control system

3. log out from admin panel. Login back to admin panel.

4. go to eTheme - BuyShop -> Theme Maintenance -> Theme Install/Deinstall. Select store ( select all store views if you not sure ) you want to install theme for and press Submit Action

(11)

5. Clear Magento cache in the same way as described at step 2.

POST-INSTALL CONFIGURATION

In this section I want to place most recent Magnto configuration changes which you want to do. This is default Magento features if you are good with Magento you can skip this section. Go to theme configuration chapter bellow.

HOW DO I TRANSLATE MAGENTO INTERFACE? MAGENTO LOCALIZATION TIPS

Theme translation files located at languages folder. Read languages/!Readme.txt file for details.

Magento interface is translated with CSV localization files (installed as extension in Magento Connect Manager) or using buit-in Inline translation tool. To learn how to enable inline translation please refer to How do I enable Magento inline translation feature section. Translation via editing CSV files can be convenient if you are familar with editing CSV files and want to change a lot of strings at once, in a single place. Inline translation can be convenient to apply minor modifications in existing locale.

First of all, please make sure you have installed localization package for your locale. To install localization package simply navigate to System > Magento Connect > Magento Connect Manager in Magento backend and install the localization package entering extension key for your locale.

When Localization package is installed, you can edit existing translation by changing CSV files in app/locale/xx_XX directory (where xx_XX is the language code, for english locale it is app/locale/en_US). You can always use files from English translation as a base.

If there are no localization package for your locale you can create it by simply copying localization directory from English or any other translation.

When editing CSV files please be aware of the following:

The first message should be written exactly as it appears in English translation (case sensitive with all punctuation), the second message is a translated message

The CSV editor should be capable to save file in UTF-8 encoding (Excel is not capable). It is possible to edit CSV files using Notepad, Notepad++, OpenOffice/LibreOffice

Some strings contains %s or %d entries, these entries should be kept in the translated string as well

Another way of doing translation, probably more convenient when editing CSV files is not an option is to enable inline translation at System > Configuration > Developer > Inline Translation in Magento Backend. To learn how to enable inline translation please refer to How do I enable Magento inline translation feature section.

HOW DO I ENABLE MAGENTO INLINE TRANSLATION FEATURE

Magento inline translation can be enabled at System > Configuration > Developer > Inline Translation in Magento Backend:

(12)

Please also make sure to disable Translation and Block output caches at System > Cache Management:

After that you can open your Store in browser and translate inline all strings that needs to be translated.

HOW TO CONFIGURE CURRENCY.

Please read step by step instactions here - http://go.magento.com/support/kb/entry/name/managing-currency/. Be sure you setup currency rates.

(13)

INSTALLATION SERVICE

If installation procedure looks different for you or you don’t want to spend your time on this task, you can order installation service here – www.ethemeuk.com.

(14)

CHAPTER 3 — THEME CONFIGURATION

THEME STRUCTURE

INDEX PAGE

Index page consist of 10 blocks. Here is the scheme of blocks.

Blocks have optional layouts, disable/enable option. Using different combinations of these options you can get hundreds different layouts. Go to “Manage theme layout” section to view instructions how to edit these options in admin panel.

Block #1 - Header toolline. Options: 2 Layouts, enable/disable

Block #2 - Header Options: 2 Layouts

Block #3 - Slider Options: Flex/Paralax/static image, enable/disable

Block #4 – 3 carousels. Bestsellers, new products, Sale products

Options: 3 Layouts, enable/disable

Block #5 – Product listing + right slider Options: enable/disable

Block #6 – Tight Banners Options: enable/disable

Block #7 – Banners Options: enable/disable

Block #8 – Footer Info Options: enable/disable

Block #9 – Footer Block #11 – Qu ick p an el O p tio n s: e n a b le/d is a b le

(15)

LISTING PAGE

Here is the scheme of blocks.

Block #9 – Footer Block #14 - Sidebar

Options: enable/disable, sort sub blocks, enable/disable sub blocks.

Block #16 – Product listing

Options: big/small previews, simple/usual listing mode . Block #15 –Listing description

Options: enable/disable. Block #11 – Qu ick p an el O p tio n s: e n a b le/d is a b le

(16)

PRODUCT PAGE

Here is the scheme of blocks.

Block #9 – Footer

Block #17 – Prev/Next buttons Options: enable/disable

Block #18 – Preview

Options: small/middle/big image size

Product information Block #19 – Custom

product block

Options: custom HTML /related products, enable/disable

Block #21 – Upsell products slider Options: enable/disable

Block #20 – Custom tab Options: enable/disable

Block #11 – Qu ick p an el O p tio n s: e n a b le/d is a b le

(17)

GENEREAL THEME OPTIONS

You can edit general theme options @ Admin panel -> eTheme – BuyShop -> Theme configuration -> General. List of options:

Options

Name Description Value - (example value)

Logo (header) Upload logo image (JPG, PNG or GIF image) image

Right quick panel

Enable right quick panel. It shows at right bottom corner when you scroll down the page.

 Enable  Disable

Logo (Right

quick panel) Upload logo image (JPG, PNG or GIF image) image

Login using

Facebook Allows your users to register using their Facebook accounts

 Enable  Disable Login using

Twitter Allows your users to register using their Twitter accounts

Ajax add to cart Add to cart without reload of the page  Enable  Disable Ajax for add to

wish list/compare button

Enable Ajax feature for wish list and compare buttons  Enable  Disable

Ajax for

toolbar/paging Enable Ajax feature for sort / paging buttons

 Enable  Disable Featured

Products for home listing

Specify list of products IDs, separated by commas, for block #5 listing (FEATURED PRODUCTS block at index page)

text -

(159,160,161,162,163,16)

(18)

mode  Disable

Quick view Enable / disable product quick view popup window  Enable  Disable

Show short description

Enable / disable text description on product rollover popup  Enable  Disable

Tag cloud Switch between usual and flash animated tag block. Please not Flash will not work at mobile devices.

 Flash  Usual Responsive

html Enable/disable responsive mode for all gadget (iphone, ipad etc)

Catalog mode Switch your shopping cart into simple catalog.  Enable  Disable

Icon animation Enable / disable Icon rotation animation  Enable  Disable

(19)

Show crossells products in shopping cart

Enable / disable cross-sell products @ shopping cart  Enable  Disable

Product labels

Show "Sale"

label Show sale label on products

 Yes

 No

"Sale" label

position Label position

 Top Left  Top Right  Bottom Left  Bottom Right Show discount label

Enable / disable discount labels  Yes

 No

Show "New"

label Show new label on products

 Yes

 No

"New" label

position Label position

 Top Left  Top Right  Bottom Left  Bottom Right Social accounts

Twitter account Account name for twitter block in footer text - (envato) Facebook

(20)

MANAGE THEME COLORS, BACKGROUNDS, FONTS

You can edit color, background, font theme options @ Admin panel -> eTheme – BuyShop -> Theme configuration -> Colors, backgrounds, fonts. Options in General group will be applied for whole website/store, all its pages/blocks. Options in Captions group will be applied only for captions, etc.

(21)

Please look at full list of options bellow. List of options:

General

Theme Color Set color for buttons, icons and backgrounds text - (#9d3bc6)

Theme Hover Color Set color for mouse over on buttons, icons and

backgrounds text - (#6a2886)

Input hover color (focus border) Set color for input border text - (#c68dde)

Text Color Set default text color for all blocks text - (#000000)

Link Color Set default link color for all blocks text - (#000000)

Link Hover Color Set default link hover color for all blocks text - (#6a2886) Background Color Set background color for all blocks text - (#3B3B3B)

Background Image (All pages) Upload background image/pattern for all blocks

(JPG, PNG or GIF image) image

Background Image display mode Set background image display mode

 Center  Repeat  Fixed Captions

Font

Select font which will be used for headings, buttons, block titles etc. Theme use Google font's library. Find out more here - Google web fonts free library

 Abel  Abril Fatface  Aclonica  Actor  Adamina  Aguafina Script  Aladin  Aldrich  Alice  Alike Angular  Alike  and 308 more

Text Color Set text color for captions text - (#000000)

Text Color (dark style) Set text color for captions text - (#3B3B3B) Drop down boxes

Text Color Set text color for drop down box in header tool line text - (#9b9b9b) Link Color Set link color for drop down box in header tool line text - (#b6b6b6)

Link Hover Color Set link hover color for drop down box in header

(22)

Background Color Set background color for drop down box in header

tool line text - (#4a4a4a)

Border Color Set border color for drop down box in header tool

line text - (#3B3B3B)

Arrow Image Upload arrow image for dropdown boxes (JPG, PNG

or GIF image) image

Header tool line (top and bottom line)

Text Color Set text color for header tool line text - (#9b9b9b)

Link Color Set link color for header tool line text - (#9d3bc6)

Link Hover Color Set link hover color for header tool line text - (#9d3bc6) Background Color Set background color for header tool line text - (#333333)

Shadow Set bottom shadow for header tool line  Enable

 Disable Phone Color Set phone color for header tool line text - (#ffffff) Header / Navigation

Text Color Set text color for header text - (#000000)

Link Color (level_0) Set link color for first level of top menu text - (#3B3B3B) Background Color Set background color for drop down box (navigation

menu, cart) in header text - (#3B3B3B)

Background Image For example: snow pattern for Christams image Search decoration in header For example: search decoration for Christams image Search decoration position Negative value in px to align search decoration text - (200) Central image in header For example: Santa Claus for Christams (only png) image Link Color Set link color for drop down box (navigation menu,

cart) in header text - (#000000)

Link Hover Color Set link hover color for drop down box (navigation

menu, cart) in header text - (#000000)

Content

Text Color Set text color for content blocks text - (#3B3B3B)

Link Color Set link color for content blocks text - (#3B3B3B)

Link Hover Color Set link hover color for content blocks text - (#3B3B3B) Background Color Set background color for content blocks text - (#3B3B3B) Background Image Upload background image/pattern for content

blocks (JPG, PNG or GIF image) image

Background Image display mode Set background image display mode  Center  Repeat

(23)

Footer info

Text Color Set text color for footer info block text - (#000000)

Link Color Set link color for footer info block text - (#000000)

Link Hover Color Set link hover color for footer info block text - (#000000) Captions Color Set captions color for footer info block text - (#000000) Bold Text Color Set bold text color for footer info block text - (#000000) Background Color Set background color for footer info block text - (#3B3B3B) Background Image Upload background image/pattern for footer info

block (JPG, PNG or GIF image) image

Line Color Above Footer Info text - (#ececec)

Footer

Text Color Set text color for footer block text - (#959595)

Link Color Set link color for footer block text - (#ffffff)

Link Hover Color Set link hover color for footer block text - (#ffffff) Background Color Set background color for footer block text - (#333333) Footer popup

Text Color Set text color for footer popup block text - (#959595)

Caption Text Color Set caption text color for footer popup block text - (#ffffff)

Link Color Set link color for footer popup block text - (#959595)

Link Hover Color Set link hover color for footer popup block text - (#959595) Background Color Set background color for footer popup block text - (#000000)

Background Transparency Set background transparency for footer popup block

(0..1) text - (0.85)

Delimiters

Delimiter Content Image Upload delimiter content image (JPG, PNG or GIF

image) image

Delimiter Footer Image Upload delimiter footer image (JPG, PNG or GIF

image) image

Product border color (listing) Set product border color in listing text - (#3B3B3B)

Product border shadow (listing) Enable product border shadow in listing  Enable  Disable Price

Font Select font which will be used for headings, buttons, block titles etc. Theme use Google font's library.

 Abel  Abril Fatface

(24)

Find out more here - Google web fonts free library  Aclonica  Actor  Adamina  Aguafina Script  Aladin  Aldrich  Alice  Alike Angular  Alike  and 308 more

Price Color Set font color for price on listing text - (#3B3B3B)

(25)

MANAGE THEME LAYOUT

To edit theme layout go to Admin panel -> eTheme – BuyShop -> Theme configuration -> Layout (enable/disable blocks). Layout options divided into 5 groups: general, navigation, homepage, product listing and product info. General and navigation options will change layout for all pages. Home page will change only index page layout, etc. Please review image scheme and list of options bellow.

(26)

(27)

List of layout options General

Header tool line

Choose header tool line block layout or disable it. You can edit blocks content via CMS static block. To edit content go to CMS -> Static blocks.

Choose needed block and edit it.  Twit, login, register

 Phone, message, account Disable

Header Choose header block layout  Functional

(28)

Footer info

Enable footer info block. You can edit block content via CMS static block. To edit content go to CMS -> Static blocks. Choose needed block and edit it.

Footer popup

Enable footer transparent popup block. You can edit block content via CMS static block. To edit content go to CMS -> Static blocks. Choose needed

block and edit it.  Enable

 Disable

Navigation

Count of

columns Count of columns (1..3) in top categories navigation text - (3)

Categories top menu

description

Enable categories description in navigation. To edit category description content go to "Catalog -> Manage Categories -> Choose needed category -> edit Topmenu description field"

Home button

Enable home button in navigation

Custom block

Enable custom block in main menu. You can edit block content via CMS static block. To edit content go to CMS -> Static blocks. Choose needed block and edit it.

(29)

Custom menu

item - title Set menu item title text - (Custom Block)

Custom menu

item - url Set url for custom menu item (use full url format starting with http://)

text -

(http://www.google.com) Second custom

link in top menu

Enable second custom link in top menu main menu.  Enable  Disable

Second custom link in top menu - title

Set menu item title text - (Download now)

Second custom link in top menu - url

Set url for second custom link in top menu (use full url format starting with http://) text - (http://www.google.com) "Shop by category" description

Enable custom block in Functional header/navigation. You can edit block content via CMS static block. To edit content go to CMS -> Static blocks. Choose needed block and edit it.

"Shop by Brand" description

Enable Shop by Brand description in Functional header/navigation. You can edit block content via CMS static block. To edit content go to CMS -> Static blocks. Choose needed block and edit it.

Show count of products

Enable / disable number of products in category  Enable  Disable

Show topmenu Enable/disable top menu navigation  Enable

 Disable Home page

(30)

Slider

Choose slider type.

Flex is simple, fully responsive slider.

Parallax is layered slider. You can create slides with unlimited layers. Revolution slider.

Static image is good for corporate style

To edit slides and slider options go to eTheme - BuyShop -> Slider Configuration. Detailed description of configuration options you can find below in this doc.

 Flexslider

 Parallax layered slider  Revolution slider  Static image  Disable

Carousels

Choose carousel layout or disable it

 a (tabs)  b (2+1)  c (3 rows)  Disable

Carousels

option (tabs) Select carousel types for option a layout

 Bestsellers

 New

 Sale Carousels

option (2+1) Select carousel types for option b layout

 New+Sale  Bestsellers

Carousels

option (rows) Select carousel types for option c layout

 Bestsellers

 New

 Sale

Home product list with banner slider

Enable/disable home product list with banner slider block. To edit products go to "eTheme - BuyShop -> Theme Configuration -> General -> edit Products for home listing block #5 option". To edit slides go to CMS -> Static blocks. Choose needed block and edit it.

(31)

Show left column (featured)

Enable/disable left column @ featured block @ home page  Enable  Disable

Show right column (featured)

Enable/disable banner slider (right column) @ featured block @ home page  Enable  Disable

Banners tight

Enable/disable banners tight block. You can edit block content via CMS static block. To edit content go to CMS -> Static blocks. Choose needed block and edit it.

Banners

Enable/disable banners block. You can edit block content via CMS static block. To edit content go to CMS -> Static blocks. Choose needed block and

edit it.  Enable

 Disable

Product Listing

Product listing mode

Choose products listing mode

 Simple (image only)  Usual (description, price)

Product listing

image size Choose product image preview size in listing

 Small

 Big

Show category description

Enable/disable custom category description before product listing. You can use custom HTML (description text, image banner or slider). To edit content go to Catalog -> Manage Categories -> choose category. On tab General Information fill field "BuyShop custom description"

(32)

Sidebar

Enable/disable sidebar in product listing mode.

Sidebar blocks Enable/disable blocks in sidebar.

 Shop by (sort code 0)  Ajax price slider (sort

code 1)

 Tags (sort code 2)  Compare (sort code 3)  Community pool (sort

code 4)

 Banner Slider (sort code 5)

 Leftmenu (sort code 6) Sidebar blocks

sort Write separated by commas sort codes of the blocks in the output order text - (6,0,1,2,3,4,5) Product Info

Product info

image size Choose product preview image size on product info page.

 Small  Medium

 Big

Product custom block

Choose product custom block type or disable it. You can edit option a (custom HTML) content via CMS static block. To edit content go to CMS -> Static blocks. Choose needed block and edit it.

 Custom HTML  Related Products  Disabled

Prev / Next

buttons Enable/disable previous, next buttons on product info page.

(33)

Prev / Next image preview

Enable/disable image preview for previous, next buttons on product info page.

Custom tab

Enable/disable custom tab on product info page. You can edit custom tab content via CMS static block. To edit content go to CMS -> Static blocks. Choose needed block and edit it.

Upsell products slider

Enable/Disable upsell products slider

QR-code Enable/Disable QR-code on product info page  Enable

 Disable

MANAGE PRODUCT INFO IMAGE PREVIEW

CloudZoom is default script for image preview on product info page. But you can change it to: FancyBox, PiroBox, PiroBox Extended, prettyPhoto or Lightbox Clone.

To edit these options go to Admin panel -> eTheme – BuyShop -> Theme configuration -> Lightboxes. You will see 6 groups of options. Go to General group to enable Lightbox and choose it type. Each Lightbox type has a bunch of options, look at full list of option bellow.

General Settings

(34)

Enabled Enable image preview in popup Lightbox at product info page.  _ Yes No

Lightbox Type Choose your favorite Lightbox type. You can customize the settings of selected Lightbox Type from the below tabs.

 FancyBox  PiroBox  PiroBox Extended  prettyPhoto  Lightbox Clone FancyBox

padding Space between FancyBox wrapper and content. text - (10)

margin Space between viewport and FancyBox wrapper. text - (40)

opacity When true, transparency of content is changed for elastic transitions.

 Yes

 No

modal

When true, 'overlayShow' is set to 'true' and 'hideOnOverlayClick', 'hideOnContentClick',

'enableEscapeButton', 'showCloseButton' are set to 'false'.

 Yes

 No

cyclic When true, galleries will be cyclic, allowing you to keep pressing next/back.

 Yes

 No

scrolling Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', or 'no'

 auto

 yes

 no

autoScale If true, FancyBox is scaled to fit in viewport  _ Yes No centerOnScroll When true, FancyBox is centered while scrolling page.  Yes

 No

hideOnOverlayClick Toggle if clicking the overlay should close FancyBox  _ Yes No hideOnContentClick Toggle if clicking the content should close FancyBox  _ Yes

No

overlayShow Toggle overlay  Yes

 No

overlayOpacity Opacity of the overlay (from 0 to 1; default - 0.3)

 0  0.1  0.2  0.3  0.4  0.5  0.6  0.7  0.8  0.9  1

overlayColor Color of the overlay text - (#777)

titleShow Toggle title  _ Yes

No titlePosition The position of title. Can be set to 'outside', 'inside' or 'over'

 outside  inside  over

transitionIn The transition type. Can be set to 'elastic', 'fade' or 'none'

 fade  elastic  none transitionOut The transition type. Can be set to 'elastic', 'fade' or 'none'

 fade  elastic  none speedIn Speed of the fade and elastic transitions, in milliseconds text - (500) speedOut Speed of the fade and elastic transitions, in milliseconds text - (500) changeSpeed Speed of resizing when changing gallery items, in milliseconds text - (300) changeFade Speed of the content fading while changing gallery items  fast

(35)

easingIn Easing used for elastic animations

 swing  easeOutBack  easeInBack

easingOut Easing used for elastic animations

 swing  easeOutBack  easeInBack

showCloseButton Toggle close button  _ Yes

No

showNavArrows Toggle navigation arrows  _ Yes

No enableEscapeButton Toggle if pressing Esc button closes FancyBox  Yes

 No

PiroBox

theme Available themes for PiroBox

 double border corners white/black

 black border corners + shadow

 white border corners + shadow

 shadow

 double border corners black/white

my_speed animation speed text - (300)

bg_alpha background opacity

 0  0.1  0.2  0.3  0.4  0.5  0.6  0.7  0.8  0.9  1

slideShow true == slideshow on, false == slideshow off text - (1) slideSpeed slideshow duration in seconds(3 to 6 Recommended) text - (3) PiroBox Extended

style Available styles for PiroBox Extended  Style 1

 Style 2

piro_speed Select Pirobox speed, from 500 to 1000 (700 recommended)

 500  600  700  800  900  1000

bg_alpha background overlay opacity, from 0 to 1.

 0  0.1  0.2  0.3  0.4  0.5  0.6  0.7  0.8  0.9  1

(36)

piro_scroll pirobox always positioned at the center of the page  _ Yes No prettyPhoto

theme Available themes for prettyPhoto

 pp_default  light_rounded  dark_rounded  light_square  dark_square  facebook animation_speed fast/slow/normal  fast  slow  normal

slideshow 0 OR interval time in ms text - (5000)

autoplay_slideshow  _ Yes

No

opacity Value between 0 and 1

 0  0.1  0.2  0.3  0.4  0.5  0.6  0.7  0.8  0.9  1 show_title  _ Yes No allow_resize Resize the photos bigger than viewport. true/false  _ Yes

No

default_width text - (500)

default_height text - (344)

counter_separator_label The separator for the gallery counter 1 "of" 2 text - (::) horizontal_padding The padding on each side of the picture text - (20) hideflash Hides all the flash object on a page, set to TRUE if flash appears

over prettyPhoto

 Yes

 No

modal If set to true, only the close button will close the window  Yes

 No

overlay_gallery If set to true, a gallery will overlay the fullscreen image on mouse over

 Yes

 No

social_tools If set to false, will hide the social tool (twitter/facebook) from lightbox

 Yes

 No

Lightbox Clone

overlayBgColor Used to define the overlay background color. #000 (black) is

default. text - (#000)

overlayOpacity Used to define the overlay opacity. 0.8 is default.

 0  0.1  0.2  0.3  0.4  0.5  0.6  0.7  0.8  0.9  1

(37)

containerBorderSize The padding CSS information used in the container image box.

10 is default. text - (10)

containerResizeSpeed The duration of resize effect in the container image box. 400 is

default. text - (400)

txtImage Text "Image" used in the image caption. text - (Image)

txtOf Text "of" used in the image caption. text - (of)

CONFIGURE LOGIN USING FACEBOOK/TWITTER ACCOUNT

Login using facebook/twitter account feature integrated to BuyShop theme. To use this feature you should enable it in General theme options (Admin panel -> eTheme – BuyShop -> Theme configuration -> General -> Options -> Login using Facebook / Login using twitter) and configure Admin panel -> eTheme – BuyShop -> Theme configuration -> Twitter and Facebook secret keys section.

Please view this video - http://www.youtube.com/watch?v=aRAFrVF_hKQ. It shows how to get Facebook App ID and Secret Key.

Please view this video - http://www.youtube.com/watch?v=1wHs7HsOOE4. It shows how to get Twitter Consumer key and Consumer secret.

Please pay attention to Twitter Callback URL option. It should looks like

http://yourdomain.com/index.php/facebookfree/customer/getTwitterData, where http://yourdomain.com/index.php is your base URL which you setup during installation, for example

Full list of options:

Facebook and Twitter settings

Enabled  _ Enable

Disable

Facebook Application Id

How get Application Id and Secret Key

http://youtu.be/aRAFrVF _hKQ

text - (156370877845457)

Facebook Secret Key text - (651eda7133315693661e3e402d6786ee)

Twitter Consumer key

How get Consumer key and Consumer

secret http://youtu.be/1 wHs7HsOOE4

text - (gWjNLF5ai7kjC1yEymIQ)

Twitter Consumer

secret text - (xOcSfaCPqFrzjcdKJ4InkrdVe8jGI2POC3yC8eHCPhI)

Twitter Callback URL

use ONLY such url http://yourdomain.com/i ndex.php/facebookfree/c ustomer/getTwitterData text - (http://buyshop.ethemeuk.com/qa1/buyshop_alex_v2/index.p hp/facebookfree/customer/getTwitterData/)

(38)

BuyShop has three options for slider at home page. They are: Flex Slider with timeline, Multi layered Parallax slider, Static image. To choose needed slider type go to Admin panel -> eTheme – BuyShop -> Layout -> Home page -> Slider. To edit slider options go to Admin panel -> eTheme – BuyShop -> Slider Configuration and choose needed section.

EDIT FLEX SLIDER

Go to Admin panel -> eTheme – BuyShop -> Slider Configuration -> Flex slider -> Settings to edit animation type, slide show speed, etc.

Settings

Timeline Enable/disable timeline at slider  _ Enable Disable Width Set slider width mode full screen or fixed  Wide

 Fixed Prev/next slide preview Enable/disable previous/next slide preview image  Enable

 Disable Animation Select your animation type, "fade" or "slide"  _ Fade

Slide Animation Select the sliding direction, "horizontal" or "vertical"  _ Horizontal

Vertical slideshowSpeed Set the speed of the slideshow cycling, in milliseconds text - (7000) animationSpeed Set the speed of animations, in milliseconds text - (600)

(39)

Go to Admin panel -> eTheme – BuyShop -> Slider Configuration -> Flex slider -> Manage slides to edit slide image / URL. You will see list of existing slides.

To delete slide select slide’s checkbox, choose Delete in Action dropdown list and press Submit. To edit slide press on Edit link in Action column.

To add new slide press on Add Item button. Each slide has following options:

Settings

Name Description Value - (example value) Link Slide’s URL  text - (http://www.google.com) Slide Image Slide’s Image  image

Status Slide’s status  _ Active Inactive

EDIT PARALLAX SLIDER

BuyShop theme included LayerSlider 3.5 The Parallax Effect Slider (http://codecanyon.net/item/layerslider-the-parallax-effect-slider/922100). We buy it under Extended license. You can use it as part of BuyShop theme free of charge.

Each slide consists of many layers, you can choose any scenario for slide, add any number of layers. It’s very flexible but it needs additional work to create and configure each layer.

LayerSlider has a lot of configurable options which can be applied for each layer. That’s why we don’t split each option in separate form element. It will blow up admin section.

You can add your slides using HTML code.

Please read native slider documentation included in theme package – documentation/parallax-slider-docs/documentation/documentation.html

When you OK with it and ready to test your laired slide go to Admin panel -> eTheme – BuyShop -> Slider Configuration -> Parallax Slider -> Manage slides. You will see list of existing slides.

To delete slide select slide’s checkbox, choose Delete in Action dropdown list and press Submit. To edit slide, press on Edit link in Action column.

Settings

Name Description Value - (example value) Link Slide’s URL  text - (http://www.google.com)

Slide HTML code

Slide’s HTML code

 text - (<div class="ls-layer" style="slidedirection: right; slidedelay: 7000; durationin: 1500; durationout: 1500; delayout: 500;">

 <img class="ls-s1"

src="{{BASE}}media/etheme/buyshop/buyshoparallax/slider1_img1.jpg" alt=""

style="position: absolute; top:0; left:50%; slidedirection : fade; slideoutdirection : fade; durationin : 1750; durationout : 1000; delayin : 1000;">

(40)

style="position: absolute; top:41%; left: 75%; slidedirection : right; slideoutdirection : top; durationin : 750; durationout : 750; easingin : easeInOutQuint; easingout : easeInBack; delayin : 1000;">

src="{{BASE}}media/etheme/buyshop/buyshoparallax/slider1_text2.png" alt=""

style="position: absolute; top:57%; left: 75%; slidedirection : right; slideoutdirection : top; durationin : 750; durationout : 750; easingin : easeInOutQuint; easingout : easeInBack; delayin : 2000;">

src="{{BASE}}media/etheme/buyshop/buyshoparallax/slider1_text3.png" alt=""

style="position: absolute; top:69%; left: 75%; slidedirection : right; slideoutdirection : top; durationin : 750; durationout : 750; easingin : easeInOutQuint; easingout : easeInBack; delayin : 3000;">  </div>) Status Slide’s status  Active  Inactive

Note: BuyShop include 8 configuration sets. You can see example of Parallax slider configuration in Dark preset configuration. More about save / load configurations read in chapter 4.

EDIT REVOLUTION SLID ER

BuyShop theme included Slider Revolution Responsive jQuery Plugin (http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848). We buy it under Extended license. You can use it as part of BuyShop theme free of charge.

Please read slider documentation for details – documentation/ revolution-slider-docs/documentation.html

When you OK with it and ready to test your slide go to Admin panel -> eTheme – BuyShop -> Slider Configuration -> Revolution Slider -> Manage slides. You will see list of existing slides.

To delete slide select slide’s checkbox, choose Delete in Action dropdown list and press Submit. To edit slide, press on Edit link in Action column.

Settings

Name Description Value - (example value) Store

View

Store scope

for slide  Multi select list

Link Slide’s URL  text - (http://www.google.com)

Slide HTML code

Slide’s HTML code

 text - (<li data-transition="papercut" data-slotamount="15" data-masterspeed="300"> <img src="{{BASE}}media/etheme/buyshop/buyshoprevolution/slider2.jpg" >

 <div class="caption lfr" x="700" y="160" speed="500" data-start="500" data-easing="easeOutExpo" ><img

src="{{BASE}}media/etheme/buyshop/buyshoprevolution/slider2_text1.png" ></div>  <div class="caption lfl" x="700" y="220" speed="500"

data-start="1000" data-easing="easeOutExpo" ><img

src="{{BASE}}media/etheme/buyshop/buyshoprevolution/slider2_text2.png" ></div>  <div class="caption lfb" x="700" y="330" speed="500"

data-start="1500" data-easing="easeOutExpo" ><img

src="{{BASE}}media/etheme/buyshop/buyshoprevolution/slider2_text3.png" ></div>  </li>)  Status Slide’s status  Active  Inactive

(41)

EDIT STATIC IMAGE

Go to Admin panel -> eTheme – BuyShop -> Slider Configuration -> Static image -> Upload image Image

Name Description Value - (example value) Image [JPG, PNG or GIF image] image

(42)

CHAPTER 4 — SAVE / LOAD THEME CONFIGURATION

In chapter 3 I describe all (194!) theme options.

It needs some time to set value for each options that’s why we create Save / Load configuration settings. Configuration set is a XML file stored at <server root>/ Configsets folder.

To save configuration settings go to Admin panel -> eTheme – BuyShop -> Theme Maintenance -> Save current configuration. Choose Store which you want to save, input file name, choose preview image (optional) and click Submit Action button. It will save current configuration to <server root>/ Configsets folder (permissions should allow write access).

To load configuration settings go to Admin panel -> eTheme – BuyShop -> Theme Maintenance -> Load preset configuration. Choose Store where you want to apply options, choose preset configuration and click Submit Action button.

We provide 8 example configurations:

 Main – It has all blocks/options enabled. And shows the maximum theme configuration. It uses Flex script for home page slider.

 Dark – It uses Parallax script for home page slider. Optional header tool line block.  Amazing – It shows optional header/navigation block.

 Istyle – It shows minimal theme configuration.

 Patricksday – This is the Main theme styled for St. Patrick's Day  Thanksgivingday - This is the Main theme styled for Thanksgiving Day  Helloween - This is the Main theme styled for Halloween

(43)

CHAPTER 5 — THEME CONTENT (CMS PAGES/BLOCKS)

All theme custom content created as CMS page/block. So you can easily edit it under Admin panel -> CMS -> Pages / Static blocks.

LIST OF CMS PAGES

CMS – Pages

Identifier Description

Buyshop Home page Home page

Buyshop About Us About us page

Buyshop Delivery Delivery page

Buyshop Newsletter Newsletter page Buyshop Privacy Policy Privacy Policy page

Buyshop 404 no page 404 page

Buyshop Returns Returns page

Buyshop Terms & Conditions Terms & Conditions page

LIST OF CMS BLOCKS

CMS – Static blocks

Identifier Description Front-end preview

buyshop_header_phone Phone number at header

 buyshop_header_topmenu_custom_block Custom HTML block in

Navigation

(44)

buyshop_header_topmenu_description_block Custom HTML block in Navigation – Shop by Category section (optional header)

 buyshop_header_shop_by_brand_block Custom HTML block in

Navigation – Shop by Brand section (optional header)



buyshop_slider_banners Custom HTML block for

slider at home page



buyshop_banners_tight Custom HTML block on

home page for banners tight 

buyshop_banners Custom HTML block on

(45)

buyshop_about_in_footer Custom HTML block in footer for ABOUT info

 buyshop_contacts_in_footer Custom HTML block in

footer for CONTACT US info



buyshop_copyright Custom HTML block in

footer for copyright information



buyshop_payments Custom HTML block in

footer payments  buyshop_footer_social_links Custom HTML block in

footer for social links 

buyshop_information Custom HTML block in

footer popup

 buyshop_customer_service Custom HTML block in

footer popup



buyshop_my_account Custom HTML block in

footer popup

(46)

buyshop_product_custom_block Custom HTML block on product info page



HOW TO RESET CMS PAGES/BLOCKS TO DEFAULT

You can reset all CMS pages/blocks to theme’s default values. Go to Admin panel -> eTheme - BuyShop -> Theme Maintenance -> Reset CMS blocks/pages to default, select needed store and press Submit Action button.

(47)

CHAPTER 6 — HOW TO

HOW TO CHANGE TITLE OF THE HOME PAGE

Go to Admin panel -> CMS -> Pages.

Choose Buyshop Home page. Edit Page Title field

Press on Save Page button.

HOW TO CHANGE LOGO

Go to Admin panel -> eTheme – BuyShop -> Theme Configuration -> General. Go to group Options.

Upload logo image to Logo (header) field

Upload logo image to Logo (Right quick panel) field Press on Save Config button.

HOW TO CHANGE COLORS

You can change font/hover/background colors for almost every element of the theme.

Go to Admin panel -> eTheme – BuyShop -> Theme Configuration -> Colors, backgrounds, fonts. Choose needed group.

Setup desired parameters. Press on Save Config button.

Some examples of color customization

(48)

Theme Color

Theme Hover Color

Input hover color, Text color

(49)

Price on listing page

Price on product info page

Captions Color, Background color

Bold text color, Text color

(50)

HOW TO CHANGE PHONE NUMBER @ HEADER

Go to Admin panel -> CMS -> Static blocks.

Choose buyshop_header_phone block. Edit Content field.

Press on Save Block button.

HOW TO CHANGE “DEFAULT WELCOME MSG!” @ HEADER

Go to Admin panel -> eTheme – BuyShop -> Magento - Design.

Go to group Header. Edit Welcome text field Press on Save Config button.

HOW TO CUSTOMIZE NAVIGATION

DISABLE/EDIT CUSTOM BLOCK

Go to Admin panel -> eTheme – BuyShop -> Theme Configuration -> Layout. Go to group Navigation.

(51)

Press on Save Config button.

To edit drop-down content

Go to Admin panel -> CMS-> Static block.

Choosebuyshop_header_topmenu_custom_block block. Edit Content field.

DISABLE/EDIT CUSTOM BUTTON

Go to Admin panel -> eTheme – BuyShop -> Theme Configuration -> Layout. Go to group Navigation.

Upload logo image to Second custom link in top menu, Second custom link in top menu - title, Second custom link in top menu - url field

Press on Save Config button.

ADD NEW ITEM

Navigation shows category’s tree. To add new item: Go to Admin panel -> Catalog -> Manage Categories. Add / edit / delete categories under Root Catalog.

(52)

HOW TO EDIT SLIDE IMAGE / URL

Go to Admin panel -> eTheme – BuyShop -> Theme Configuration -> Layout. Go to group Home page.

Check Slider field. It shows current type of slider.

Go to Admin panel -> eTheme – BuyShop -> Slider Configuration -> <active slider type> -> Manage Slides (Upload image).

Refer to Chapter 3 – Manage theme slider section for full option list.

HOW TO CUSTOMIZE NEW / SALE / BESTSELLERS CAROUSELS @ HOME PAGE

ADD PRODUCTS

To show products in new carousel slider

Go to Admin panel -> Catalog -> Manage Products. Choose needed product.

Choose General group

Fill Set Product as New from Date or Set Product as New to Date field.

To show products in sale carousel slider

Go to Admin panel -> Catalog -> Manage Products. Choose needed product.

Choose Prices group

Fill Special Price From Date or Special Price To Date field.

Bestsellers carousel slider shows top10 sold products. You can create fake order to fill this carousel.

CHANGE LAYOUT

(53)

You can also disable one of slider / all sliders.

Go to Admin panel -> eTheme – BuyShop -> Theme Configuration -> Layout. Choose Home page group.

Fill Carousels field to choose layout or disable all sliders Fill Carousels option field to enable only part of sliders

HOW TO ADD PRODUCTS TO FEATURED PRODUCTS BLOCK

Go to Admin panel -> eTheme – BuyShop -> Theme Configuration -> General. Choose Options group.

Fill Featured Products for home listing field with product’s ids list separated by comas.

HOW TO EDIT SLIDER NEAR FEATURED PRODUCTS

(54)

Choosebuyshop_slider_banners block. Edit Content field.

HOW TO EDIT BANNERS

Choose buyshop_banners_tight or buyshop_banners block. Edit Content field.

buyshop_banners_tight

buyshop_banners

To disable/enable banners

Go to Admin panel -> eTheme – BuyShop -> Theme Configuration -> Layout. Choose Home page group.

Edit Banners tight or Banners filed. Press SaveConfig button.

(55)

HOW TO EDIT CONTENT @ FOOTER

Footer content is stored in CMS static blocks. Go to Admin panel -> CMS-> Static block. Choose needed block.

Edit Content field.

Please refer to Chapter 5 – List of CMS blocks for more details.

HOW TO CUSTOMIZE PRODUCT LISTING PAGE

DISABLE SIDEBAR

Go to Admin panel -> eTheme – BuyShop -> Theme Configuration -> Layout. Go to Product Listing group.

Edit Sidebar field

Edit Sidebar blocksto enable / disable sidebar subblocks. Press on Save Config button.

CHANGE IMAGE SIZES

(56)

Go to Product Listing group. Edit Product listing image sizefield Press on Save Config button.

CHANGE PRODUCT LISTING MODE

Edit Product listing modefield Press on Save Config button.

ADD CATEGORY DESCRIPTION

Edit Show category descriptionfield Press on Save Config button.

To add category description content

Go to Admin panel -> Catalog -> Manage categories -> Layout. Select needed category.

Edit Descriptionfield.

Press on Save Category button.

HOW TO CUSTOMIZE PRODUCT INFO PAGE

CHANGE IMAGE PREVIEW SIZE

Go to Admin panel -> eTheme – BuyShop -> Theme Configuration -> Layout. Go to Product Info group.

Edit Product info image sizefield Press on Save Config button.

RIGHT BLOCK

Edit Product custom blockfield Press on Save Config button. To edit custom HTML content

(57)

Go to Admin panel -> CMS-> Static block. Choose buyshop_product_custom_block block. Edit Content field.

Press on Save Block button. To add related products

Go to Admin panel -> Catalog-> Manage Products. Choose needed product.

Go to Related Products tab. Press on Reset filter button. Choose needed products. Press on Save button.

PREVIOUS / NEXT BUTTONS

Edit Prev / Next buttons, Prev / Next image previewfield Press on Save Config button.

UPSELL PRODUCTS

Edit Upsell products sliderfield Press on Save Config button. To add upsell products

Go to Admin panel -> Catalog-> Manage Products. Choose needed product.

Go to Up-sells tab.

Press on Reset filter button. Choose needed products. Press on Save button.

QR-CODE

(58)

Go to Product Info group. Edit QR-codefield

(59)

CHAPTER 7 — SOURCE FILES

PSD FILES

I've included 7 PSDs with this theme: 1. Main layout - buyshop_main.psd 2. Product listing - buyshop_listing.psd 3. Product page - buyshop_product.psd 4. Contact us page - buyshop_contact.psd 5. Checkout page - buyshop_checkout.psd 6. Cart page - buyshop_cart.psd

7. About us page - buyshop_about.psd

All PSD files are sliced and you can find any image according your needs.

All the layers inside of the PSD are grouped in few folders. You can easily specify/find any element of the design.

If you would like to view and edit layers of any block you should update them in the correspondent group. IMPORTANT

Images used in preview are not included in theme. You can purchase them separately from Bigstockimages:

http://www.bigstockphoto.com/ru/image-13467899/stock-photo-stunning-young-lady-posing-in-lingerie http://www.bigstockphoto.com/ru/image-4024783/stock-photo-shopping-people http://www.bigstockphoto.com/ru/image-12126176/stock-photo-young-beauty-posing http://www.bigstockphoto.com/ru/image-16486037/stock-photo-womanish-shoes-isolated-on-white-background http://www.bigstockphoto.com/ru/image-644264/stock-photo-mens-jewelry http://www.bigstockphoto.com/ru/image-12124412/stock-photo-fashion-style-photo-of-a-man-wearing-white-sui

BuyShop Magento theme. User Documentation