Drupal 7 - Marvel Theme Guide for Developers

The basics - Before you start

Starting with a new theme, it sometimes takes a lot of time for first time users to really understand how it works. You may want to know how to customize layouts, typography, block styles and make it look the way you want.

In most cases you won't need to know PHP or database queries, but basic knowledge would be very helpful to get great results.

If you're an experienced Drupal developer or if you want to build the theme from zero with only the basic appearance of your theme, find this guide in handy. This guide will give you the detailed step by step installation guide to help you start building the content for Marvel to look exactly like the demo site.

1. Package

Included content:

  • README.txt
  • Marvel theme: marvel-7.x-1.0.zip
  • Demo Profile for Marvel: marvel-profile-7.x-1.0.zip

2. System Requirements

Database

  • MySQL 5.0.15 or higher with PDO
  • PostgreSQL 8.3 or higher with PDO
  • SQLite 3.3.7 or higher

PHP

  • PHP 5.2.5 or higher (5.4 or higher recommended)
  • PHP5 GD library installed
  • Disabled error_reporting flag on production server
  • Enabled mod_rewrite in Apache for clean URLs
  • Memory limit set up at least 128MB

If you are new to Drupal, please take a reference to System requirements on drupal.org.

3. Screenshots

Let's glance through the theme's design & some features:

Home

Home 2

Home 3

Home 4

Home 5

Home 6

Home 7

Product

Product detail

Blog

Blog Full Width

Blog Sidebar

Blog View Teaser

Blog Details

Shop Grid

Shop List

Shop Grid Full

Shop Grid Right Sidebar

Contact Us

Multi colors & Megamenu

4. Module requirements

Core Modules

  • Block
  • Blog
  • Color
  • Comment
  • Contact

Third-party Modules

  1. Address Field
  2. Administration menu
  3. Bean
  4. Block Class
  5. Chosen
  6. Cloud Zoom
  7. Colorbox
  8. Colorbox Node
  9. Drupal Commerce
  10. Commerce Coupon
  11. Commerce coupon fixed amount
  12. Commerce Discount
  13. Drupal Commerce Extra Price Formatters
  14. Commerce Product Option
  15. Commerce Pricing Attributes
  16. Commerce Product Attributes
  17. Commerce Search API
  18. Commerce Wishlist
  19. Context
  20. Chaos tools
  21. Date
  22. Entity
  23. Entity Reference
  24. Exclude Node Title
  25. Facet API
  26. Features
  27. Field collection
  28. Field Group
  29. Field Slideshow
  30. Fivestar
  31. Flex Slider
  32. Font Awesome Icons
  33. Gallery Formatter
  34. Internationalization
  35. Icon API
  36. Image Delta Formatter
  37. Image Link Formatter
  38. Inline Conditions
  39. Inline Entity Form
  40. Jcarousel
  41. jQuery Countdown
  42. Jquery Update
  43. Language Switcher Dropdown
  44. Language Switcher
  45. Language Icons
  46. Libraries
  47. Link
  48. Memcache API and Integration
  49. Menu block
  50. Menu Breadcrumb
  51. Module Filter
  52. Newsletter
  53. Node Compare
  54. Path Auto
  55. Popup
  56. Quicktabs
  57. Rules
  58. Search API
  59. Search API Database Search
  60. Search API ranges
  61. Search API sorts
  62. ShareThis
  63. Simplenews
  64. Statistics Counter
  65. Taxonomy Menu
  66. TB Megamenu
  67. Title
  68. Token
  69. Variable
  70. Video Embed Field
  71. Views
  72. Views Field View
  73. Views Fieldsets
  74. Views Isotope - jQuery Isotope
  75. Voting API
  76. Webform

Required libraries by the modules

  • chosen
  • cloud-zoom
  • Colorbox
  • ddslick
  • flexslider
  • fontawesome
  • jquery.cycle
  • jquery.imagesloaded
  • jquery.isotope

Download Drupal core files, and extend your site with modules at here.

Installation

Quick Installation Demo Profile

We created an installation profile with demo content for each of our theme, so that you can quickly download and reproduce the whole site content as presented on our live demo.
This way you will get a quicker overview of the features.
If it's convenient you may also use the given demo content as a starting point to build your custom sites.

1. Marvel package included:

  • Marvel theme: marvel-7.x-1.0.zip
  • Demo Profile for Marvel: marvel-profile-7.x-1.0.zip

The below steps will give you the installation guide so that you can build your website to look exactly like the Marvel Full Demo.

  • Demo Profile for Marvel: marvel-profile-7.x-1.0.zip

2. Extract marvel-profile-7.x-1.0.zip above and copy it into your host, and rename the directory

Quick Installation

3. Access your MySQL database and create a new DB (e.g. marvel) and user account. Don't forget to add correct permissions to new user to access the database

4. In the demo directory database/ (latest version of package) or profiles/weebpal/ (old version), you can find database dump named sample_data.sql. Import this file into new database.

Quick Installation

5. Now, you need to modify sites/default/default.settings.php file. Clone default.settings.php file, then rename it "settings.php"

Quick Installation

6. Open settings.php, then locate the $database array and set proper credentials.

Quick Installation

						$databases['default']['default'] = array(
							'driver' => 'mysql',
							'database' => 'databasename',
							'username' => 'username',
							'password' => 'password',
							'host' => 'localhost',
							'prefix' => '',
							);
					

When using this installation, you are installing everything from our preview server. So don't forget to set proper values to access to your database: db name, db admin username, db admin password, host, etc.

7. Open the browser and visit your website with the prepopulated content & layout exactly like our Marvel Demo

Now, you can visit administrator site with the admin account admin/admin to delete the unnecessary contents and add the new ones.

2. Installation Marvel Theme for Drupal developers

If you're an experienced Drupal user or if you want to build the theme from zero with only the basic appearance of Marvel Theme, find this guide in handy.

1. Install Drupal

  1. Go to Drupal download page and download the latest version of Drupal 7.

    Download Drupal 7

  2. Extract and copy Drupal folder to your host and rename the directory.
  3. Follow this tutorial to install Drupal with the standard profile.

2. Install Marvel Theme

  1. Extract Marvel theme .ZIP file:
    • marvel-7.x-1.0.zip
  2. Move this theme into your Drupal folder: sites/all/themes

  3. Navigate to Appearance > Choose Enable and set default Marvel theme

3. Install Required Modules

Now that you've enabled Marvel theme, you will install and enable the required modules (listed in the Module Requirements section) to customize and use them.

If you don't know how to install the contributed modules, this tutorial is an essential guide.

Cheat to install modules & theme:

  1. Extract marvel-profile-7.x-1.0.zip
  2. Open extracted folder, go to sites/all and copy all folders inside (modules, themes, libraries)
  3. Paste them to your host, folder sites/all

Note: See this guide to get more details about installation

Taxonomy configuration

Quick Information

  • Taxonomy: Taxonomy can be simply understood as category management using organizational keywords known in other systems as categories, tags or metadata. It allows you to connect, relate and classify your website's content. In Drupal, these terms are gathered within "vocabularies". The Taxonomy module allows you to create, manage and apply those vocabularies.
  • Vocabulary: for example product category, tag, provider name, ...
  • Term: the items in each vocabulary. For example: vocabulary product category has some terms: laptop, pc, mobile, tablet, camera, headphone, ...
  • For more information about taxonomy, please see: Organizing content with taxonomies

Navigate to Structure > Taxonomy to create vocabularies as the following:

Vocabulary

Add terms for each vocabulary:

Terms of Category:

Vocabulary

Terms of Collection:

Vocabulary

Step 1:Navigate to Structure > Taxonomy > Collection > Manage Fields click link and add following field:

Vocabulary

Step 2:Set properties for Image field

Vocabulary

Step 3 :Go to List tab. Click Edit link and set following properties for each term of Collection:

Vocabulary

Terms of Group Catagories:

Vocabulary

Terms of Occupations:

Vocabulary

Terms of Sale Off:

Vocabulary

Terms of Status:

Vocabulary

Note: See this guide to get more details about taxonomy configuration

Media configuration

Image Style Configuration

Image styles are the presets of image settings. Image styles are used to define how the images are shown.

Navigate to Configuration, In MEDIA area, click Image styles, then create image styles as the following:

Image Styles

Content type configuration

Configuration People

1. Navigate to Configuration > People > Account settings > Manage Field link and add following field:

People

2. Set properties for Occupations field

People

3. Go to Manage Display link and set following fields:

People

4. Click Save button

Configuration Field collection

1. Navigate to Structure > Field collection link and with following

2. In field_content row, click "manage fields" link.

3. To add new field, you can fill in "Add existing field" row

Field collection

4. Set properties for Image field

Field collection

5. Click Save button

6. Go to Manage Display link and set following fields:

Field collection

7. Click Save button

Configure Store

1. Configure Discount

After installing many modules of Drupal Commerce, you will see the store menu in administrator menu bar. Now you can manipulate store through it.

To configure this future, you must install Commerce Discount module, then navigating to Store > Discounts and create some discount such as below image.

Discount settings

1. Navigate to Store > Discounts > Add discount with following properties

Discount settings

2. If click button Add new coupon the first click button Save.

3. After that, click button Save discount.

Note You can read this article to understand more about Commerce Discount.

2. Configure Product type

1. Navigate to Store > Products > Product Types

2. In Product row, click "manage fields" link, add following fields:

Product Type

3. Go to Manage Display link and set following fields:

Product Type

4. Click Save button

3. Configure Wishlist

1. Navigate to Store > Configuration > Wishlist configuration with following properties

Wishlist

Modify Article type

Note: Required Modules: Exclude Note Title

1. Navigate to Structure > Content Type

2. In Article row, click "manage fields" link.

3. To add new field, you can fill in "Add new field" row

Article

4. Set properties for Image field

Article

Article

5. Go to Manage display tab > Default set following properties:

Article

6. Go to Manage display tab > Teaser set following properties:

Article

Modify Basic page type

