Drupal 7 - New Shopping Theme Guide for Developers

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:

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.

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

Navigate to Store > Products > Product Types

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

Set properties for Images field

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.

Step 1: Navigate to Structure > Content Type

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

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

Step 4: Click Save Settings button

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

Step 6: Modify Teaser tab, set following properties:

Step 7: Click Save button

Step 1: Navigate to Structure > Content Type

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

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

Step 4: Set properties for Images field

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

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

Step 7: Click Save button

Step 1: Navigate to Structure > Content Type

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

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

Step 4: Set properties for Product variations field

Step 5: Set properties for Top Sales field

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

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

Step 8: Click Save button

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

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

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

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:

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

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

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

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

Step 5: Set properties for Content: Image

Step 6: Set properties for Global: Fieldset

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

Step 8: At FORMAT area, set following properties:

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

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

Step 11: Click Save to save view

Step 1: Navigate to Structure > Blocks

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

Step 3: Click Save block button.

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

Step 2: Click Save block button.

Refer to following HTML code:

Shop Now

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

Step 2: Click Save block button.

Refer to following HTML code:

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

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

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

Step 5: Set properties for Global: Fieldset

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

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

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

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

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

Step 11: Click Save to save view

Step 1: Navigate to Structure > Blocks

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

Step 3: Click Save block button.

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

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

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

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

Step 5:Set properties for Content: Type

Step 6:Set properties for Content: Top Sales

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

Step 8: Click Save to save view

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

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

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

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

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

Step 6: Click Save to save view

Step 1: Navigate to Structure > Blocks

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

Step 3: Click Save block button.

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

Step 2: Find Newsletter section, set following properties:

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

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

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:

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

Step 2: Click Save block button.

Refer to following HTML code:

• Acquired
• Development
• Global Contacts
• Lifetime
• What's on
• Shipping
• Gold member

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

Step 2: Click Save block button.

Refer to following HTML code:

• Help
• Track order

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

Step 2: Click Save block button.

Refer to following HTML code:

• Facebook
• Twitter
• RSS

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

Step 2: Click Save block button.

Refer to following HTML code:

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:

Do the steps above to create other links for 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:

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

Step 2: Click Save block button.

Refer to following HTML code:

Copyright © 2013 New Shopping All Rights Reserved. Designed by WeebPal. Powered by Drupal

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

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

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:

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

Support menu types: Default Menu, TB Megamenu

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

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:

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:

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

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

Step 9: In Facets tab, choose whatever facets you want to use to search

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

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

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

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

Step 2: Click Save blocks button.

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

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

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

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

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

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

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:

Step 8: Click Save to save all settings

Step 1: Navigate to Structure > Blocks

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

Step 3: Click Save block button.

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

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

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

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

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

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

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

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:

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

Step 12: At PAGER area, set page option

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

Step 14: Click Save to save all settings

Step 1: Navigate to Structure > Blocks

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

Step 3: Click Save block button.

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

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

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

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

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

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

Step 7: Click Save to save all settings

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

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

Step 2: At PAGE SETTINGS area, set Path:

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

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

Step 5: Click Save to save all settings

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

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

Step 2: At PAGE SETTINGS area, set Path:

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

Step 5:Set properties for Indexed Node: Category

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

Step 7: Click Save to save all settings

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

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

Step 2: At PAGE SETTINGS area, set Path:

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

Step 4:Set properties for Indexed Node: Collection

Step 5: Click Save to save all settings

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

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

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

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

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

Step 6: Click Save button to save settings.

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

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

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

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

Step 4: Set properties for Content: Body

Step 5: Set properties for Field: Image

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

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

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

Step 9: Click Save button to save settings.

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

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

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

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

Step 4: At PAGER area, set following properties:

Step 5: Click Save to save view

Step 1: Navigate to Structure > Blocks

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

Step 3: Click Save block button.

Step 1: Navigate to Content > Add content > Webform

Refer to the following HTML code:

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

Step 3: Click Save button.

Step 4: Navigate to Webform tab and Add fields:

Step 5: Click Save button.

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

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.

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.

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

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"

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.

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

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

Step 3: Save file.

Step 4: Move your background image into the directory: new-shopping/sites/all/themes/new-shopping/images

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

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.

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.

Step 2: Check to enable and set default language

Step 3: Save configuration