Drupal 8 - Marketplace Theme Guide for Developers

Overview

Do you own a car business, a showroom, or whatever products that you want to showcase to your online visitors? Do you need a simultaneously professional & beautiful website that your customers love, and that would make a good first impression on your business. Marketplace D8 will not let your expectation down.

Dig down the demo to find out more about the theme design. Along with Drupal 8 built out of the box, Marketplace D8 for a Drupal website is a choice you will not gonna miss.

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 Marketplace D8 to look exactly like the demo site.

1. Marketplace D8 Package

Marketplace D8, as the name has implied, is a theme wholly dedicated for shopping only. The template can serve well as a B2B, or B2C ecommerce website. It comes with a clean simple design with fully responsive layout, easy to use template which is conforming to Drupal best practice & standard.

Drupal can build a strong Marketplace D8 website, and this theme proves the point.

Included content:

  • README.txt
  • Marketplace D8 theme: marketplace-8.4.2.zip
  • Demo Profile for Marketplace D8: marketplace_d8-demo-8.4.2.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.
  • 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:

Homepage

Home

Category page

Home

Product detail page

Home

My Order page

Home

Shopping cart page

Home

Checkout page

Home

Get Help page

Home

About Marketplace page

Contact us page

How to buy page

Order status page

Payment & Pricing page

Returns & Refunds page

Shipping & Pickup page

Affiliate Program page

Privacy Policy page

Sell on Marketplace page

Terms & Conditions page

4. System Configuration

Database

  • MySQL 5.5.3/MariaDB 5.5.20/Percona Server 5.5.8 or higher with PDO and an InnoDB-compatible primary storage engine,
  • PostgreSQL 9.1.2 or higher with PDO,
  • SQLite 3.6.8 or higher

PHP

  • PHP 5.5.9 or higher
  • PHP 5GD 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

  • Action
  • Aggregator
  • Automated Cron
  • Ban
  • Basic Auth
  • Big Pipe
  • Block
  • Block Content
  • Book
  • Breakpoint
  • Locale
  • Update Manager

Third-party Modules

  1. Address
  2. Admin Toolbar
  3. Commerce
  4. Commerce Paypal
  5. Devel
  6. Entity
  7. Entity Reference Revisions
  8. Inline Entity Form
  9. Ludwig
  10. Memcache
  11. Module Filter
  12. Profile
  13. State Machine
  14. Votingapi
  15. Simplenews
  16. We Megamenu
  17. Weebpal Module

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


Installation

How to install a WeebPal demo package

1. Download one theme package of your choice (e.g: Marketplace D8)

Files included:

  • README.txt
  • Marketplace D8 theme: marketplace-8.4.2.zip
  • Demo Profile for Marketplace D8: marketplace_d8-demo-8.4.2.zip
  • This demo package includes all source codes and content, including sample images. This package will be used to build a site like our demo for the theme easily.

Package

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

  • marketplace_d8-demo-8.4.2.zip

2. Extract marketplace_d8-demo-8.4.2.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: marketplace_d8) and user account. Don't forget to add correct permissions to new user to access the database

Quick Installation

4. In the demo directory database/ (or profile/weebpal), you can find database dump named sample_data.sql.

Quick Installation

Import this file into new database.

Quick Installation

5. Open the browser and visit your website with the prepopulated content & layout exactly like our Marketplace D8 Demo

6. In site, navigate to Configuration > Development click Performance

Download Drupal 8

7. At Configuration Performance page, click Clear all cache button

Download Drupal 8

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

How to install a WeebPal 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 Marketplace D8 Theme, find this guide in handy.

1. Install Drupal

1. Go to Drupal download page and download the version of Drupal 8

Download Drupal 8

2. Extract and copy Drupal folder to your host and rename the directory (e.g: marketplace_d8)

Follow steps below to install a Drupal site only:

3. Access to database and create a new database with a name such as marketplace_d8.

Install theme package

4. Open browser and navigate to your website.

5. Choose language => click Save and continue button.

Install Drupal 8

6. Select Standard => click Save and continue button.

Install Drupal 8

7. Enter database parameters => click Save and continue button.

Install Drupal 8

8. Enter site information => click Save and continue button.