Note: Required Modules: Exclude Note Title

1. Configuration modules Exclude Node Title set following properties

Basic page

2. Navigate to Structure > Content Type

3. In Basic row, click "manage fields" link.

4. To add new field, you can fill in "Add new field" row

Basic page

5. Set properties for Image field

Basic page

6. Go to Manage display tab > Default set following properties:

Basic page

7. Go to Manage display tab > Teaser set following properties:

Basic page

Modify Blog entry type

Note: Required Modules: Blog, Exclude Note Title

1. Configuration modules Exclude Node Title set following properties

Blog type

2. Navigate to Structure > Content Type

3. In Blog entry row, click "manage fields" link.

4. To add an existing field, you can take action on "Add existing field" row

Blog type

5. Set properties for Title field

Blog type

Blog type

6. Set properties for Image field

Blog type

7. Set properties for Gallery field

Blog type

8. Go to Manage display tab > Default set following properties:

Blog type

9. Go to Manage display tab > Teaser set following properties:

Blog type

Create Ads type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Ads

2. Go to Manage Fields and add following fields:

Ads

3. Set properties for Image field

Ads

Ads

4. Go to Manage display tab > Default set following properties:

Ads

5. Go to Manage display tab > Teaser set following properties:

Ads

Create Company type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Company

2. Go to Manage Fields and add following fields:

Company

3. Set properties for Image field

Company

Company

4. Go to Manage display tab > Default set following properties:

Company

5. Go to Manage display tab > Teaser set following properties:

Company

Create Product type

Note: Required Modules: Exclude Note Title, Node Compare

1. Configuration modules Exclude Node Title set following properties

Product

2. Configuration modules Node Compare set following properties

Product

3. Navigate to Structure > Content Type. Click Add Content Type link to create content type Product

4. Go to Manage Fields and add following fields:

Product

5. Set properties for Title field

Product

6. Set properties for Image field

Product

Product

7. Set properties for Category field

Product

8. Set properties for Product field

Product

9. Set properties for Status field

Product

10. Click Save button

11. Go to Manage display tab > Default set following properties:

Product

12. Click Save button

13. Go to Manage display tab > Teaser set following properties:

Product

14. Click Save button

15. Go to Comment Fields and add following fields:

Product

16. Set properties for Your rating field

Product

17. Click Save button

Create Testimonials type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Testimonials

2. Go to Manage Fields and add following fields:

Testimonials

3. Go to Manage display tab > Default set following properties:

Testimonials

4. Go to Manage display tab > Teaser set following properties:

Testimonials

5. Click Save button

Create VideoView type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type VideoView

2. Go to Manage Fields and add following fields:

VideoView

3. Set properties for Thumimage field

VideoView

VideoView

4. Go to Manage display tab > Default set following properties:

VideoView

5. Go to Manage display tab > Teaser set following properties:

VideoView

6. Click Save button

Create Homepage

Search form

Front end Display

Search form

1. Navigate to Structure > Blocks, find Search form block, click configure link and set the following properties:

Search form

2. Click Save button

Languages form

Front end Display

Languages

1. Navigate to Structure > Blocks, find Languages block, click configure link and set the following properties:

Languages

2. Click Save button

Shopping cart

Front end Display

Shopping cart

1. Navigate to Structure > Blocks

2. Click Add block link to create block, for example: Shopping cart block and set properties for them.

Shopping cart

3. Click Save button

Refer to following HTML code:

 (0)
					

SlideshowDisplay

Front end Display

Collection View

1. Create SlideshowDisplay view

1. Navigate to Structure > Views, click Add views link, Create Collection View view with following properties:

Collection View

2. Click Continue & edit button and set following properties:

Collection View

3. At Display name area, set following properties:

Collection View

4. At Title area, set following properties:

Collection View

5. At FORMAT Format: FlexSlider, click Settings and set following properties:

Collection View

6. At FIELDS area, click Add button to add fields: Field: Image, Global: Fieldset, Global: Fieldset, Global: Fieldset, Taxonomy term: Term description, Field: Link, Taxonomy term: Link2 .

7. Set properties for Field: Image

Collection View

8. Set properties for Global: Fieldset

Collection View

9. Set properties for Global: Fieldset

Collection View

10. Set properties for Global: Fieldset

Collection View

11. Set properties for Taxonomy term: Term description

Collection View

12. Set properties for Field: Link

Collection View

13. Set properties for Taxonomy term: Link2

Collection View

14. At FIELDS area, click Rearrange button, then remove Field: Link field and set following arrange

Collection View

15. At FILTER CRITERIA area, click Add button and add file Taxonomy vocabulary: Machine name,
Taxonomy term: Term ID, Taxonomy term: Term ID, Taxonomy term: Term ID

16. Set properties for Taxonomy vocabulary: Machine name

Collection View

17. Set properties for Taxonomy term: Term ID

Collection View

18. At FILTER CRITERIA area, click And/Or, Rearrange button and set following arrange

Collection View

19. At SORT CRITERIA area, Click Add button to add Taxonomy term: Term ID

Collection View

20. At Advanced > OTHER area, add CSS class

Collection View

21. Click Save block button.

2. Configure SlideshowDisplay block

1. Navigate to Structure > Blocks

2. Find View: Collection View: SlideshowDisplay, click configure link, set following properties

Collection View

3.Click Save block button.

OUR LATEST PICKS

Front end Display

OUR LATEST PICKS

1. Create OUR LATEST PICKS view

1. Navigate to Structure > Views, click Add views link, Create Product View view with following properties:

OUR LATEST PICKS

2. Click Continue & edit button and set following properties:

OUR LATEST PICKS

3. At FORMAT Format: jCarousel area, click Settings and set following properties:

OUR LATEST PICKS

4. At Advanced > Contextual filters area, click click Add button

OUR LATEST PICKS

5. In Advanced > REALATIONSHIPS area, click Add button to add fields: Content: Product and set following properties:

OUR LATEST PICKS

6. In FIELDS area, click Add button to add fields: Field: Image, Global: Fieldset (Fieldset),
Commerce Product: Add to Cart form, Content: Link, Content: “Add to Compare” link, Content: Rate, Content: Category,
Global: Fieldset (Fieldset), Commerce Product: Old Price, Commerce Product: Price
field and set following properties:

7. Set properties for Field: Image

OUR LATEST PICKS

8. Set properties for Global: Fieldset (Fieldset)

OUR LATEST PICKS

9. Set properties for Commerce Product: Add to Cart form

OUR LATEST PICKS

10. Set properties for Content: Link

OUR LATEST PICKS

11. Set properties for Content: “Add to Compare” link

OUR LATEST PICKS

12. Set properties for Content: Rate

OUR LATEST PICKS

13. Set properties for Content: Category

OUR LATEST PICKS

14. Set properties for Global: Fieldset (Fieldset)

OUR LATEST PICKS

15. Set properties for Commerce Product: Old Price

OUR LATEST PICKS

16. Set properties for Commerce Product: Price

OUR LATEST PICKS

17. At FIELDS area, click Rearrange button and set following arrange

OUR LATEST PICKS

18. At FILTER CRITERIA area, click Add button and add file Content: Type set the following properties:

19. Set properties for Content: Type

OUR LATEST PICKS

20. At HEADER area, click Add button field Global: Text area and set following properties:

OUR LATEST PICKS

21. At FOOTER area, click Add button field Global: Text area and set following properties:

OUR LATEST PICKS

22. At PAGER > Use pager area, click link

OUR LATEST PICKS

23. In Advanced > OTHER area, add CSS class change following properties:

OUR LATEST PICKS

24.Click Save block button.

2. Configure OUR LATEST PICKS block

1. Navigate to Structure > Blocks

2. Find View: Product View: OUR LATEST PICKS, click configure link, set following properties

OUR LATEST PICKS

3.Click Save block button.

Featuer block

Front end Display

Video view

1. Create Video view block view

Stay open Product view, click Add button add Block new.

Video view

Front end Display

Video view

1. Next to steps below to set properties for the following fields:

Video view

2. At Display name area, set following properties:

Video view

3. At Title area, set following properties:

Video view

4. At FORMAT Format: Unformatted list, click Settings and set following properties:

Video view

5. In Advanced > Contextual filters area, click Add button to add fields: Content: Nid and set following properties:

Video view

6. At Advanced > REALATIONSHIPS area, click Rearrange and remove content

Video view

7. At FIELDS area, click Add button to add fields: Content: Videoview, Field: Image .

8. Set properties for Content: Videoview

Video view

9. Set properties for Field: Image

Video view

10. At FILTER CRITERIA area, click Add button and add file Content: Promoted to front page,
Content: Sticky
set the following properties:

11. Set properties for Content: Type

Video view

12. Set properties for Content: Promoted to front page

Video view

13. Set properties for Content: Sticky

Video view

14. At FILTER CRITERIA area, click And/Or, Rearrange button and set following arrange

Video view

15. At PAGER > Use pager area, click link

Video view

16. At Advanced > OTHER area, add CSS class

Video view

17.Click Save block button.

2. Configure ViewColectionHompage block

1. Navigate to Structure > Blocks

2. Find View: Product View: Video view block, click configure link, set following properties

ViewColectionHompage

3.Click Save block button.

3. Create ViewColectionHompage block view

Front end Display

ViewColectionHompage

Stay open Collection view, click Add button add Block new.

ViewColectionHompage

1. Next to steps below to set properties for the following fields:

ViewColectionHompage

2. At Display name area, set following properties:

ViewColectionHompage

3. At Title area, set following properties:

ViewColectionHompage

4. At FORMAT Format area, set properties:

ViewColectionHompage

5. At FIELDS area, click Add button to add fields: Field: Link.

6. Set properties for Field: Link

ViewColectionHompage

7. Set properties for Field: Image

ViewColectionHompage

8. Set properties for Taxonomy term: Term description

ViewColectionHompage

9. At FIELDS area, click Rearrange button and set following arrange

ViewColectionHompage

