Drupal 7 - New Shopping Theme Guide for Developers

Overview

Starting with a new theme, it's 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 New Shopping to look exactly like the demo site.

1. Package


New Shopping is a clean simple and modern Drupal 7 theme best suited for a B2C e - commerce.

Using Twitter bootstrap, Drupal commerce, and together with a variety of integrated modules consisting of TB Menu, Views, Paypal, Newsletter, Webform, .., we create a user friendly site that is an ideal online shopping destination to your customers.

Included content:

  • README.txt
  • New Shopping theme: new-shopping-7.x-1.1.zip
  • Demo Profile for New Shopping: new-shopping-demo-7.x-1.1.zip

2. Features

  • Documentation included.
  • Browser compatibility
  • Web Technology (Html5/Css3, Twitter Bootstrap 3.1.1, Font Awesome 4.0.3,…)
  • Fully responsive.
  • Megamenu
  • Color variations (5 skin colors).
  • Easy customization.
  • High usability
  • Support both Left to Right and Right to Left Languages

3. Screenshots

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

Home

Product page

Product detail page

Shopping cart

Checkout

Review order

Blog page

Contact

TB Megamenu

Multi colors

Responsive layout

4. System Configuration

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.

5. Module requirements

Core Modules

  • Blog
  • Contact
  • Poll
  • Forum

Third-party Modules

  1. Address Field
  2. Cloud Zoom
  3. Colorbox
  4. Commerce
  5. Commerce Discount
  6. Drupal Commerce Extra Price Formatters
  7. Commerce Order Counter
  8. Commerce PayPal
  9. Commerce Search API
  10. Chaos tools
  11. Date
  12. Entity
  13. Entity Reference
  14. Exclude Node Title
  15. Facet Api
  16. Field Group
  17. Gallery Formatter
  18. Google Analytics
  19. Image Delta Formatter
  20. Inline Conditions
  21. Inline Entity Form
  22. Jcarousel
  23. Jquery Update
  24. Libraries
  25. Link
  26. Module Filter
  27. Newsletter
  28. Path Auto
  29. Quicktabs
  30. Rules
  31. Search Api
  32. Search Api DB
  33. Search Api Ranges
  34. Search Api Sorts
  35. Search Facet Api
  36. Superfish
  37. Tag Clouds
  38. Taxonomy Menu
  39. TB Megamenu
  40. Title
  41. Token
  42. Views
  43. Views Fieldsets
  44. Views Slideshow
  45. Webform

Required libraries by the modules

  • Cloud Zoom
  • Colorbox
  • Jcarousel
  • Jquery Cycle
  • Jquery Jcarousel
  • Superfish

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.

Quick Installation

1. New Shopping package included:

  • README.txt
  • New Shopping theme: new-shopping-7.x-1.1.zip
  • Demo Profile for New Shopping: new-shopping-demo-7.x-1.1.zip

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

  • new-shopping-demo-7.x-1.1.zip

2. Extract new-shopping-demo-7.x-1.1.zip above and copy it into your host, and rename the directory

Quick Installation

3. Access your MySQL database and create a new database (e.g. new_shopping) 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 New Shopping Demo

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

Installation Onepage 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 New Shopping 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 New Shopping Theme

  1. Extract New Shopping theme .ZIP file:
    • new-shopping-7.x-1.1.zip
  2. Move this theme into your Drupal folder: sites/all/themes

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

3. Install Required Modules

Now that you've enabled New Shopping 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 new-shopping-demo-7.x-1.1.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

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

Vocabulary

2. Then, add terms for each vocabulary

Ex: Terms of Collection: tab List

Terms

Then, Go to tab MANAGE FIELDS, add the following fields:

Terms

Then, Go to tab MANAGE DISPLAY, set the following format:

Terms

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

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

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

2. Configure product type

Navigate to Store > Products > Product Types

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

Product type

Set properties for Images field

Product type

Note

After you finish these steps, you can add some products but they weren't displayed anywhere because you should create a content type for their display.

We built New-Shopping based on Drupal Commerce,
so you should read Drupal commerce guide to understand more how to use our product.

Modify Blog entry type

Step 1: Navigate to Structure > Content Type

Step 2: In Blog entry row, click "manage fields" link, Add "Image" field with following settings:

Blog type

Step 3: Click Save button, then click Save field settings button > Set following properties:

Blog type