Install Drupal 8

9. Click Visit your new site and you will have a new site.

You can refer the guide from drupal.org to delve more details about drupal installation.

2. Install Marketplace D8 Theme

  1. Extract Marketplace D8 theme .ZIP file:
    • marketplace-8.4.2.zip
  2. Move this theme into your Drupal folder: sites/all/themes

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

3. Install Required Modules

Now that you've enabled Marketplace D8 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.

Notice:

Please install Commerce module in the following order

  • First, install Ludwig module
  • Then, install Address module
  • Last, install Commerce module

Cheat to install modules & theme:

  1. Extract marketplace_8.4.2.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

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

Vocabulary

Step 2: Go to Brands taxonomy, click Manage field tab:

Vocabulary

Step 3: Add and setting Logo field:

Vocabulary

Vocabulary

Step 4: Go to Brands taxonomy, click Manage display tab:

Vocabulary

Then, add terms for each vocabulary

Step 5: Terms of Brands:

Taxonomy

Set following properties for each term of Brands:

Taxonomy

Step 7: Terms of Categories:

Taxonomy

Taxonomy

Taxonomy

Step 8: Terms of Stores:

Taxonomy

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 Configurations

Modify Article type

Step 1: Navigate to Structure > Content Type > Article. In Article, go to Manage fields tab, add following fields:

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

Step 3: Click Save button

Create Ads type

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Ads type

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

Ads type

Step 4: Set properties for Image field

Ads type

Ads type

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

Step 6: Click Save button

Create Cart type

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Cart type

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

ctt-faq-category-setting.png

Step 4: Set properties for Total Price field

ctt-faq-category-setting.png

Step 5: Click Save button

Create Product type

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Product type

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

Products type

Step 4: Set properties for Ads field

Products type

Products type

Step 5: Set properties for Brands field

Products type

Products type

Step 6: Set properties for Category field

Products type

Products type

Step 7: Set properties for Comments field

Products type

Step 8: Set properties for Discount Percentage field

Products type

Products type

Step 9: Set properties for Images field

Products type

Products type

Products type

Step 10: Set properties for Old Price field

Products type

Products type

Step 11: Set properties for Price field

Products type

Products type

Step 12: Set properties for Product field

Products type

Products type

Products type

Step 13: Set properties for Product detail field

Products type

Products type

Step 14: Set properties for Quantity field

Products type

Products type

Step 15: Set properties for Sale From field

Products type

Products type

Products type

Step 16: Set properties for Sale To field

Products type

Products type

Products type

Step 17: Set properties for Short description field

Products type

Products type

Step 18: Set properties for Slideshow field

Products type

Products type

Step 19: Set properties for Specifications field

Products type

Products type

Step 20: Set properties for Stores field

Products type

Products type

Step 21: Go to Manage form display set following properties:

Products type

Products type

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

Products type

Step 23: Click Save button


Store Configurations

Currencies configurations

Step 1: Navigate to Commerce > Configuration > Store > Currencies

Step 2: At Currencies page, add Currency items these 2 ways bellow:

Step 3: Click Add currency button to create curency item

Step 4: Click Add custom currency button to create curency item

Step 5: Click Save button

Store configurations

Step 1: Navigate to Commerce > Configuration > Store > Store and click Add store button to create store

Step 2: Set Store item with following properites:

Step 3: Click Save button

Product Configurations

Product type configurations

Step 1: Navigate to Commerce > Configuration > Product > Product type

Step 2: Edit Default product type to setting field

Step 3: Go to Manage fields tab and remove Body field

Step 4: Go to Manage display tab , set following properties:

Step 5: Click Save button

Product variation types configurations

Step 1: Navigate to Commerce > Configuration > Product > Product variation types

Step 2: Edit Default product type to setting field

Step 3: Go to Manage fields tab and add Image field

Step 4: Go to Manage display tab , set following properties:

Step 5: Click Save button

Product add items

Step 1: Navigate to Commerce > Product

Step 2: Click Add product button to create product items

Step 3: Add List product for this project

Step 4: Set properites for product items

Step 5: Click Save button


Create Homepage

Headline block

Front end Display

1. Create Welcome message block

Front end Display

 Headline