10. At FILTER CRITERIA area, click Taxonomy vocabulary: Machine name, Taxonomy term: Term ID set following properties:

11. Set properties for Taxonomy vocabulary: Machine name

ViewColectionHompage

12. Set properties for Taxonomy term: Term ID

ViewColectionHompage

13. At SORT CRITERIA area, Click Taxonomy term: Term IDset following properties:

ViewColectionHompage

14.Click Save block button.

4. Configure ViewColectionHompage block

1. Navigate to Structure > Blocks

2. Find View: Collection View: ViewColectionHompage block, click configure link, set following properties

ViewColectionHompage

3.Click Save block button.

Frontpage view

Edit Frontpage page view

1. Navigate to Structure > View ,find Frontpage view, click Enable button. Then click Editbutton , find and click Page button and set following properties:

Frontpage

2. At FORMAT Format area, set properties:

Frontpage

3. In Advanced > Contextual filters area, click Add button to add fields: Content: Nid and set following properties:

Frontpage

4. In Advanced > REALATIONSHIPS area, click Add button to add fields: Content: Taxonomy terms on node and set following properties:

Frontpage

5. At FIELDS area, click Add button to add fields: Content: Body .

6. Set properties for Content: Body

Frontpage

7. At FILTER CRITERIA area, click Add button and add file Content: Type set the following properties:

8. Set properties for Content: Type

Frontpage

9.Click Save block button.

Site Informations

1. Navigate to Configuration > System click Site information and set following properties:

site informations

2. Click Save button

Our Store

Front end Display

Our Store

1. Navigate to Structure > Blocks

2. Click Add block link to create block, for example: Our Store block and set properties for them.

Our Store

3. Click Save button

Refer to following HTML code:

Pzza Martiri Olivetta, 16, 16034, Portofino, Italy

Opening hours

Monday to Friday: 9am - 6pm
Saturday to Sunday: 10am - 4pm

SIGN UP FOR UPDATES

Front end Display

SIGN UP FOR UPDATES

1. Navigate to Structure > Blocks, find Newsletter: localhost newsletter block, click configure link and set the following properties:

SIGN UP FOR UPDATES

2. Click Save button

Contact

Front end Display

Contact

1. Navigate to Structure > Blocks

2. Click Add block link to create block, for example: Shopping cart block and set properties for them.

Contact

3. Click Save button

Refer to following HTML code:

Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt avctor
To order: +12 345 6789
Client support: +12 987 6543
Email: support@weebpal.com

Home2 View page

1. Create Home2_AUTUMN / WINTER 2014 block view

Front end Display

Home2_AUTUMN / WINTER 2014

Stay open Collection view, click Add button add Block new.

Home2_AUTUMN / WINTER 2014

1. Next to steps below to set properties for the following fields:

Home2_AUTUMN / WINTER 2014

2. At Display name area, set following properties:

Home2_AUTUMN / WINTER 2014

3. At Title area, set following properties:

Home2_AUTUMN / WINTER 2014

4. At FIELDS area, set following properties:

5. Set properties for Field: Image

Home2_AUTUMN / WINTER 2014

6. Set properties for Global: Fieldset (Fieldset)

Home2_AUTUMN / WINTER 2014

7. Set properties for Taxonomy term: Name

Home2_AUTUMN / WINTER 2014

8. At FILTER CRITERIA area, set following properties:

Home2_AUTUMN / WINTER 2014

9. At Advanced > OTHER area, add CSS class

Home2_AUTUMN / WINTER 2014

10.Click Save block button.

2. Configure Home2_AUTUMN / WINTER 2014 block

1. Navigate to Structure > Blocks

2. Find View: Collection View: Home2_AUTUMN / WINTER 2014, click configure link, set following properties

Home2_AUTUMN / WINTER 2014

3.Click Save block button.

3. Create Home2_buy 2 get 10% off block view

Front end Display

Home2_buy 2 get 10% off

Stay open Collection view, click Add button add Block new.

Home2_buy 2 get 10% off

1. Next to steps below to set properties for the following fields:

Home2_buy 2 get 10% off

2. At Display name area, set following properties:

Home2_buy 2 get 10% off

3. At Title area, set following properties:

Home2_buy 2 get 10% off

4. At FIELDS area, set following properties:

5. Set properties for Field: Image

Home2_buy 2 get 10% off

6. Set properties for Global: Fieldset (Fieldset)

Home2_buy 2 get 10% off

7. Set properties for Taxonomy term: Name

Home2_buy 2 get 10% off

8. At FILTER CRITERIA area, set following properties:

Home2_buy 2 get 10% off

9. At Advanced > OTHER area, add CSS class

Home2_buy 2 get 10% off

10.Click Save block button.

4. Configure Home2_buy 2 get 10% off block

1. Navigate to Structure > Blocks

2. Find View: Collection View: Home2_buy 2 get 10% off, click configure link, set following properties

Home2_buy 2 get 10% off

3.Click Save block button.

5. Create Home2, Home3, Home4 view

Front end Display

Home2

1. Navigate to Structure > Views, click Add views link, Create Home2 view with following properties:

Home2

2. Click Continue & edit button and set following properties:

Home2

3. At FIELDS area, click Add button to add fields: Field: Image, Global: Fieldset (Fieldset),
Global: Fieldset (Fieldset), Global: Fieldset (Fieldset), Content: Body, Field: Link
.

4. Set properties for Field: Image

Home2

5. Set properties for Global: Fieldset (Fieldset)

Home2

6. Set properties for Global: Fieldset (Fieldset)

Home2

7. Set properties for Global: Fieldset (Fieldset)

Home2

8. Set properties for Content: Title

Home2

9. Set properties for Content: Body

Home2

10. At FIELDS area, click Rearrange button and set following arrange

Home2

11. At FILTER CRITERIA area, click Add button and add file Content: Nid set the following properties:

12. Set properties for Content: Nid

Home2

13. At PAGE SETTINGS > Menu area, set the following properties:

Home2

14. At Advanced > OTHER area, add CSS class

Home2

15.Click Save block button.

6. Create Shop's men home 2 block view

Front end Display

Shop's men home 2

Stay open Home2 view, click Add button add Block new.

Shop's men home 2

1. Next to steps below to set properties for the following fields:

Shop's men home 2

2. At Display name area, set following properties:

Shop's men home 2

3. At Title area, set following properties:

Shop's men home 2

4. At FORMAT Format: jCarousel, click Settings and set following properties:

Shop's men home 2

5. At Advanced > REALATIONSHIPS area, click Add button to add fields: Content: Product,
Content: Taxonomy terms on node

6. Set properties for Content: Product

Shop's men home 2

7. Set properties for Content: Taxonomy terms on node

Shop's men home 2

8. At FIELDS area, click Add button to add fields: Field: Image, Global: Fieldset (Fieldset),
Commerce Product: Add to Cart form, Content: Link, Content: “Add to Compare” link, Content: Rate, Content: Category,
Global: Fieldset (Fieldset), Commerce Product: Old Price, Commerce Product: Price
.

9. Set properties for Field: Image

Shop's men home 2

10. Set properties for Global: Fieldset (Fieldset)

Shop's men home 2

11. Set properties for Commerce Product: Add to Cart form

Shop's men home 2

12. Set properties for Content: Link

Shop's men home 2

13. Set properties for Content: “Add to Compare” link

Shop's men home 2

14. Set properties for Content: Rate

Shop's men home 2

15. Set properties for Content: Category

Shop's men home 2

16. Set properties for Global: Fieldset (Fieldset)

Shop's men home 2

17. Set properties for Commerce Product: Old Price

Shop's men home 2

18. Set properties for Commerce Product: Price

Shop's men home 2

19. At FIELDS area, click Rearrange button and set following arrange

Shop's men home 2

20. At FILTER CRITERIA area, click Add button and add file Taxonomy term: Term ID set the following properties:

21. Set properties for Taxonomy term: Term ID

Shop's men home 2

22. At Header area, Click Add button to add Global: Text area and set the following properties:

Shop's men home 2

23. At PAGER > Use pager area, click link

Shop's men home 2

24. At Advanced > OTHER area, add CSS class

Shop's men home 2

25.Click Save block button.

7. Configure Shop's men home 2 block

1. Navigate to Structure > Blocks

2. Find View: Home2: Shop's men home 2, click configure link, set following properties

Shop's men home 2

3.Click Save block button.

8. Create Shop's women home 2 block view

Front end Display

Shop's women home 2

Stay open Home2 view, click Add button add Block new.

Shop's women home 2

1. Next to steps below to set properties for the following fields:

Shop's women home 2

2. At Display name area, set following properties:

Shop's women home 2

3. At Title area, set following properties:

Shop's women home 2

4. At FORMAT Format: jCarousel, click Settings and set following properties:

Shop's women home 2

5. At Advanced > REALATIONSHIPS area, set following properties:

6. Set properties for Content: Taxonomy terms on node

Shop's women home 2

7. At FIELDS area, click Add button to add fields: Commerce Product: Old Price, Commerce Product: Price .

8. Set properties for Commerce Product: Old Price

Shop's women home 2

9. Set properties for Commerce Product: Price

Shop's women home 2

10. At FIELDS area, click Rearrange button and set following arrange

Shop's women home 2

11. At FILTER CRITERIA area, set following properties:

Shop's women home 2

12. At Header area, set following properties:

Shop's women home 2

13. At PAGER > Use pager area, click link

Shop's women home 2

14. At Advanced > OTHER area, add CSS class

Shop's women home 2

15.Click Save block button.

9. Configure Shop's women home 2 block

1. Navigate to Structure > Blocks

2. Find View: Home2: Shop's women home 2, click configure link, set following properties

Shop's women home 2

3.Click Save block button.

Home5 View page

1. Create Home5, Home6 view

Front end Display

Home5

1. Navigate to Structure > Views, click Add views link, Create Home5 view with following properties:

Home5

2. Click Continue & edit button and set following properties:

Home5

3. At Title area, set following properties:

Home5