Step 4: Click Save Settings button

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

Blog type

Step 6: Modify Teaser tab, set following properties:

Blog type

Step 7: Click Save button

Create Slideshow type

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Slideshow type with following properties:

Slideshow type

Step 3: Click Save and add fields button, then add following fields:

Slideshow type

Step 4: Set properties for Images field

Slideshow type

Step 5: At Title row, Click replace link to set following settings:

Slideshow type

Step 6: At Title row, Click edit link to set following settings:

Slideshow type

Step 7: Click Save button

Create Product display type

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Product display type with following properties:

Product display type

Step 3: Click Save and add fields button, then add following fields:

Product display type

Step 4: Set properties for Product variations field

Product display type

Step 5: Set properties for Top Sales field

Product display type

Step 6: At Title row, Click replace link to set following settings:

Product display type

Step 7: At Title row, Click edit link to set following settings:

Product display type

Step 8: Click Save button

Modify Users Profile structure

Navigate to Configuration > People section > Account settings > Manage Fields to view fields

Users type

Create Homepage

Header menu block

Front end Display

Header menu block

Configure block

Step 1: Navigate to Structure > Menus, click Add menu link, Create Header menu with following properties:

Header menu

Step 2: Navigate to Structure > Blocks, find Header Menu block, click configure link and set the following properties:

Header menu

Step 3: Click Save block button.

Step 4: Navigate to Structures > Content type, at Basic page row, click edit link.

Step 5: At Menu setting > Available menus section, check Footer menu

Step 6: Click Save content type button.

Step 7: Navigate to Content, click Add content , choose Basic page and create a page with the following properties:

Header menu

Do the step 7 above to create other links for Header menu

Header menu

Slideshow

Front end Display

Slideshow display

1. Create Slideshow view

Step 1: Navigate to Structure > Views, click Add new view, then create Slideshow view with following settings:

Slideshow configuration

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Slideshow configuration

Step 3: At FIELDS area, click Add button to add fields: Content: Body, Content: Image, Content: Link, Global: Fieldset, Content: Nid

Step 4: Set properties for Content: Body

Slideshow configuration

Step 5: Set properties for Content: Image

Slideshow configuration

Step 6: Set properties for Global: Fieldset

Slideshow configuration

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

Slideshow configuration

Step 8: At FORMAT area, set following properties:

Slideshow configuration

Step 9: At FILTER CRITERIA area, Click Add button to add Content: Type

Slideshow configuration

Step 10: At Advanced > OTHER area, add CSS class:

shopping cart

Step 11: Click Save to save view

2. Configure Slideshow block

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Slideshow click configure link, set following properties

Configure Slideshow block

Step 3: Click Save block button.

Up to sale: Custom block

Front end Display

Up to sale Block display

Create and configure block

Step 1: Navigate to Structure > Blocks, click Add block link, Create Up to sale block with following properties:

Up to sale block

Step 2: Click Save block button.

Refer to following HTML code:


						

Safe off: Custom block

Front end Display

Safe off Block display

Create and configure block

Step 1: Navigate to Structure > Blocks, click Add block link, Create Up to sale block with following properties:

Safe Off block

Step 2: Click Save block button.

Refer to following HTML code:


						

Collection Banner block

Front end Display

Collection display

1. Create Collection view

Step 1: Navigate to Structure > Views, click Add new view, then create Collection view with following settings:

Collection configuration

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Collection configuration

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

Step 4: Set properties for Field: Image

Collection configuration

Step 5: Set properties for Global: Fieldset

Collection configuration

Step 6: At FIELDS area, click Rearrange button and set following arrange

Collection configuration

Step 7: At FORMAT Format: Grid area, click Settings and set following properties:

Collection configuration

Step 8: At FILTER CRITERIA area, Click Add button to add Taxonomy vocabulary: Machine name

Collection configuration

Step 9: At SORT CRITERIA area, Click Add button to add Taxonomy vocabulary: Weight

Collection configuration

Step 10: At Advanced > OTHER area, add CSS class

Collection configuration

Step 11: Click Save to save view

2. Configure Collection block

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Collection Banner: Collection Banner, click configure link, set following properties

Configure Collection block

Step 3: Click Save block button.

Top Sales block view

Front end Display

Top Sales display

Create Top Sales view

Step 1: Navigate to Structure > Views, click Add new view, then create Top Sales view with following settings:

Top Sales display

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Top Sales display

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

Top Sales display

Step 4: At FILTER CRITERIA area, Click Add button to add Content: Type, Content: Top Sales

Step 5:Set properties for Content: Type

Top Sales display

Step 6:Set properties for Content: Top Sales

Top Sales display

Step 7: At Advanced > OTHER area, add CSS class

Top Sales display

Step 8: Click Save to save view

Recent Products block

Front end Display

Recent Products display

1. Create Recent Products view

Step 1: Navigate to Structure > Views, click Add new view, then create Recent Products view with following settings:

Recent Products configuration

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Recent Products configuration

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

Recent Products configuration

Step 4: At FILTER CRITERIA area, Click Add button to add Content: Type

Recent Products configuration

Step 5: At Advanced > OTHER area, add CSS class

Recent Products configuration

Step 6: Click Save to save view

2. Configure Recent Products block

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Recent Products from Disabled section, click configure link, set following properties

Configure Recent Products block

Step 3: Click Save block button.

Newsletter: Subscribe block

Front end Display

Newsletter display

Configure block

Step 1: Go to Module, find Newsletter module. Click Permission link

Step 2: Find Newsletter section, set following properties:

Newsletter display

Step 3: Go to Module, find Newsletter module. Click Configure link

Step 4: Find SUBSCRIBE FORM section, set following properties:

Newsletter display

Step 5: Click on Configure link, set following properties

Step 6: Go to Structure > Blocks, find Newsletter block. Click Configure link and set following properties:

Newsletter display

Support: Custom block

Front end Display

Support Block display

Create and configure block

Step 1: Navigate to Structure > Blocks, click Add block link, Create Support block with following properties:

Support block

Step 2: Click Save block button.

Refer to following HTML code:

Question: Custom block

Front end Display

Question Block display

Create and configure block

Step 1: Navigate to Structure > Blocks, click Add block link, Create Question block with following properties:

Question block

Step 2: Click Save block button.

Refer to following HTML code:

Connect with us: Custom block

Front end Display

Connect Block display

Create and configure block

Step 1: Navigate to Structure > Blocks, click Add block link, Create Connect with us block with following properties:

Question block

Step 2: Click Save block button.

Refer to following HTML code:

Payment: Custom block

Front end Display

Payment Block display

Create and configure block

Step 1: Navigate to Structure > Blocks, click Add block link, Create Payment block with following properties:

Payment block

Step 2: Click Save block button.

Refer to following HTML code:

Card

Whats in store: Menu block

Front end Display

Whats in store display

Configure block

Step 1: Navigate to Structure > Menus, click Add menu link, Create Whats in store menu

Step 2: Click Add link Create a link with following properties:

Whats in store menu

Do the steps above to create other links for Whats in store menu

Whats in store menu

Step 3: Click Save configuration button.

Step 4: Go to Structure > Blocks, find Whats in store block. Click Configure link and set following properties:

Whats in store menu

Copyright: Custom block

Front end Display

Copyright display

Create & configure block

Step 1: Navigate to Structure > Blocks, click Add block link, Create Copyright block with following properties:

Copyright display

Step 2: Click Save block button.

Refer to following HTML code:


							

Footer Menu block

Front end Display

Footer menu block

Configure block

Step 1: Navigate to Structure > Menus, click Add menu link, Create Footer menu with following properties:

Footer menu

Step 2: Navigate to Structure > Blocks, find Footer Menu block, click configure link and set the following properties:

Footer menu

Step 3: Click Save block button.

Step 4: Navigate to Structures > Content type, at Basic page row, click edit link.

Step 5: At Menu setting > Available menus section, check Footer menu

Footer menu

Step 6: Click Save content type button.

Step 7: Navigate to Content, click Add content , choose Basic page and create a page with the following properties:

Footer menu

Do the step 7 above to create other links for Footer menu

Footer menu

Main Menu: main-menu block or TB Mega Menu

Drupal Main Menu block

Support menu types: Default Menu, TB Megamenu

TB Mega Menu

Create Subpages

Search API configuration

Preparation

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

Search modules

Search modules

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.

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

search api

Step 2: Click Create server

2. Create a Search API Index

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

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

search api

Step 2: Click Create index

3. Define Index fields

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

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

Step 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:

Step 3: Check fields: Product variations > Gender, Product variations > Color, Product variations > Size, Product variations > Sales Events