Step 1: Navigate to Structure > Block layout > Custom block library, click Add custom block to create Welcome message block with following settings:

 Headline

						

Welcome to Marketplace.com

 Headline

Step 2: Click Save button.

2. User account menu block

Front end Display

2.1 Edit User account menu

Step 1: Navigate to Structure > Menu > User account menu, find My account menu link and uncheck Enable checkbox

Step 2: Click Save button

2.2 Configure User account menu block

Step 1: Navigate to Structure > Block layout

Step 2: Find Secondary menu > User account menu click Configure button

Step 3: Set User account menu block properites:

Step 4: Click Save block button.

3. Your Order block

Front end Display

Step 1: Navigate to Structure > Block layout > Custom block library, click Add custom block to create Your Order block with following settings:

						

Your Order

Step 2: Click Save button.

4. Get link block

Front end Display

4.1 Create Headline menu Menu

Step 1: Navigate to Structure > Menus, click Add menu to then create Headline menu

Step 2: Click Add link button to create Get Help item with properites

Step 3: Click Save button.

4.2 Configure Headline menu block

Step 1: Navigate to Structure > Block layout

Step 2: Find Headline click Place block button

Step 3: Find Headline menu (Menu) click Place block button and set following properites:

Configure Category Menu

Step 4: Click Save block button.

5. Create Block Image block type

Step 1: Navigate to Structure > Block layout > Custom block library, click Block types tab

Step 2: Click Add custom block types button to create Block Image block types

Step 3: Click Save button

Categories menu

Front end Display

Category Menu

1. Edit Main navigation menu

Step 1: Navigate to Structure > Menus > Main navigation, click Edit button

Step 2: At Main navigation menu, click Add link button to create list menu items:

Category Menu

Category Menu

Step 3: Click Save button

2. Configure Main navigation menus block

Step 1: Navigate to Structure > Block layout

Step 2: Find Breadcrumb click Place block button

Step 3: Find Main navigation (Drupal 8 Mega Menu) click Place block button and set following properites:

Category Menu

Step 4: Click Save block button.

Slideshow block

Front end Display

Slideshow

1. Create Slideshow view

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

Slideshow

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

Slideshow

Step 3: At FIELDS area, click Add button to add field: Content: Slideshow

Step 4: Set properties for Content: Slideshow field

Slideshow

Step 5: At FIELDS area, click Rearrange button and remove Content: Title field

Slideshow

Step 6: At FILTER CRITERIA area, add Content: Slideshow:target_id, Translation language field and set following properties:

Step 7: Set properties for Content: Slideshow:target_id field

Slideshow

Step 8: Set properties for Translation language field

Slideshow

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

Slideshow

Step 10: Click Save to save view

2. Configure View: Slideshow block

Step 1: Navigate to Structure > Block layout

Step 2: Find Highlighted second click Place block button

Step 3: Find Slideshow Lists (Views) click Place block button and set following properites:

Configure Slideshow block

Step 4: Click Save block button.

Product Ads block

Front end Display

Product Ads

1. Create Product Ads view

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

Product Ads

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

Product Ads

Step 3: At FIELDS area, click Add button to add field: Content: Ads field and set properties:

Product Ads

Step 4: At FIELDS area, click Rearrange button and remove Content: Title field

Product Ads

Step 5: At FILTER CRITERIA area, add Content Ads:target_id, Content: Translation language fields and set properties:

Step 6: Set properties for Content Ads:target_id field

Product Ads

Step 7: Set properties for Content: Translation language field

Product Ads

Step 8: Click Save to save view

2. Configure Product Ads block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar second click Place block button

Step 3: Find Product Ads Lists (Views) click Place block button and set following properites:

Configure Product Ads block

Step 4: Click Save block button.

Brands block

Front end Display

Brands

1. Create Brands view

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

Brands

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

Brands

Step 3: At FIELDS area, click Add button to add Taxonomy term: Logo field and set properties:

Brands

Step 4: At FIELDS area, click Rearrange button and remove Taxonomy term: Name field

Brands

Step 5: At FILTER CRITERIA area, add Taxonomy term: Logo:target_id, Taxonomy term: Translation language fields and set properties:

Step 6: Set properties for Taxonomy term: Logo:target_id field

Brands

Step 7: Set properties for Taxonomy term: Translation language field

Brands

Step 8: At FILTER CRITERIA area, click Rearrange button and remove Taxonomy term: Published field

Brands

Step :9At FORMAT area, find Format click Settings link and set following properties:

Brands

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

Brands

Step 11: Click Save to save view

2. Configure Brands block

Step 1: Navigate to Structure > Block layout

Step 2: Find Highlighted second click Place block button

Step 3: Find Brands Lists (Views) click Place block button and set following properites:

Configure Brands block

Step 4: Click Save block button.

Effortless shopping block

Front end Display

Effortless Shopping

Step 1: Navigate to Structure > Block layout > Custom block library, click Add custom block to create Effortless shopping block with following settings:

Step 2: Click Save button.

						
  • Cash on Delivery
  • Free Delivery
  • Free Return
  • Customer Service
  • Trusted Sellers Only

Today's Deal block

Front end Display

Today's Deal

1. Create Product view

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

Today's Deal

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

Today's Deal

Step 3: At Display name area, click and set properties:

Today's Deal

Step 4: At TITLE area, click and set properties:

Today's Deal

Step 5: At FIELDS area, click Add button to add fields: Content: Images, Content: Brands, Content: Old Price, Content: Discount Percentage, Content: Price, Content: Sale From, Content: Sale To

Step 6: Set properties for Content: Images

Today's Deal

Step 7: Set properties for Content: Brands

Today's Deal

Step 8: Set properties for Content: Old Price

Today's Deal

Step 9: Set properties for Content: Discount Percentage

Today's Deal

Step 10: Set properties for Content: Price

Today's Deal

Step 11: Set properties for Content: Sale From

Today's Deal

Step 12: Set properties for Content: Sale To

Today's Deal

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

Today's Deal

Step 14: At FILTER CRITERIA area, add Content: Translation language, Content: Sale From, Content: Sale To fields and set following properties:

Step 15: Set properties for Content: Translation language

Today's Deal

Step 16: Set properties for Content: Sale From

Today's Deal

Step 17: Set properties for Content: Sale To

Today's Deal

Step 18: At FILTER CRITERIA area, click Rearrange button and set following arrange

Today's Deal

Step 19: At HEADER area, click Add button to add Global: Text area with following properites:

Today's Deal

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

Today's Deal

Step 21: Click Save to save view

2. Configure Product: Today's Deal block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel first click Place block button

Step 3: Find Product: Today's Deal (List views) click Place block button and set following properites:

Today's Deal

Step 4: Click Save block button.

Related Products block

Front end Display

Related Products

Edit Fontpage view

Step 1: Navigate to Structure > Views > Fontpage, click Edit button, then edit this view with following settings:

Related Products

Step 2: At TITLE area, click and set properties:

Related Products

Step 3:At FORMAT area, find Format click Unformatted list link and set following properties:

Related Products

Step 4:At FORMAT area, find Show click Content link and set following properties:

Related Products

Step 5: At FIELDS area, click Add button to add fields: Content: Images, Content: Title, Content: Brands, Content: Old Price, Content: Discount Percentage, Content: Price

Step 6: Set properties for Content: Images

Related Products

Step 7: Set properties for Content: Brands

Related Products

Step 8: Set properties for Content: Old Price

Related Products

Step 9: Set properties for Content: Discount Percentage

Related Products

Step 10: Set properties for Content: Price

Related Products

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

Related Products

Step 12: At FILTER CRITERIA area, add Content: Content Type field and set following properties:

Related Products

Step 13: At FILTER CRITERIA area, click Rearrange button and set following arrange

Related Products

Step 14: At NO RESULTS BEHAVIOR area, click Global: Unfiltered text link and set following properites:

Related Products

Step 15: At PAGER area, find Use pager click Paged, 10 items link and set following properites

Related Products

Step 16: Click Save to save view

Recommended for you block

Front end Display

Recommended for you

1. Create Recommended for you block view

Step 1: Navigate to Structure > Views find Product view, then click Edit button

Step 2: At Product view, click Add > block button

Recommended for you