4. At FIELDS area, click Add button to add fields: Field: Image, Global: Fieldset (Fieldset),
Global: Fieldset (Fieldset), Global: Fieldset (Fieldset), Content: Body, Field: Link
.

5. Set properties for Field: Image

Home5

6. Set properties for Global: Fieldset (Fieldset)

Home5

7. Set properties for Global: Fieldset (Fieldset)

Home5

8. Set properties for Global: Fieldset (Fieldset)

Home5

9. Set properties for Content: Title

Home5

10. Set properties for Content: Body

Home5

11. Set properties for Field: Link

Home5

12. At FILTER CRITERIA area, click Add button and add file Content: Nid set the following properties:

Home5

13. At PAGE SETTINGS > Menu area, set the following properties:

Home5

14. At Advanced > OTHER area, add CSS class

Home5

15.Click Save block button.

2. Create Homepage extra block view

Front end Display

Homepage extra

Stay open Collection view, click Add button add Block new.

Homepage extra

1. Next to steps below to set properties for the following fields:

Homepage extra

2. At Display name area, set following properties:

Homepage extra

3. At Title area, set following properties:

Homepage extra

4. At FORMAT Format: Grid, click Settings and set following properties:

Homepage extra

5. At FIELDS area, set following properties:

6. Set properties for Field: Image

Homepage extra

7. Set properties for Global: Fieldset

Homepage extra

8. Set properties for Taxonomy term: Name

Homepage extra

9. At FILTER CRITERIA area, click Add button and add file Taxonomy vocabulary: Machine name,
Taxonomy term: weight
set the following properties:

10. Set properties for Taxonomy vocabulary: Machine name

Homepage extra

11. Set properties for Taxonomy term: weight

Homepage extra

12. At SORT CRITERIA area, Click Global: Random set following properties:

Homepage extra

13. At PAGER > Use pager area, click link

Homepage extra

14. At Advanced > OTHER area, add CSS class

Homepage extra

15.Click Save block button.

3. Create Product tab 4 col view

Front end Display

Product tab 4 col

Stay open Product view, click Add button add Block new.

Product tab 4 col

1. Next to steps below to set properties for the following fields:

Product tab 4 col

2. At Display name area, set following properties:

Product tab 4 col

3. At Title area, set following properties:

Product tab 4 col

4. At FORMAT Format: Grid area, click Settings and set following properties:

Product tab 4 col

5. In Advanced > Contextual filters area, click Add button to add fields: Content: Has taxonomy term ID and set following properties:

Product tab 4 col

6. At Advanced > REALATIONSHIPS area, set following properties:

7. Set properties for Content: Referenced products

Product tab 4 col

8. At FIELDS area, click Add button to add fields: Field: Image, Global: Fieldset (Fieldset),
Commerce Product: Add to Cart form, Content: “Add to Compare” link, Content: Link, Global: Fieldset (Fieldset), Content: Rate, Field: Title,
Content: Category, Global: Fieldset (Fieldset), Commerce Product: Old Price, Commerce Product: Price
set following properties:

9. Set properties for Field: Image

Product tab 4 col

10. Set properties for Global: Fieldset (Fieldset)

Product tab 4 col

11. Set properties for Commerce Product: Add to Cart form

Product tab 4 col

12. Set properties for Content: “Add to Compare” link

Product tab 4 col

13. Set properties for Content: Link

Product tab 4 col

14. Set properties for Global: Fieldset (Fieldset)

Product tab 4 col

15. Set properties for Content: Rate

Product tab 4 col

16. Set properties for Field: Title

Product tab 4 col

17. Set properties for Content: Category

Product tab 4 col

18. Set properties for Global: Fieldset (Fieldset)

Product tab 4 col

19. Set properties for Commerce Product: Old Price

Product tab 4 col

20. Set properties for Commerce Product: Price

Product tab 4 col

21. At FIELDS area, click Rearrange button and set following arrange

Product tab 4 col

22. At FILTER CRITERIA area, set following properties:

Product tab 4 col

23. At PAGER > Use pager area, click link

Product tab 4 col

24. In Advanced > OTHER area, add CSS class change following properties:

Product tab 4 col

25.Click Save block button.

Home7 View page

1. Create Home7 view

Front end Display

Home5

1. Navigate to Structure > Views, click Add views link, Create Home7 view with following properties:

Home7

2. Click Continue & edit button and set following properties:

Home7

3. At Title area, set following properties:

Home7

4. At FIELDS area, click Add button to add fields: Field: Imageset following properties.

Home7

5. At FILTER CRITERIA area, click Add button and add file Content: Nid set following properties:

Home7

6. At PAGE SETTINGS > Menu area, set the following properties:

Home7

7. At Advanced > OTHER area, add CSS class

Home7

8.Click Save block button.

2. Create Product tab 3 col view

Front end Display

Product tab 3 col

Stay open Product view, click Add button add Block new.

Product tab 3 col

1. Next to steps below to set properties for the following fields:

Product tab 3 col

2. At Display name area, set following properties:

Product tab 3 col

3. At Title area, set following properties:

Product tab 3 col

4. At FORMAT Format: Grid area, click Settings and set following properties:

Product tab 3 col

5. In Advanced > Contextual filters area, set following properties:

Product tab 3 col

6. At Advanced > REALATIONSHIPS area, set following properties:

7. Set properties for Content: Referenced products

Product tab 3 col

8. At FIELDS area, click Add button to add fields: Field: Image, Global: Fieldset (Fieldset),
Commerce Product: Add to Cart form, Content: “Add to Compare” link, Content: Link, Global: Fieldset (Fieldset), Content: Rate, Field: Title,
Content: Category, Global: Fieldset (Fieldset), Commerce Product: Old Price, Commerce Product: Price
.

9. Set properties for Field: Image

Product tab 3 col

10. Set properties for Global: Fieldset (Fieldset)

Product tab 3 col

11. Set properties for Commerce Product: Add to Cart form

Product tab 3 col

12. Set properties for Content: “Add to Compare” link

Product tab 3 col

13. Set properties for Content: Link

Product tab 3 col

14. Set properties for Global: Fieldset (Fieldset)

Product tab 3 col

15. Set properties for Content: Rate

Product tab 3 col

16. Set properties for Field: Title

Product tab 3 col

17. Set properties for Content: Category

Product tab 3 col

18. Set properties for Global: Fieldset (Fieldset)

Product tab 3 col

19. Set properties for Commerce Product: Old Price

Product tab 3 col

20. Set properties for Commerce Product: Price

Product tab 3 col

21. At FIELDS area, click Rearrange button and set following arrange

Product tab 3 col

22. At FILTER CRITERIA area, set following properties:

Product tab 3 col

23. At PAGER > Use pager area, click link

Product tab 3 col

24. At Advanced > OTHER area, add CSS class

Product tab 3 col

25.Click Save block button.

3. Create Top rates view

Front end Display

Top rates

Stay open Product view, click Add button add Block new.

Top rates

1. Next to steps below to set properties for the following fields:

Top rates

2. At Display name area, set following properties:

Top rates

3. At Title area, set following properties:

Top rates

4. At FORMAT Format: Grid area, click Settings and set following properties:

Top rates

5. In Advanced > Contextual filters area, set following properties:

Top rates

6. In Advanced > REALATIONSHIPS area, click Add button to add fields: Content: Vote results and set following properties:

Top rates

7. In FIELDS area, click Add button to add fields: Field: Title, Commerce Product: Old Price, Commerce Product: Price field and set following properties:

8. Set properties for Field: Image

Top rates

9. Set properties for Field: Title

Top rates

10. Set properties for Global: Fieldset (Fieldset)

Top rates

11. Set properties for Commerce Product: Old Price

Top rates

12. Set properties for Commerce Product: Price

Top rates

13. At FIELDS area, click Rearrange button and set following arrange

Top rates

14. In FILTER CRITERIA area, click Add button to add Vote results: Function, Vote results: Value set following properties:

15. Set properties for Vote results: Function

Top rates

16. Set properties for Vote results: Value

Top rates

17. At SORT CRITERIA area, Click Add button to add Vote results: Value

Top rates

18. At PAGER > Use pager area, click link

Top rates

19. In Advanced > OTHER area, add CSS class change following properties:

Top rates

20.Click Save block button.

4. Create LATEST DEALS view

Front end Display

LATEST DEALS

Stay open Product view, click Add button add Block new.

Top rates

1. Next to steps below to set properties for the following fields:

LATEST DEALS

2. At Display name area, set following properties:

LATEST DEALS

3. At Title area, set following properties:

LATEST DEALS

4. At FORMAT Format area, set following properties:

LATEST DEALS

5. In Advanced > Contextual filters area, click Add button to add fields: Content: Nid and set following properties:

LATEST DEALS

6. In Advanced > REALATIONSHIPS area, set following properties:

LATEST DEALS

7. In FIELDS area, click Add button to add fields: Content: Rate, Content: Title,
Global: Fieldset (Fieldset), Commerce Product: Old Price, Commerce Product: Price
set following properties:

8. Set properties for Field: Image

LATEST DEALS

9. Set properties for Global: Fieldset (Fieldset)

LATEST DEALS

10. Set properties for Content: Rate

LATEST DEALS

11. Set properties for Content: Title

LATEST DEALS

12. Set properties for Global: Fieldset (Fieldset)

LATEST DEALS

13. Set properties for Commerce Product: Old Price

LATEST DEALS

14. Set properties for Commerce Product: Price

LATEST DEALS

15. At FIELDS area, click Rearrange button and set following arrange

LATEST DEALS

16. At FILTER CRITERIA area, set following properties:

LATEST DEALS

17. At SORT CRITERIA area, Click Add button to add Commerce Product: Price:amount set following properties:

LATEST DEALS

18. At PAGER > Use pager area, click link

LATEST DEALS

19. In Advanced > OTHER area, add CSS class change following properties:

LATEST DEALS

20.Click Save block button.

5. Create Product Recent view

Front end Display

Product Recent