Step 4: Click Save changes

Step 5,6,7: Do steps 2,3,4 again with related fields: Tags, Product variations > Price, Product variations > Gender, Product variations > Color, Product variations > Size

search api

Step 8: In Workflow tab, choose the following options and click Save configuration button.

search api

Step 9: 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

Step 10: In Sort tab, choose fields which you want to order by

search api

4. 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

Sidebar first region

Front end Display

Sidebar first

Configure blocks

After Search API Index configuration steps, we have many facets blocks. Move them to Sidebar first region and order them as you want.

Step 1: Navigate to Structure > Blocks, find facets blocks, and set Sidebar first region

Search form

Step 2: Click Save blocks button.

Step 3: Each block, click configure link, set following properties

Search form

Products page

Front end Display

Products

Create Products view

Step 1: Navigate to Structure > Views, click Add block link, Create Products block with following properties:

Products

Step 2: Click Continue and edit button. Next to below steps to set properties for following fields:

Products

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

Products

Step 4: At FORMAT Show: Rendered entity area, click Settings and set following properties:

Products

Step 5: At FILTER CRITERIA area, Click Add button to add Search: Fulltext search field with following properties:

Products

Step 6: At FIELDS area, click Add button to add fields: Global: Custom text, Commerce Line Item: Line item ID

Step 7: At Advanced > OTHER area, add CSS class:

Products

Step 8: Click Save to save all settings

Search text box

Front end Display

Search form

Step 1: Navigate to Structure > Blocks

Step 2: Find block Exposed form: products-page and set region "Header"

Search form

Step 3: Click Save block button.

Shopping cart block view

Front end Display

Shopping cart

Create Shopping cart view

Step 1: Navigate to Structure > Views, click Add block link, Create Shopping cart block with following properties:

shopping cart

Step 2: Click Continue and edit button. Next to below steps to set properties for following fields:

shopping cart

Step 4: At Advanced > REALATIONSHIPS area, click Add button to add fields: Commerce Order: Line items

shopping cart

Step 5: At Advanced > CONTEXTUAL FILTERS area, click Add button to add fields: Commerce Line Item: Order ID

shopping cart

Step 6: At FIELDS area, click Add button to add fields: Global: Custom text, Commerce Line Item: Line item ID

Step 7: Set properties for Global: Custom text

shopping cart

Step 8: Set properties for Commerce Line Item: Line item ID

shopping cart

Step 9: At FIELDS area, click Rearrange button, delete Commerce Order: Order ID Order ID field, and set following arrange

shopping cart

Step 10: At FILTER CRITERIA area, Click Add button to add Commerce Line Item: Line item is of a product line item type field with following properties:

shopping cart

Step 11: At FOOTER area, click Add button to add Commerce Line Item: Line item summary field with following properties:

shopping cart

Step 12: At PAGER area, set page option

shopping cart

Step 13: At Advanced > OTHER area, add CSS class:

shopping cart

Step 14: Click Save to save all settings

Configure Shopping cart block

Step 1: Navigate to Structure > Blocks

Step 2: Find View: shopping cart click configure link, set following properties

shopping cart

Step 3: Click Save block button.

Men/Women fashion pages

Front end Display

product collection display

Create Product collection view

Step 1: Navigate to Structure > Views, click Add view link, Create Product collection view with following properties:

product collection display

Step 2: Click Continue and edit button. Next to below steps to set properties for following fields:

product collection display

Step 3: At FORMAT Show: Rendered entity area, click Settings and set following properties:

product collection display

Step 4: At FILTER CRITERIA area, Click Add button to add Indexed Node: Status field with following properties:

product collection display

Step 5: At Advanced > CONTEXTUAL FILTERS area, click Add button to add fields: Indexed Node: Collection with following properties:

product collection display

Step 6: At Advanced > OTHER area, add CSS class:

product collection display

Step 7: Click Save to save all settings

Clone Product collection page view for gender page

Step 1: Stay open Product collection view, click Clone page.

product collection display

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

product collection display

Step 2: At PAGE SETTINGS area, set Path:

product collection display

Step 3: At Advanced > CONTEXTUAL FILTERS area, click Add button to add fields: Product variations: Gender with following properties:

product collection display

Step 4: At Advanced > REALATIONSHIPS area, click Add button to add fields: Product variations: Gender with following properties:

product collection display