Step 3: Create Recommended for you block view with following properites:

Recommended for you

Step 4: At Display name area, click and set properties:

Recommended for you

Step 5: At TITLE area, click and set properties:

Recommended for you

Step 6:At FORMAT area, find Format click Gird link and set following properties:

Recommended for you

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

Recommended for you

Step 8: At PAGER area, find Use pager click Display a specified number of items | 4 items link and set following properites

Recommended for you

Recommended for you

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

Recommended for you

Step 10: Click Save to save view

2. Configure Product: Recommended for you block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel second click Place block button

Step 3: Find Product: Recommended for you (List views) click Place block button and set following properites:

Recommended for you

Step 4: Click Save block button.

Best sellers block

Front end Display

Best sellers

1. Create Best sellers block view

Step 1: Navigate to Structure > Views find Product view, then click Edit button

Step 2: At Product view, click Add > block button

Best sellers

Step 3: Create Best sellers block view with following properites:

Best sellers

Step 4: At Display name area, click and set properties:

Best sellers

Step 5: At TITLE area, click and set properties:

Best sellers

Step 6:At FORMAT area, find Format click Gird link and set following properties:

Best sellers

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

Best sellers

Step 8: At PAGER area, find Use pager click Display a specified number of items | 4 items link and set following properites

Best sellers

Best sellers

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

Best sellers

Step 10: Click Save to save view

2. Configure Product: Best sellers block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar second click Place block button

Step 3: Find Product: Best sellersyou (List views) click Place block button and set following properites:

Best sellers

Step 4: Click Save block button.

Your Recently Viewed Items block

Front end Display

Your Recently Viewed Items

1. Create Your Recently Viewed Items block view

Step 1: Navigate to Structure > Views find Product view, then click Edit button

Step 2: At Product view, click Add > block button

Your Recently Viewed Items

Step 3: Create Your Recently Viewed Items block view with following properites:

Your Recently Viewed Items

Step 4: At Display name area, click and set properties:

Your Recently Viewed Items

Step 5: At TITLE area, click and set properties:

Your Recently Viewed Items

Step 6:At FORMAT area, find Format click Gird link and set following properties:

Your Recently Viewed Items

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

Your Recently Viewed Items

Step 8: At FIELDS area, click Content: Images field and set following properites

Your Recently Viewed Items

Step 9: At FIELDS area, click Rearrange button, then remove Content: Title, Content: Brands, Content: Old Price, Content: Discount Percentage, Content: Price, Content: Sale Form, Content: Sale To fields and set following arrange

Your Recently Viewed Items

Step 10: At FILTER CRITERIA area, click Rearrange button and set following arrange

Your Recently Viewed Items

Step 11: At PAGER area, find Use pager click Display a specified number of items | 4 items link and set following properites

Your Recently Viewed Items

Your Recently Viewed Items

Step 12: At Advanced > CONTEXTUAL FILTERS area, add Add button to add Content statistics: Views today field and set following properites:

Your Recently Viewed Items

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

Your Recently Viewed Items

Step 14: Click Save to save view

2. Configure Product: Your Recently Viewed Items block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel third click Place block button

Step 3: Find Product: Your Recently Viewed Items (List views) click Place block button and set following properites:

Your Recently Viewed Items

Step 4: Click Save block button.

Customer help block

Front end Display

Customer help

1. Create and add link Customer help menu

Step 1: Navigate to Structure > Menu, click Add menu link to create Customer help link with following properties:

Customer help

Step 2: Click Add link link and add link following: Contact us, How to buy, Order status, Payment & Pricing, Returns & Refunds, Shipping & Pickup menu items

Step 3: Set properties Contact us menu item

Customer help

Step 4: Set properties How to buy menu item

Customer help

Step 5: Set properties Order status menu item

Customer help

Step 6: Set properties Payment & Pricing menu item

Customer help

Step 7: Set properties Returns & Refunds menu item

Customer help

Step 8: Set properties Shipping & Pickup menu item

Customer help

Step 9: Click Save button

2. Configure Customer help block

Step 1: Navigate to Structure > Block layout

Step 2: Find Footer first click Place block button

Step 3: Find Customer help click Place block button and set following properites:

Customer help