Stay open Product view, click Add button add Block new.

Product Recent

1. Next to steps below to set properties for the following fields:

Product Recent

2. At Display name area, set following properties:

Product Recent

3. At Title area, set following properties:

Product Recent

4. At FORMAT Format: jCarousel area, click Settings and set following properties:

Product Recent

5. In Advanced > Contextual filters area, set following properties:

Product Recent

6. In Advanced > REALATIONSHIPS area, set following properties:

Product Recent

7. In FIELDS area, click Add button to add fields: Commerce Product: Add to Cart form, Content: “Add to Compare” link,
Content: Link, Content: Title, Content: Category, Global: Fieldset (Fieldset), Commerce Product: Old Price, Commerce Product: Price
field and set following properties:

8. Set properties for Field: Image

Product Recent

9. Set properties for Global: Fieldset (Fieldset)

Product Recent

10. Set properties for Commerce Product: Add to Cart form

Product Recent

11. Set properties for Content: “Add to Compare” link

Product Recent

12. Set properties for Content: Link

Product Recent

13. Set properties for Content: Title

Product Recent

14. Set properties for Content: Category

Product Recent

15. Set properties for Global: Fieldset (Fieldset)

Product Recent

16. Set properties for Commerce Product: Old Price

Product Recent

17. Set properties for Commerce Product: Price

Product Recent

18. At FIELDS area, click Rearrange button and set following arrange

Product Recent

19. In FILTER CRITERIA area, click Add button to add Content: Type set following properties:

Product Recent

20. At SORT CRITERIA area, Click Add button to add Global: Random set following properties:

21. Set properties for Content: Post date

Product Recent

22. At Header area, Click Add button to add Global: Text area and set the following properties:

Product Recent

23. At PAGER > Use pager area, click link

Product Recent

24. In Advanced > OTHER area, add CSS class change following properties:

Product Recent

25.Click Save block button.

6. Create Bestsellers block view

Front end Display

Bestsellers

1. Navigate to Structure > Views, click Add views link, Create Bestsellers view with following properties:

Bestsellers

2. Click Continue & edit button and set following properties:

Bestsellers

3. At Title area, set following properties:

Bestsellers

4. In Advanced > REALATIONSHIPS area, click Add button to add fields: Commerce Order: Line items,
Commerce Line item: Product, Commerce Product: Referencing Node
and set following properties:

5. Set properties for Commerce Order: Referenced line items

Bestsellers

6. Set properties for Commerce Line item: Referenced products

Bestsellers

7. Set properties for Commerce Product: Referencing Node

Bestsellers

8. In Advanced > OTHER area, add Use aggregation change following properties:

Bestsellers

9. In FIELDS area, click Add button to add fields: Field: Image, Content: Title, Content: Rate,
Global: Fieldset (Fieldset), Commerce Product: Price
field and set following properties:

10. Set properties for Field: Image

Bestsellers

11. Set properties for Content: Title

Bestsellers

12. Set properties for Content: Rate

Bestsellers

13. Set properties for Global: Fieldset (Fieldset)

Bestsellers

14. Set properties for Commerce Product: Price

Bestsellers

15. At FIELDS area, click Rearrange button and set following arrange

Bestsellers

16. In FILTER CRITERIA area, click Add button to add Commerce Line Item: Type,
Commerce Product: Type, Content: Published
set following properties:

17. Set properties for Commerce Line Item: Type

Bestsellers

18. Set properties for Commerce Product: Type

Bestsellers

19. Set properties for Content: Published

Bestsellers

20. At SORT CRITERIA area, Click Add button to add COUNT(Commerce Product: Title) set following properties:

Bestsellers

21. In Advanced > OTHER area, add CSS class change following properties:

Bestsellers

22.Click Save block button.

7. Configure Bestsellers block

1. Navigate to Structure > Blocks

2. Find View: Bestsellers, click configure link, set following properties

Bestsellers

3.Click Save block button.

8. Create Specials view

Front end Display

Specials

Stay open Product view, click Add button add Block new.

Specials

1. Next to steps below to set properties for the following fields:

Specials

2. At Display name area, set following properties:

Specials

3. At Title area, set following properties:

Specials

4. At FORMAT Format area, set following properties:

Specials

5. In Advanced > Contextual filters area, set following properties:

Specials

6. In Advanced > REALATIONSHIPS area, set following properties:

Specials

7. In FIELDS area, click Add button to add fields: Field: Title, Commerce Product: Old Price,
Commerce Product: Price
set following properties:

8. Set properties for Field: Image

Specials

9. Set properties for Field: Title

Specials

10. Set properties for Global: Fieldset (Fieldset)

Specials

11. Set properties for Commerce Product: Old Price

Specials

12. Set properties for Commerce Product: Price

Specials

13. At FIELDS area, click Rearrange button and set following arrange

Specials

14. At FILTER CRITERIA area, click Add button and add file Commerce Product: Old Price set following properties:

Specials

15. At SORT CRITERIA area, Click Add button to add Commerce Product: Old Price set following properties:

Specials

16. At PAGER > Use pager area, click link

Specials

17. In Advanced > OTHER area, add CSS class change following properties:

Specials

18.Click Save block button.

Configuration Context

Create home4 context

1. Navigate to Structure > Context. Click Add link to create home4

2. In Add a conditon and Add a reaction add condition and reaction: Path, Blocks and set following properties:


Context

3. Add context for home5


Context

4. Add context for home6


Context

5. Add context for home7


Context

Ads page view

Front end Display

Ads

1. Create Ads page view

1. Navigate to Structure > Views, click Add views link, Create Ads view with following properties:

Ads

2. At Title area, set following properties:

Ads

3. In FIELDS area, click Add button to add fields: Content: newarrivals, Content: bestsellers, Content: specials, Field: Image field and set following properties:

4. Set properties for Content: newarrivals

Ads

5. Set properties for Content: bestsellers

Ads

6. Set properties for Content: specials

Ads

7. Set properties for Field: Image

Ads

8. In FILTER CRITERIA area, click Add button to add Content: Type and set following properties:

Ads

9. At Advanced > OTHER area, add CSS class

Ads

10. Click Save block button.

2. Create Featured Product view

Front end Display

Featured Product

Stay open Product view, click Add button add Block new.

Featured Product

1. Next to steps below to set properties for the following fields:

Featured Product

2. At Display name area, set following properties:

Featured Product

3. At Title area, set following properties:

Featured Product

4. At FORMAT Format area, set following properties:

Featured Product

5. In Advanced > Contextual filters area, set following properties:

Featured Product

6. In Advanced > REALATIONSHIPS area, set following properties:

Featured Product

7. In FIELDS area, set following properties:

8. Set properties for Field: Image

Featured Product

9. Set properties for Global: Fieldset (Info)

Featured Product

10. Set properties for Commerce Product: Price

Featured Product

11. At FIELDS area, click Rearrange button and set following arrange

Featured Product

12. In FILTER CRITERIA area, click Add button to add Content: Type and set following properties:

Featured Product

13. At PAGER > Use pager area, click link

Featured Product

14. In Advanced > OTHER area, add CSS class change following properties:

Featured Product

15. Click Save block button.

Create Subpages

Search API configuration

1. Preparation

Make sure all necessary search & search toolkit modules were installed.

Search API

Search API

2. Create a Search API Index

1. Create a Search API Server

The first step required for our search page, is to create a Search API server. This will let Search API know how and where the index will be stored.

1. Navigate to Configuration > Search API, click Add server link, Create Db server server with following properties:

Search API

2. Click Create server

3. Create a Search API Index

Now, we need to create a Search API index and define which fields should be stored in the index.

1. Navigate to Configuration > Search API, click Add index link, Create Product display index with following properties:

Search API

2. Click Create index

4. Define Index fields

On the Fields page, we have to define which fields will be indexed.

1. Navigate to Configuration > Search API, at Product display index row, click edit > fields

2. Click on Add related fields section, and select Product variations and click on "Add fields".

Now, choose whatever fields you want index for searching by checking on them. Follow steps below:

Search API

3. In Filters tab, choose the following options and click Save configuration button.

Search API

4. In Facets tab, choose whatever facets you want to use to search

Search API

Note: What is facet? It is block content which is help you customize the searching

Search API

Index Content

Now that we have setup our Search API index, the next step is to index some data.

Click on Status, click on Index now

About Us page

1. About Us view setting

Front end Display

About Us

1. Navigate to Structure > Views, click Add views link, Create Aboutus view with following properties:

About Us

2. At FIELDS area, click Add button to add fields: Field: Image.

About Us

3. At FILTER CRITERIA area, click Add button and add file Content: Nid (= 23), Content: Type (= Article)

4. Set properties for Content: Nid (= 23)

About Us

5. Set properties for Content: Type (= Article)

About Us

6. At PAGE SETTINGS > Path area, set the following properties:

About Us

7. At PAGE SETTINGS > Menu area, set the following properties:

About Us

8. At Advanced > OTHER area, add CSS class

About Us

2. Create About Us page view

Stay open About Us view, click Add button add Page new.

About Us page

Next to steps below to set properties for the following fields:

About Us page

1. At Title area, set following properties:

About Us page

2. At FIELDS area, click Add button to add fields: Field: Image, Content: Title, Content: Body .

3. Set properties for Field: Image

About Us page

4. At FILTER CRITERIA area, click Add button and add file Content: Type, Content: Nid (= 24)

5. Set properties for Content: Type

About Us page

6. Set properties for Content: Nid (= 24)

About Us page

3. Create About Us block view

Stay open About Us view, click Add button add Block new.

About Us block

Next to steps below to set properties for the following fields:

About Us block

2. At FIELDS area, click Add button to add fields: Content: Title, Content: Body field and set following properties.

4. Configure About Us block

1. Navigate to Structure > Blocks

2. Find View: Aboutus, click configure link, set following properties

About Us block

3.Click Save block button.

5. Create About Us image block view

Stay open About Us view, click Add button add Block new.

About Us image block