Step 5: Click Save to save all settings

Clone Product collection page view for category page of each gender

Step 1: Stay open Product collection view, click Clone page.

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

product collection display

Step 2: At PAGE SETTINGS area, set Path:

product collection display

Step 3: At Advanced > CONTEXTUAL FILTERS area, click Add button to add fields: Product variations: Gender, Indexed Node: Category

Step 4:Set properties for Product variations: Gender

product collection display

Step 5:Set properties for Indexed Node: Category

product collection display

Step 6: At Advanced > REALATIONSHIPS area, click Add button to add fields: Product variations: Gender with following properties:

product collection display

Step 7: Click Save to save all settings

Clone Category page of each gender view for collection page

Step 1: Stay open Category view, click Clone page.

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

product collection display

Step 2: At PAGE SETTINGS area, set Path:

product collection display

Step 3: At Advanced > CONTEXTUAL FILTERS area, click Add button to add fields: Indexed Node: Collection

Step 4:Set properties for Indexed Node: Collection

product collection display

Step 5: Click Save to save all settings

Blogs page

Front end Display

After install Blogs module, we have default blog page

Blogs display

Create a Blog page view

Step 1: Navigate to Structure > Views, click Add new view, then create Blogs view with following settings:

Blogs configuration

Step 2: Click Continue and edit button. Next to below steps to set properties for following fields:

Blogs configuration

Step 3: At FILTER CRITERIA area, Click Add button to add Content: Type field with following properties:

Blogs configuration

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

Blogs configuration

Step 5: At Advanced > OTHER area, add CSS class:

Blogs configuration

Step 6: Click Save button to save settings.

Clone created Blog page view and customize it

Step 1: Stay open Product collection view, click Clone page.

clone page

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

Blogs configuration

Step 2: At FORMAT > Show area, set following properties:

Blogs configuration

Step 3: At FIELDS area, click Add button to add fields: Content: Body, Field: Image

Step 4: Set properties for Content: Body

Blogs configuration

Step 5: Set properties for Field: Image

Blogs configuration

Step 6: At FIELDS area, click Rearrange button and set following arrange

Blogs configuration

Step 7: At PAGE SETTINGS > Path area, set the following properties:

Blogs configuration

Step 8: At PAGE SETTINGS > Menu area, set the following properties:

Blogs configuration

Step 9: Click Save button to save settings.

Sidebar: Recent Product block

Front end Display

Recent Products display

1. Clone Recent Products view

Step 1: Navigate to Structure > Views, find Recent Products, click edit

Step 2: Stay open Recent Products block, click Clone block.

clone block

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

Recent Products display

Step 3: At FORMAT Format area, set following properties:

Recent Products display

Step 4: At PAGER area, set following properties:

Recent Products display

Step 5: Click Save to save view

2. Configure Recent Products block

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Recent Products, click configure link, set following properties

Configure Sidebar Recent Products block

Step 3: Click Save block button.

Contact

First, we need to make sure that webform module installed.

Front end Display

Contact

Create webform type

Step 1: Navigate to Content > Add content > Webform

Contact

Refer to the following HTML code:

HOW TO CONTACT US

Maecenas lectus tellus, faucibus id auctor vitae, egestas nec turpis. Proin accumsan interdum lacus nec convallis. Sed vestibulum placerat auctor. Maecenas scelerisque nibh nec eros mattis id suscipit sem viverra. Maecenas lectus tellus, faucibus id auctor vitae.

  • ABC Building street 111, New Something 789, Country UK.
  • Telephone: +123.456789 – +22.1478523
  • Email: support@weebpal.com
  • Fax: +22.1478523
  • Web: www.weebpal.com

Step 2: Click URL path settings tab, set the following properties:

Contact

Step 3: Click Save button.

Step 4: Navigate to Webform tab and Add fields:

Contact

Step 5: 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.

Appearance Settings

1. Create a new color.

Step 1: Navigate to the directory: new-shopping/sites/all/themes/new-shopping, you can find file new_shopping.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: new-shopping/sites/all/themes/new-shopping/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: new-shopping/sites/all/themes/new-shopping, you can find file, open file new_shopping.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: new-shopping/sites/all/themes/new-shopping/images

Background Configuration

Step 5: Navigate to the directory: new-shopping/sites/all/themes/new-shopping/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 new-shopping 7.28, 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. New Shopping 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.