Step 4: Click Save block button.

About us block

Front end Display

About us

1. Create and add link About us menu

Step 1: Navigate to Structure > Menu, click Add menu link to create About us link with following properties:

About us

Step 2: Click Add link link and add link following: About Marketplace, Affiliate Program, Privacy Policy, Sell on Marketplace, Terms & Conditions menu items

Step 3: Set properties About Marketplace menu item

About us

Step 4: Set properties Affiliate Program menu item

About us

Step 5: Set properties Privacy Policy menu item

About us

Step 6: Set properties Sell on Marketplace menu item

About us

Step 7: Set properties Terms & Conditions menu item

About us

Step 8: Click Save button

2. Configure About us block

Step 1: Navigate to Structure > Block layout

Step 2: Find Footer first click Place block button

Step 3: Find About us click Place block button and set following properites:

About us

Step 4: Click Save block button.

Newsletters block

Front end Display

Simplenews subscription

1. Configure Simplenews subscription block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel fifth 4 click Place block button

Step 3: Find Simplenews subscription click Place block button and set following properites:

Simplenews subscription

Step 4: Click Save block button.

2. Create and configure Newsletters message block

Step 1: Navigate to Structure > Block layout find and click Add custom block > Basic block link. Click and create Newsletters message block with following properties:

Newsletters message

Newsletters message

Step 2: Click Save button

Download apps block

Front end Display

Download apps

Create and configure Download apps block

Step 1: Navigate to Structure > Block layout find and click Add custom block > Basic block link. Click and create Download apps block with following properties:

Download apps

Download apps

Refer to following HTML code:

					
  • Android Store
  • Apple Store

Step 2: Click Save button

Payment method block

Front end Display

Payment method

Create and configure Payment method block

Step 1: Navigate to Structure > Block layout find and click Add custom block > Basic block link. Click and create Payment method block with following properties:

Payment method

Payment method

Step 2: Click Save button

						
  • Amex
  • JCB
  • Visa
  • Mastercard

Copyright block

Front end Display

Copyright

Create and configure Copyright block

Step 1: Navigate to Structure > Block layout find and click Add custom block > Basic blocklink. Click and create Copy Right block with following properties:

Copyright

Copyright

Refer to following HTML code:

							

Copyright © 2014 WeebPal.com. All rights reserved.

Step 2: Click Save button.

Contact message block

Front end Display

Contact message

Create and configure Contact message block

Step 1: Navigate to Structure > Block layout find and click Add custom block > Basic blocklink. Click and create Contact message block with following properties:

Contact message

Contact message

Step 2: Click Save button

						

You can also order from WeebPal by calling 1-800-00-000.

Header block

Front end Display

Header block

1. Site branding block

Front end Display

Site branding

Step 1: Navigate to Structure > Block layout

Step 2: Find Header > Site branding click Configure button

Step 3: At Site branding block description page, set following properites:

Site branding

Step 4: Click Save block button.

2. Search block

Front end Display

Search page block

2.1 Create Search page view

Step 1: Navigate to Structure > Views find Product view, then click Edit button

Step 2: At Product view, click Add > page button

Search page block

Step 3: Create Search page view with following properites:

Search page block

Step 4: At Display name area, click and set properties:

Search page block

Step 5: At TITLE area, click and set properties:

Search page block

Step 6:At PAGER SETTINGS area, find Path click link and set following properties:

Search page block

Step 7: At Advanced > EXPOSED FORM area, find Exposed form in block click link and set properites:ss

Search page block

Search page block

Step 8: At Advanced > CONTEXTUAL FILTERS area, click Rearrange button. Remove Content statistics: Views today field and set properites:ss

Search page block

Step 9: At FILTER CRITERIA area, click Add button to addContent: Title, Content: Category, Content revision: Translation language fields and set following arrange

Step 10: Set properties for Content: Title field

Search page block

Step 11: Set properties for Content: Category field

Search page block

Search page block

Search page block

Step 12: Set properties for Content revision: Translation language field

Search page block

Step 13: At FILTER CRITERIA area, click Rearrange button. RemoveContent: Translation language, Content: Sale Form, Content: Sale To fields and set following arrange

Search page block