Next to steps below to set properties for the following fields:

About Us image block

1. At Title area, set following properties:

About Us image block

6. Configure About Us image block

1. Navigate to Structure > Blocks

2. Find View: Aboutus: Block1, click configure link, set following properties

About Us image block

3.Click Save block button.

7. Create About Us image block view

Stay open About Us view, click Add button add Block new.

About Us block3

1. Next to steps below to set properties for the following fields:

About Us block3

2. At FORMAT Format: Grid area, click Settings and set following properties:

About Us block3

3. At FIELDS area, click Add button to add fields: Field: Image, Global: Fieldset (Fieldset),
Global: Fieldset (Fieldset), Global: Fieldset (Fieldset), Field: Icon, Content: Title, Content: Body
.

4. Set properties for Field: Image

About Us block3

5. Set properties for Global: Fieldset (Fieldset)

About Us block3

6. Set properties for Global: Fieldset (Fieldset)

About Us block3

7. Set properties for Global: Fieldset (Fieldset)

About Us block3

8. Set properties for Field: Icon

About Us block3

9. Set properties for Content: Body

About Us block3

10. At FIELDS area, click Rearrange button and set following arrange

About Us block3

11. At FILTER CRITERIA area, click Add button and add file Content: Type, Content: Nid

12. Set properties for Content: Type

About Us block3

13. Set properties for Content: Nid

About Us block3

14. At Advanced > OTHER area, add CSS class

About Us block3

8. Configure About Us block3 block

1. Navigate to Structure > Blocks

2. Find View: Aboutus: Block 3, click configure link, set following properties

About Us block3

3.Click Save block button.

Category view

Front end Display

Category

1. Create Category block view

1. Navigate to Structure > Views, click Add views link, Create Category view with following properties:

Category

2. At FORMAT Format: HTML list area, click Settings and set following properties:

Category

3. In Advanced > REALATIONSHIPS area, click Add button to add fields: Taxonomy term: Content with term and set following properties:

Category

4. In FIELDS area, click Add button to add fields: Taxonomy term: Name, COUNT(Taxonomy term: Name) field and set following properties:

5. Set properties for Taxonomy term: Name

Category

6. Set properties for COUNT(Taxonomy term: Name)

Category

7. In FILTER CRITERIA area, click Add button to add Taxonomy vocabulary: Machine name and set following properties:

Category

8. At Advanced > OTHER area, add CSS class

Category

2. Configure Category block

1. Navigate to Structure > Blocks

2. Find View: Category, click configure link, set following properties

Category

3.Click Save block button.

Happy Clients view

Front end Display

Happy Clients

1. Create Happy Clients block view

1. Navigate to Structure > Views, click Add views link, Create Happy Clients view with following properties:

Happy Clients

2. In Advanced > REALATIONSHIPS area, click Add button to add fields: Content: Author and set following properties:

Happy Clients

3. In FIELDS area, click Add button to add fields: Content: Body, Global: Fieldset (Fieldset),
User: Picture, User: Full Name, User: Occupations
field and set following properties:

4. Set properties for Global: Fieldset (Fieldset)

Happy Clients

5. Set properties for User: Picture

Happy Clients

6. Set properties for User: Occupations

Happy Clients

7. At Advanced > OTHER area, add CSS class

Happy Clients

2. Configure Happy Clients block

1. Navigate to Structure > Blocks

2. Find View: Happy Clients, click configure link, set following properties

Happy Clients

3.Click Save block button.

Our Partners view

Front end Display

Our Partners

1. Create Our Partners block view

1. Navigate to Structure > Views, click Add views link, Create Our Partners view with following properties:

Our Partners

2. In FIELDS area, click Add button to add fields: Field: Image, Content: Title field and set following properties:

3. Set properties for Field: Image

Our Partners

4. Set properties for Content: Title

Our Partners

5. At Advanced > OTHER area, add CSS class

Our Partners

2. Configure Our Partners block

1. Navigate to Structure > Blocks

2. Find View: Our Partners, click configure link, set following properties

Our Partners

3.Click Save block button.

Our Team view

Front end Display

Our Team

1. Create Our Team block view

1. Navigate to Structure > Views, click Add views link, Create Our Team view with following properties:

Our Team

2. At FORMAT Format: Grid area, click Settings and set following properties:

Our Team

3. In FIELDS area, click Add button to add fields: User: Picture, Global: Fieldset (Fieldset), User: Full Name,
User: Occupations, Global: Fieldset (Fieldset), User: Facebook, User: Gplus, User: Twitter
field and set following properties:

4. Set properties for User: Picture

Our Team

5. Set properties for Global: Fieldset (Fieldset)

Our Team

6. Set properties for User: Occupations

Our Team

7. Set properties for Global: Fieldset (Fieldset)

Our Team

8. Set properties for User: Facebook

Our Team

9. Set properties for User: Gplus

Our Team

10. Set properties for User: Twitter

Our Team

11. In FILTER CRITERIA area, click Add button to add User: Occupations and set following properties:

Our Team

12. At HEADER area, click Add button field Global: Text area and set following properties:

Our Team

13. At Advanced > OTHER area, add CSS class

Our Team

2. Configure Our Team block

1. Navigate to Structure > Blocks

2. Find View: Our Team, click configure link, set following properties

Our Team

3.Click Save block button.

Bestsellers page

Stay open Bestsellers view, click Add button add Page new.

Bestsellers page

1. Next to steps below to set properties for the following fields:

Bestsellers page

2. At FORMAT Format: Grid area, click Settings and set following properties:

Bestsellers page

3. In FIELDS area, click Add button to add fields: Global: Fieldset (Fieldset), Commerce Product: Add to Cart form,
Content: Link, Global: Fieldset (Fieldset), Content: Category, Global: Fieldset (Fieldset), Commerce Product: Old Price
field and set following properties:

4. Set properties for Field: Image

Bestsellers page

5. Set properties for Global: Fieldset (Fieldset)

Bestsellers page

6. Set properties for Commerce Product: Add to Cart form

Bestsellers page

7. Set properties for Content: Link

Bestsellers page

8. Set properties for Global: Fieldset (Fieldset)

Bestsellers page

9. Set properties for Content: Rate

Bestsellers page

10. Set properties for Content: Title

Bestsellers page

11. Set properties for Content: Category

Bestsellers page

12. Set properties for Commerce Product: Old Price

Bestsellers page

14. At FIELDS area, click Rearrange button and set following arrange

Bestsellers page

13. In FILTER CRITERIA area, click Add button to add Commerce Product: Type, Content: Published set following properties:

14. Set properties for Commerce Product: Type

Bestsellers page

14. Set properties for Content: Published

Bestsellers page

15. At PAGE SETTINGS > Path area, set the following properties:

Bestsellers page

16. At PAGE SETTINGS > Menu area, set the following properties:

Bestsellers page

17. At PAGER > Use pager area, click link

Bestsellers page

18. In Advanced > OTHER area, add CSS class change following properties:

Bestsellers page

19. Click Save button.

Blog page

1. Create Blog view

Front end Display

Blog

1. Navigate to Structure > Views, click Add views link, Create Bestsellers view with following properties:

Blog

2. In Advanced > REALATIONSHIPS area, click Add button to add fields: Content: Author and set following properties:

Blog

3. In FILTER CRITERIA area, click Add button to add Content: Type and set following properties:

Blog

4. At PAGE SETTINGS > Path area, set the following properties:

Blog

5. At PAGE SETTINGS > Menu area, set the following properties:

Blog

6. In Advanced > OTHER area, add CSS class change following properties:

Blog

7. Click Save button.

2. Create Blog SideBar view

Stay open Blog view, click Add button add Page new.

Blog SideBar

Front end Display

Blog SideBar

1. Next to steps below to set properties for the following fields:

Blog SideBar

2. At Display name area, set following properties:

Blog SideBar

3. At Title area, set following properties:

Blog SideBar

4. At FORMAT Format: Unformatted list area, click Settings and set following properties:

Blog SideBar

5. In FIELDS area, click Add button to add fields: Global: Fieldset (Fieldset), Global: Fieldset (Fieldset),
Global: Fieldset (Fieldset), Content: Post date, Content: Post date, User: Name (By), Content: Type (in), Content: Comment count,
Global: Fieldset (Fieldset), Global: Fieldset (Fieldset), Field: Image, Content: Gallery, Content: Video, Content: Summary, Content: Title,
Content: Body, Content: Link
field and set following properties:

6. Set properties for Global: Fieldset (Fieldset)

Blog SideBar

7. Set properties for Global: Fieldset (Fieldset)

Blog SideBar

8. Set properties for Global: Fieldset (Fieldset)

Blog SideBar

9. Set properties for Content: Post date

Blog SideBar

10. Set properties for Content: Post date

Blog SideBar

11. Set properties for User: Name (By)

Blog SideBar

12. Set properties for Content: Type (in)

Blog SideBar

13. Set properties for Content: Comment count

Blog SideBar

14. Set properties for Global: Fieldset (Fieldset)

Blog SideBar

15. Set properties for Global: Fieldset (Fieldset)

Blog SideBar

16. Set properties for Field: Image

Blog SideBar

17. Set properties for Content: Gallery

Blog SideBar

18. Set properties for Content: Video

Blog SideBar

19. Set properties for Content: Summary

Blog SideBar

20. Set properties for Content: Title

Blog SideBar

21. Set properties for Content: Body

Blog SideBar

22. Set properties for Content: Link

Blog SideBar

23. At FIELDS area, click Rearrange button and set following arrange

Blog SideBar

24. At PAGE SETTINGS > Path area, set the following properties:

Blog SideBar

25. At PAGE SETTINGS > Menu area, set the following properties:

Blog SideBar

26. In Advanced > OTHER area, add CSS class change following properties:

Blog SideBar

27. Click Save button.

3. Create Must Read block view

Stay open Blog view, click Add button add Block new.

Must Read

Front end Display

Must Read

1. Next to steps below to set properties for the following fields:

Must Read

2. At Title area, set following properties:

Must Read

3. In FIELDS area, click Add button to add fields: Global: Fieldset (Fieldset), Field: Image, Content: Gallery,
Content: Video, Content: Title, Content statistics: Total views
field and set following properties:

4. Set properties for Field: Image

Must Read

5. Set properties for Content: Gallery

Must Read

6. Set properties for Content: Video

Must Read

7. Set properties for Content: Title

Must Read

8. Set properties for Content statistics: Total views

Must Read

9. At PAGER > Use pager area, click link

Must Read

10. In Advanced > OTHER area, add CSS class change following properties:

Must Read

11. Click Save button.

4. Configure Must Read block

1. Navigate to Structure > Blocks

2. Find View: Blog, click configure link, set following properties

Must Read

3.Click Save block button.

5. Create Blog Full Width view

Stay open Blog view, click Add button add Page new.

Blog Full Width

1. Next to steps below to set properties for the following fields:

Blog Full Width

2. At Display name area, set following properties:

Blog Full Width

3. At PAGE SETTINGS > Path area, set the following properties:

Blog Full Width

4. At PAGE SETTINGS > Menu area, set the following properties:

Blog Full Width

5. In Advanced > OTHER area, add CSS class change following properties:

Blog Full Width

6. Click Save button.

6. Create Blog Isotope view

Stay open Blog view, click Add button add Page new.

Blog Isotope

1. Next to steps below to set properties for the following fields:

Blog Isotope

2. At Display name area, set following properties:

Blog Isotope

3. At FORMAT Format: Isotope Grid area, click Settings and set following properties:

Blog Isotope

4. In FIELDS area, click Add button to add fields: Global: Fieldset (Fieldset), Field: Image, Content: Gallery,
Content: Video, Content: Summary, Content: Post date, Content: Title, Global: Fieldset (Fieldset), User: Name (By), Content: Type (in),
Content: Comment count, Global: Fieldset (Fieldset), Content: Body
field and set following properties:

5. Set properties for Field: Image

Blog Isotope

6. Set properties for Content: Gallery

Blog Isotope

7. Set properties for Content: Video

Blog Isotope

8. Set properties for Content: Post date

Blog Isotope

9. Set properties for Content: Title

Blog Isotope

10. Set properties for User: Name (By)

Blog Isotope

11. Set properties for Content: Type (in)

Blog Isotope

12. Set properties for Content: Comment count

Blog Isotope

13. Set properties for Content: Body

Blog Isotope

14. At FIELDS area, click Rearrange button and set following arrange

Blog Isotope

15. At PAGE SETTINGS > Path area, set the following properties:

Blog Isotope

16. At PAGE SETTINGS > Menu area, set the following properties:

Blog Isotope

17. At PAGER > Use pager area, click link

Blog Isotope

18. Click Save button.

7. Create You might also like view

Stay open Blog view, click Add button add Block new.

You might also like

Front end Display

You might also like

1. Next to steps below to set properties for the following fields:

You might also like

2. At Title area, set following properties:

You might also like

3. At FORMAT Format: Isotope Grid area, click Settings and set following properties:

You might also like

4. In FIELDS area, click Add button to add fields: Global: Fieldset (Fieldset), Field: Image, Content: Gallery,
Content: Video, Content: Title
field and set following properties:

5. Set properties for Field: Image

You might also like

6. Set properties for Content: Gallery

You might also like

7. Set properties for Content: Video

You might also like

8. Set properties for Content: Title

You might also like

9. At FIELDS area, click Rearrange button and set following arrange

You might also like

10. In FILTER CRITERIA area, click Add button to add Content: Video - Video URL, Field: Image:fid,
Content: Gallery:fid
field and set following properties:

11. Set properties for Content: Video - Video URL

You might also like

12. Set properties for Field: Image:fid

You might also like

13. Set properties for Content: Gallery:fid

You might also like

14. At PAGER > Use pager area, click link

You might also like

15. In Advanced > OTHER area, add CSS class change following properties:

You might also like

16. Click Save button.

8. Configure Blog Home 2 Panel First 1 block

1. Navigate to Structure > Blocks

2. Find View: Blog: Blog Home 2 Panel First 1, click configure link, set following properties

Blog Home 2 Panel First 1

3.Click Save block button.

9. Create Blog Masonry view

Stay open Blog view, click Add button add Page new.

Blog Masonry

1. Next to steps below to set properties for the following fields:

Blog Masonry

2. In FIELDS area, click Add button to add fields: Global: Fieldset (Fieldset), Field: Image, Content: Gallery, Content: Video,
Global: Fieldset (Fieldset), Global: Fieldset (Fieldset), Content: Post date, Content: Post date, Global: Fieldset (Fieldset), Content: Title,
Global: Fieldset (Fieldset), User: Name (By), Content: Type (in), Content: Comment count, Global: Fieldset (Fieldset),
Content: Body
field and set following properties:

3. Set properties for Global: Fieldset (Fieldset)

Blog Masonry

4. Set properties for Field: Image

Blog Masonry

5. Set properties for Global: Fieldset (Fieldset)

Blog Masonry

6. Set properties for Global: Fieldset (Fieldset)

Blog Masonry

7. Set properties for Global: Fieldset (Fieldset)

Blog Masonry

8. Set properties for Global: Fieldset (Fieldset)

Blog Masonry

9. Set properties for Global: Fieldset (Fieldset)

Blog Masonry

10. At FIELDS area, click Rearrange button and set following arrange

Blog Masonry

11. At PAGE SETTINGS > Path area, set the following properties:

Blog Masonry

12. At PAGE SETTINGS > Menu area, set the following properties:

Blog Masonry

13. In Advanced > OTHER area, add CSS class change following properties:

You might also like

14. Click Save button.

10. Create Blog Home 2 Panel First 1 view

Stay open Blog view, click Add button add Block new.

Blog Home 2 Panel First 1

Front end Display

Blog Home 2 Panel First 1

1. Next to steps below to set properties for the following fields:

Blog Home 2 Panel First 1

2. In FIELDS area, click Add button to add fields: Global: Fieldset (Fieldset), Field: Image, Content: Gallery, Content: Video,
Global: Fieldset (Fieldset), Content: Title, Global: Fieldset (Fieldset), User: Name (By), Content: Type (in), Content: Comment count,
Content: Body
field and set following properties:

3. Set properties for Global: Fieldset (Fieldset)

Blog Home 2 Panel First 1

4. Set properties for Field: Image

Blog Home 2 Panel First 1

5. Set properties for Global: Fieldset (Fieldset)

Blog Home 2 Panel First 1

6. Set properties for Global: Fieldset (Fieldset)

Blog Home 2 Panel First 1

7. At FIELDS area, click Rearrange button and set following arrange

Blog Home 2 Panel First 1

8. In FILTER CRITERIA area, click Add button to add Field: Image:alt and set following properties:

Blog Home 2 Panel First 1

9. In Advanced > OTHER area, add CSS class change following properties:

You might also like

10. Click Save button.

11. Configure Blog Home 2 Panel First 1 block

1. Navigate to Structure > Blocks

2. Find View: Blog: Blog Home 2 Panel First 1, click configure link, set following properties

Blog Home 2 Panel First 1

3.Click Save block button.

12. Create Blog Home 2 Panel First 2 view

Stay open Blog view, click Add button add Block new.

Blog Home 2 Panel First 2

Front end Display

Blog Home 2 Panel First 2

1. Next to steps below to set properties for the following fields:

Blog Home 2 Panel First 2

2. Click Save button.

13. Configure Blog Home 2 Panel First 2 block

1. Navigate to Structure > Blocks

2. Find View: Blog: Blog Home 2 Panel First 2, click configure link, set following properties

Blog Home 2 Panel First 2

3. Click Save block button.

14. Create Blog Image view

Stay open Blog view, click Add button add Block new.

Blog Image

1. Next to steps below to set properties for the following fields:

Blog Image

2. In FIELDS area, click Add button to add fields: Global: Fieldset (Fieldset), Field: Image, Content: Gallery,
Content: Video
field and set following properties:

3. Set properties for Field: Image

Blog Image

4. At FIELDS area, click Rearrange button and set following arrange

Blog Image

5. Click Save button.

15. Create Blog Content view

Stay open Blog view, click Add button add Block new.

Blog Content

1. Next to steps below to set properties for the following fields:

Blog Content

2. At FIELDS area, click Rearrange button and set following arrange

Blog Content

3. Click Save button.

16. Create Blog Home Page view

Stay open Blog view, click Add button add Block new.

Blog Home Page

1. Next to steps below to set properties for the following fields:

Blog Home Page

2. In FIELDS area, click Add button to add fields: Global: Fieldset (Fieldset), Field: Image, Content: Gallery, Content: Video,
Global: Fieldset (Fieldset), Global: Fieldset (Fieldset), Global: Fieldset (Fieldset), Content: Post date, Content: Post date,
Global: Fieldset (Fieldset), User: Name (By), Content: Type (in), Content: Comment count (Comment), Global: Fieldset (Fieldset),
Content: Body
field and set following properties:

3. Set properties for Global: Fieldset (Fieldset)

Blog Home Page

4. Set properties for Field: Image

Blog Home Page

5. Set properties for Global: Fieldset (Fieldset)

Blog Home Page

6. Set properties for Global: Fieldset (Fieldset)

Blog Home Page

7. Set properties for Global: Fieldset (Fieldset)

Blog Home Page

8. Set properties for Global: Fieldset (Fieldset)

Blog Home Page

9. At FIELDS area, click Rearrange button and set following arrange

Blog Home Page

10. In Advanced > OTHER area, add CSS class change following properties:

Blog Home Page

11. Click Save button.

Product page

1. Create Product Recommened view

Front end Display

Product Recommened

Stay open Product view, click Add button add Block new.

Product Recommened

1. Next to steps below to set properties for the following fields:

Product Recommened

2. In Advanced > OTHER area, add CSS class change following properties:

Product Recommened