Step 14: At PAGER area, find Use pager click Display a specified number of items | 4 items link and set following properites

Search page block

Search page block

Step 15: At Advanced > EXPOSED FORM area, find Exposed form in block click link and set properites:ss

Search page block

Search page block

Step 16: Click Save to save view

2.2 Configure Exposed form: products-page_1 block

Step 1: Navigate to Structure > Block layout

Step 2: Find Header click Place block button

Step 3: Find Exposed form: products-page_1 click Place block button and set following properites:

Search page block

Step 4: Click Save block button.

3. Configure Cart Commerce block

Front end Display

Cart Commerce

Step 1: Navigate to Structure > Block layout

Step 2: Find Header click Place block button

Step 3: Find Cart (Commerce) click Place block button and set following properites:

Cart Commerce

Step 4: Click Save block button.

Create Subpages

Breadcrumb block

Front end Display

Contact forms

1. Configure Main navigate block

Step 1: Navigate to Structure > Block layout

Step 2: Find Breadcrumb click Place block button

Step 3: Find Main navigate click Place block button and set following properites:

Breadcrumb

Step 4: Click Save block button.

2. Configure Breadcrumbs block

Step 1: Navigate to Structure > Block layout find Breadcrumb > Breadcrumb block area, click and edit properties:

Contact forms

Step 2: Click Save button

Page title

Configure Page title block

Contact forms

Step 1: Navigate to Structure > Block layout find Content > Page title block area, click and edit properties:

Contact forms

Step 2: Click Save button

Product list page

1. Product list

Products list

Create Products in category/brand view

Step 1: Navigate to Structure > Views, click Add new view, then create Products in category/brand view with following settings:

Products list

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

Products list

Step 3: At FIELDS area, click Add button to add fields: Content: Images, Content: Brands, Content: Old Price, Content: Discount Percentage, Content: Price

Step 4: Set properties for Content: Images

Products list

Step 5: Set properties for Content: Brands

Products list

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

Related Products

Step 7: At PAGER area, find Use pager click link and set following properites

Products list

Step 8: At Advanced > CONTEXTUAL FILTERS area, add Content: Category:

Products list

Step 9: At Advanced > EXPOSED FORM area, find and click Exposed form in block to set properites:

Products list

Step 10: At FILTERS CRITERIA area, click Add button to add fields: Content: Translation language, Content: Has taxonomy term, Content: Category , Content: Brands

Step 11: Set properties for Content: Translation language

Products list

Step 12: Set properties for Content: Has taxonomy term

Products list

Products list

Step 13: Set properties for Content: Category

Products list

Products list

Step 14: Set properties for Content: Brands

Products list

Products list

Step 15: At FILTERS CRITERIA area, click Rearrange button and set following arrange

Products list

Step 16: At SORT CRITERIA area, click Add button to add fields: Taxonomy term: Sticky status, Taxonomy term: Post date

Step 17: Set properties for Taxonomy term: Sticky status

Products list

Step 18: Set properties for Taxonomy term: Post date

Products list

Step 19: At SORT CRITERIA area, click Rearrange button to remove Content: Authored on and set following arrange

Products list

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

Products list

Step 21: Click Save to save view

2. Category / Brands menu

Products list

Configure Exposed form: products_in_category_brand-page_1 block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar first click Place block button

Step 3: Find Exposed form: products_in_category_brand-page_1 (Views) click Place block button and set following properites:

Products list

Step 4: Click Save block button.

3. Product Ads block

Product Ads

3.1 Add Product Ads: Sub page block view

Step 1: Navigate to Structure > Views find Product Ads view, then click Edit button

Step 2: At Product Ads view, click Add > block button to add Sub page block view

Product Ads

Step 3: Create Recommended for you block view with following properites:

Product Ads

Step 4: At Display name area, click and set properties:

Product Ads

Step 5: At PAGER area, find Use pager click Display a specified number of items | 4 items link and set following properites

Product Ads

Product Ads

Step 6: Click Save to save view

3.2 Configure Product Ads: Sub page block

Step 1: Navigate to Structure > Block layout

Step 2: Find Highlighted third click Place block button

Step 3: Find Product Ads: Sub page (List Views) click Place block button and set following properites:

Step 4: Click Save block button.

Contact page

1. Contact custom block

Contact block

Step 1: Navigate to Structure > Blocks click Add block, create Contact block and set with following properties:

Contact block

Contact block

Step 2: Click Save button

Refer to following HTML code:

								

Have a question or want to learn more about how Marketplace can help you build your business? Simply enter your information in the fields below and we will follow up with you shortly. If you are an existing seller on Amazon and have a technical question, contact technical support (Seller Central login required).

Sales & Product Inquiries

Nunc elit quam; facilisis et imperdiet sed, dapibus vel magna. Cras neque nulla, tincidunt at lobortis vel, aliquam id elit.

Address:  5651 W. Pine Shade Place, Salt Lake City, UT 84118 USA

Phone:     (803) 900-8067

Fax:          (803) 900-8067

Email:       [email protected]

Product & Technical Support

Nunc elit quam; facilisis et imperdiet sed, dapibus vel magna. Cras neque nulla, tincidunt at lobortis vel, aliquam id elit.

Address:  5651 W. Pine Shade Place, Salt Lake City, UT 84118 USA

Phone:     (803) 900-8067

Fax:          (803) 900-8067

Email:       [email protected]

Company & Contact Informattion

Fields marked are required

2. Google Map block

Location block

Step 1: Navigate to Structure > Block type click Add block, create Location block and set with following properties:

Location block

Location block

Step 2: Click Save button

Refer to following HTML code:

								

About Us page

Create About us content

Step 1: Navigate to Content > Add content > Basic page click to create About us content with following properties:

Basic content

Step 2: Click Save button

How to buy page

Create How to buy content

Step 1: Navigate to Content > Add content > Basic page click to create How to buy content with following properties:

Basic content

Step 2: Click Save button

Order status page

Create Order status content

Step 1: Navigate to Content > Add content > Basic page click to create Order status content with following properties:

Basic content

Step 2: Click Save button

Payment & Pricing page

Create Payment & Pricing content

Step 1: Navigate to Content > Add content > Basic page click to create Payment & Pricing content with following properties:

Basic content

Step 2: Click Save button

Returns & Refunds page

Create Returns & Refunds content

Step 1: Navigate to Content > Add content > Basic page click to create Returns & Refunds content with following properties:

Basic content

Step 2: Click Save button

Shipping & Pickup page

Create Shipping & Pickup content

Step 1: Navigate to Content > Add content > Basic page click to create Shipping & Pickup content with following properties:

Basic content

Step 2: Click Save button

Affiliate Program page

Create Affiliate Program content

Step 1: Navigate to Content > Add content > Basic page click to create Affiliate Program content with following properties:

Basic content

Step 2: Click Save button

Privacy Policy page

Create Privacy Policy content

Step 1: Navigate to Content > Add content > Basic page click to create Privacy Policy content with following properties:

Basic content

Step 2: Click Save button

Sell on Marketplace page

Create Sell on Marketplace content

Step 1: Navigate to Content > Add content > Basic page click to create Sell on Marketplace content with following properties:

Basic content

Step 2: Click Save button

Terms & Conditions page

Create Terms & Conditions content

Step 1: Navigate to Content > Add content > Basic page click to create Terms & Conditions content with following properties:

Basic content

Step 2: Click Save button

Get Help page

Front end Display

Basic content

1. Create Get Help content

Step 1: Navigate to Content > Add content > Basic page click to create Get Help content with following properties:

Basic content

Step 2: Click Save button

2. Create Custom help menu

Step 1: Navigate to Structure > Menus > Add content click to create Custom help menu

Step 2: Click Add link button to create list items for menu

Step 3: Click Save button.

Note: Link of menu items must like URL of content basic have created

3. Configure Custom help block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar first click Place block button

Step 3: Find Custom help (Menu) click Place block button and set following properites:

Step 4: Click Save block button.


More Configurations

Appearance Settings

Step 1: Log into website by administrator account.

Step 2: Go to Appearance > Settings find Autox tab click and set following properites:

Appearance Settings

Step 3: Click on Save configuration button.

From our blog

News & Events

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

Subscribe to our mailing list

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

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

▲ Top

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