3. Click Save button.

2. Configure Product Recommened block

1. Navigate to Structure > Blocks

2. Find View: Product View: Product Recommened, click configure link, set following properties

Product Recommened

3. Click Save block button.

3. Create Product specials pages view

Front end Display

Product specials

Stay open Product view, click Add button add Page new.

Product specials

1. Next to steps below to set properties for the following fields:

Product specials

2. At Display name area, set following properties:

Product specials

3. At Title area, set following properties:

Product specials

2. At FORMAT Format: Grid area, click Settings and set following properties:

Product specials

4. In FIELDS area, click Add button to add fields: Commerce Product: Add to Cart form, Content: “Add to Compare” link,
Content: Category, Commerce Product: Price
field and set following properties:

5. Set properties for Field: Image

Product specials

6. Set properties for Global: Fieldset (Fieldset)

Product specials

7. Set properties for Commerce Product: Add to Cart form

Product specials

8. Set properties for Content: “Add to Compare” link

Product specials

9. Set properties for Content: Link

Product specials

10. Set properties for Content: Category

Product specials

11. Set properties for Commerce Product: Price

Product specials

12. At FIELDS area, click Rearrange button and set following arrange

Product specials

13. In FILTER CRITERIA area, click Add button to add Content: Type and set following properties:

Product specials

14. At PAGE SETTINGS > Path area, set the following properties:

Product specials

15. At PAGER > Use pager area, click link

Product specials

16. In Advanced > OTHER area, add CSS class change following properties:

Product specials

17. Click Save button.

4. Create Related Product view

Stay open Product view, click Add button add Block new.

Related Product

Front end Display

Related Product

1. Next to steps below to set properties for the following fields:

Related Product

2. In Advanced > Contextual filters area, click Add button to add fields: Content: Has taxonomy term ID,
Content: Has taxonomy term ID depth modifier
and set following properties:

3. Set properties for Content: Nid

Related Product

4. Set properties for Content: Has taxonomy term ID

Related Product

5. In Advanced > OTHER area, add CSS class change following properties:

Related Product

6. Click Save button.

5. Configure Related Product block

1. Navigate to Structure > Blocks

2. Find View: Product View: Related Product, click configure link, set following properties

Related Product

3. Click Save block button.

Post by date page

1. Create Post by date view

1. Navigate to Structure > Views, click Add views link, Create Post by date view with following properties:

Post by date

2. In Advanced > Contextual filters area, click Add button to add fields: Content: Created year + month and set following properties:

Post by date

3. In Advanced > OTHER area, add CSS class change following properties:

Post by date

4. Click Save button.

2. Create Post by date block view

Stay open Post by date view, click Add button add Block new.

Post by date block

Front end Display

Post by date block

1. Next to steps below to set properties for the following fields:

Post by date block

2. In FIELDS area, click Add button to add fields: Content: Title field and set following properties:

Post by date block

3. In Advanced > OTHER area, add CSS class change following properties:

Post by date block

4. Click Save button.

3. Configure Post by date block

1. Navigate to Structure > Blocks

2. Find View: Product View: Product Recommened, click configure link, set following properties

Post by date block

3. Click Save block button.

Shop page

1. Create Shop-grid view

Front end Display

Shop-grid

1. Navigate to Structure > Views, click Add views link, Create Shop-grid view with following properties:

Shop-grid

2. At FORMAT Format: Grid area, click Settings and set following properties:

Shop-grid

3. In Advanced > REALATIONSHIPS area, click Add button to add fields: Indexed Node: Product and set following properties:

Shop-grid

4. In FIELDS area, click Add button to add fields: Indexed Node: Image, Global: Fieldset (Fieldset), Commerce Product: Add to Cart form,
Content: Link, Global: Fieldset (Fieldset), Indexed Node: Rate, Indexed Node: Title, Indexed Node: Category, Global: Fieldset (Fieldset), Commerce Product: Old Price,
Commerce Product: Price
field and set following properties:

5. Set properties for Indexed Node: Image

Shop-grid

6. Set properties for Global: Fieldset (Fieldset)

Shop-grid

7. Set properties for Commerce Product: Add to Cart form

Shop-grid

8. Set properties for Content: Link

Shop-grid

9. Set properties for Global: Fieldset (Fieldset)

Shop-grid

10. Set properties for Indexed Node: Title

Shop-grid

11. Set properties for Indexed Node: Category

Shop-grid

12. At FIELDS area, click Rearrange button and set following arrange

Shop-grid

13. In FILTER CRITERIA area, click Add button to add Search: Fulltext search and set following properties:

Shop-grid

14. At SORT CRITERIA area, Click Add button to add Indexed Node: Date changed, Indexed Node: Commerce Product Price, Indexed Node: Commerce Product Price

15. Set properties for Indexed Node: Date changed

Shop-grid

16. Set properties for Indexed Node: Commerce Product Price

Shop-grid

17. Set properties for Indexed Node: Commerce Product Price

Shop-grid

18. At PAGE SETTINGS > Path area, set the following properties:

Shop-grid

19. In Advanced > OTHER area, add CSS class change following properties:

Shop-grid

20. Click Save button.

2. Create Shop-list view

Stay open Blog view, click Add button add Page new.

Product specials

Front end Display

Shop-list

1. Next to steps below to set properties for the following fields:

Shop-list

2. At FIELDS area, click Rearrange button and set following arrange

Shop-list

3. At PAGE SETTINGS > Path area, set the following properties:

Shop-list

4. In Advanced > OTHER area, add CSS class change following properties:

Shop-list

5. Click Save button.

3. Create Shop-full-grid view

Stay open Blog view, click Add button add Page new.

Product specials

Front end Display

Shop-full-grid

1. Next to steps below to set properties for the following fields:

Shop-full-grid

2. At FORMAT Format: Grid area, click Settings and set following properties:

Shop-full-grid

3. At PAGE SETTINGS > Path area, set the following properties:

Shop-full-grid

4. Click Save button.

4. Create Shop-grid-right-sidebar view

Stay open Blog view, click Add button add Page new.

Product specials

Front end Display

Shop-grid-right-sidebar

1. Next to steps below to set properties for the following fields:

Shop-grid-right-sidebar

2. At PAGE SETTINGS > Path area, set the following properties:

Shop-grid-right-sidebar

3. Click Save button.

5. Create New-arrivals view

Stay open Blog view, click Add button add Page new.

Product specials

Front end Display

New-arrivals

1. Navigate to Structure > Views, click Add views link, Create New-arrivals view with following properties:

New-arrivals

2. At FORMAT Format: Grid area, click Settings and set following properties:

New-arrivals

3. At PAGE SETTINGS > Path area, set the following properties:

New-arrivals

4. At PAGE SETTINGS > Menu area, set the following properties:

New-arrivals

5. Click Save button.

6. Create Search Taxonomy view

Stay open Blog view, click Add button add Page new.

Product specials

1. Navigate to Structure > Views, click Add views link, Create Search Taxonomy view with following properties:

Search Taxonomy

2. At FORMAT Format: Grid area, click Settings and set following properties:

Search Taxonomy

3. In Advanced > Contextual filters area, click Add button to add fields: Search: Indexed taxonomy term fields and set following properties:

Search Taxonomy

4. In FILTER CRITERIA area, click Add button to add Indexed Node: Category and set following properties:

Search Taxonomy

5. At PAGE SETTINGS > Path area, set the following properties:

Search Taxonomy

6. Click Save button.

More Configurations

Site Information

In this section, you can change basic settings, such as the site name, slogan, e-mail address.

1. Log in to Administration site page by administrator account

2. Navigate to the Site Information page Configuration > System: Site information

Site Information

3. Change site details from the view:

  1. Site name
  2. Slogan
  3. E-mail address
  4. Set Default Front page

4. Click on Save configuration to finish editing.

Color Configuration

1. Create a new color.

Step 1: Navigate to the directory: marvel/sites/all/themes/marvel, you can find file marvel.info, open this file.

Color Configuration

Step 2: Locate the skins[ ] arrays and add new code row:

Color Configuration

Step 3: Save file.

Step 4: Navigate to the directory: marvel/sites/all/themes/marvel/css/colors, clone a folder, then rename it "new_color"

Color Configuration

Step 5: new_color folder includes images folder and style.css file.

Now, you can style new color for theme by modifying style.css file.

Color Configuration

2. Create a new background.

Step 1: Navigate to the directory: marvel/sites/all/themes/marvel, you can find file, open file marvel.info

Background Configuration

Step 2: Locate the backgrounds[ ] arrays and add new code row:

Background Configuration

Step 3: Save file.

Step 4: Move your background image into the directory: marvel/sites/all/themes/marvel/images

Background Configuration

Step 5: Navigate to the directory: marvel/sites/all/themes/marvel/css, open file base.css, and add new code row:

Background Configuration

Step 6: Save file.

3. Configuration.

Step 1: Log into website by administrator account.

Step 2: Go to Appearance find marvel 7.34, click on Settings

Step 3: At CONFIGS area, select one of options for Layout, Skin, Background to set default, (e.g: New Color), and at TOGGLE DISPLAY area, check Show Skins Menu option if you want to display Skins menu on front-end pages.

Appearance Settings

Language Configuration

This section guides you how to have multiple languages for your site. Marvel Theme supports both Left to Right and Right to Left languages.

Step 1: Navigate to Configuration > Regional and Language > Languages then add new language.

Language Configuration

Step 2: Check to enable and set default language

Step 3: Save configuration

News & Events

Max
Tuesday, 03 November 2015
Max
Saturday, 24 October 2015
admin
Sunday, 15 February 2015
admin
Thursday, 08 January 2015
admin
Wednesday, 17 December 2014

Subscribe to our mailing list

Get a 20% off coupon and be the first to receive exclusive offer, and important events from WeebPal.

Connect with us

We're on Social Networks. Follow us & get in touch.

▲ Top
Subscribe

Get a 20% off coupon and be the first to receive exclusive offer, and important events from WeebPal.