x

General

We would like to thank you for purchasing Supermarket theme! We are very pleased that you have chosen Supermarket for your website, you will not be disappointed! Before you get started, please be sure to always search our Documentation and Knowledge-base, and also watch our Video Tutorials. The large search field at the top of each page allows you to quickly and easily search through our resources to find answers. We outline all kinds of good information, and provide you with all the details you need to use Supermarket. Supermarket can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please follow this link to see our section on WordPress to help you get started.

WordPress Information

wp_logo-300x106

To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex.

Requirements For Supermarket

The minimum requirements for Supermarket is WordPress 4.4.0 or highter, PHP 5.4 or highter and MySQL 5.4 or highter.

Recommended PHP Configuration Limits

Many issues that you may run into such as; white screen, demo content fails when importing, empty page content with Fusion Builder and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_execution_time 180
  • memory_limit 128M
  • post_max_size 32M
  • upload_max_filesize 32M

Installation

You can install the theme in two ways: through WordPress, or via FTP. The Supermarket.zip file is the Install-able WordPress Theme and what you need to use to get the theme installed. There are two ways to install Supermarket, via WordPress or via FTP. Click here for the WordPress method video tutorial, and here for the FTP method video tutorial. But first, you need to download the Supermarket files from your ThemeForest account. Navigate to your downloads tab on ThemeForest and find Supermatket. Click the download button to see the two options; The Main Files and the Installable WordPress Theme.

WordPress Installation

How To Install Supermarket via WordPress

Feel free to view video guide here

Step 1 – Navigate to Appearance > Themes.

Step 2 – Click Install Themes and click the Upload button.

Step 3 – Navigate the supermarket.zip file on your computer and click “Install Now”

Step 4 – Activate the newly installed theme by going to Appearance > Themes and clicking the Activate button.

Step 5 – Once you activate Supermarket. You will then see a notification message to install the required plugins: Supermarket Core plugin and some others. Follow the notification message to install all required plugins. These plugins will automatic activate after installation is finished.

add_new_theme

FTP Installation

Install Supermarket Via FTP

Step 1 – Log into your hosting space via an FTP software like File Zilla.

Step 2 – Unzip the Supermarket.zip file and only use the extracted Supermarket theme folder.

Step 3 – Upload the extracted Supermarket theme folder into wp-content > themes folder.

Step 4 – Activate the newly installed theme by going to Appearance > Themesand clicking the Activate button.

Step 5 – Once you activate Supermarket, you will then see a notification message to install the required plugins: Supermarket Core, WooCommerce…

Step 6 – Follow the the notification message to install and activate required & recommended plugins.

fpt-install

Supermarket Options

Supermarket options give you full control over your website and allow you to customize the design without touching a single line of code. Located in WP Dashboard > Appearance > Supermarket Options. These options are global options that affect everything within the theme.

supermarket-option_2

General Settings

Located in WP Dashboard > Appearance > Supermarket Options

From here you can config Supermarket theme in the way you need such as:

  • Upload your custom logo image
  • Upload your custom favicon image
  • Setting base color for all pages on the front-end
  • Setting Body background with image pattern, color, etc.
  • Enable Smooth Scroll
  • ….etc…
supermarket-option_3

Typography Options

Located in WP Dashboard > Appearance > Supermarket Options

Manage font families, size, weight, line heights, font color for body, main menu, headers and widgets. Choose either standard fonts or Google fonts.

supermarket-option_4

Header Settings

Located in WP Dashboard > Appearance > Supermarket Options

Manage:

1 – Header Layout: Select header layout style.

2 – Logo: Upload or choose the logo image for header style.

3 – Header Contact Information: Input short contact information. Html is allowed. Ex: <a href=”#”><span class=”menu-icon flaticon-new4″></span> Support@Supermarket.com</a>

4 – Turn header product search form on/off

5 – Turn header Account link on/off

6 – Turn header settings area  on/off.

7 – Header Mini Cart on/off.

8 – Turn header my account  on/off.

9 – Turn header compare on/off. Only work if YITH Compare plugin is installed and activated.

10 – Turn header wishlist on/off. Only work if YITH Wishlish plugin is installed and activated.

11 – Turn header checkout link on/off.

12 – Turn header mini cart on/off

13 – Turn Header Vertical Menu on/off

14 – Custom Hero section. Turn on/off or manage it. You can be a Revolution Slider, or background image.

supermarket-option_5

Footer Settings

Located in WP Dashboard > Appearance > Supermarket Options

Manage:

1 – Set Footer Background Color

2 – Select Footer layout.

3 – Turn footer bottom on/off

4 – Descriptions

5 – Add/Edit Footer Images: Images list at the bottom of footer. This useful for payment method images, etc…

6 – Custom your copyright text as you want

supermarket-option_6

Blog Settings

Located in WP Dashboard > Appearance > Supermarket Options

Manage:

1 – Blog sidebar position: Left, Right, Full-width

2 – Select the Blog Layout Style in drop-down list.

3 – Continue reading text, you can change other text in text-box to suite your site.

4 – The excerpt max chars length for standard blog layout style

5 – Show Placehold Image. Show placehold image if blog post standard has no feature image

6 – Manage blog metas show on the blog loop: Author, date time, comment, category, tag.

7 – Enable/disable the author bio on the single post.

8 – Enable/disable social share links on the single post.

supermarket-option_7

WooCommerce

Located in WP Dashboard > Appearance > Supermarket Options

Manage:

1 – Sidebar Position: Select sidebar position on shop, product archive page, sidebar postion: Left, right, fullwidth (no sidebar)

2 – Shop default layout style. There are two shop layout styles: grid, list.

3 – Number of columns on large screen. Only effective with shop layout style grid.

4 – Turn product star rating on shop/products archive page on/off.

5 –  Single Product Sidebar Position: Select sidebar position on single product page.

6 – Set filter automatically on the shop page. Note: Plugin WOOF – Products Filter installed.

7 – Shop Top Banner Background. Only show on the shop page. Product archive is not included.

8 – Top banner back-ground position. Position banner background for lood product.

9 – Shop/Product Archive Top Banner Height (Height unit is pixel. Default 405.)

10 – Single Product Zoom Images: Turn single product zoom image when hover on or off

11 – Product Tabs Layout: Select product tabs layout on the single product page

12 – Product Categories Tab: Turn single product categories on or off

13 – Product Tags Tab: Turn single product tags on or off

14 – Enable single product share links

supermarket-option_8

Newsletter Settings

Located in WP Dashboard > Appearance > Supermarket Options

Newsletter information settings:

1 – Mailchimp API Key

2 – Mailchimp List ID

3 – Subscribe Form Title

4 – Email Input Placeholder

5 – Submit Text

6 – Success Message

supermarket-option_9

Social Settings

Located in WP Dashboard > Appearance > Supermarket Options

Manage:

Manage social links for Social widget

1 – Twitter links

2 – Facebook links

3 – Google Plus links

4 – Dribbble links

5 – Behance links

6 – Tumblr links

7 – Instagram links

8 – Pinterest links

9 – Youtube links

10 – Vimeo links

11 – Linkedin links

12 – RSS

supermarket-option_11

404 Settings

Located in WP Dashboard > Appearance > Supermarket Options

Manage:

1 – Change/Remove 404 image.

2 – The title of 404 page.

3 – 404 Sub Title

3 –Text

3 –Enable Search Form

supermarket-option_12

Google Map

Located in WP Dashboard > Appearance > Supermarket Options

Enter your Google Map API key

supermarket-option_13

One Click Import

Located in WP Dashboard > Appearance > Supermarket Options

Works best to import on a new install of WordPress.

supermarket-option_14

Shortcodes For Visual Composer

Supermarket has over 30 powerful short-codes for Visual Composer. They will help you build a website as you want with ease. Let’s see what can we do with them:

supermarket-option_15

SP Banner Slide

This short-code allows you to show sliders with title, sub-title, button, url…. Let see some settings of this short-code in the back-end and styles on front-end.

Feel free to view video guide of this short-code here.

Params:

1 – Click on “+” button to add a new slide.

shortcode_banner-slider_1

2 – Image

3 – Image Size: <em>{width}x{height}</em>. Example: <em>369×443</em>, etc…

4 – Title: Enter title for slide.

5 – Sub Title: Enter sub title for slide.

6 – Link

7 – CSS Animation

8 – Animation Delay

shortcode_banner-slider_2

The slider is shown in front-end.

shortcode_banner-slider_3

SP Product Deals of the day carousel

This short-code allows to display a list of discount products. In this section, we will give an overview of how to use this short-code and show demo layout that we styled by using this short-code, we will continue to update layouts in the near futures.

Feel free to view this video to know how to configure this short-code.

Params:

1 – Title: Add title for shortcode.

2 – Products: Input product ID or product title to see suggestions.There are products sale.

3 – Sale price dates From

4 – Sale price dates To

5 – Link

6 – CSS Animation

7 – Animation Delay

shortcode_deal-of-the-day

The Deal of the day is shown in front-end.

shortcode_deal-of-the-day_1

SP Simple Ads

This short-code is just used to display the advertisement image of products, title, sub title or text link.

Feel free to view video guide of this shortcode here.

Params for Image format:

1 – Title

2 – Sub Title

3 – Sub Title Color

4 – Show Banner Link

5 – Link

6 – CSS Animation

7 – Animation Delay

shortcode-simple-ads_2

8 – Border color

9 – Border style

10 – Border radius

11 – Background

12 – Upload image.

shortcode-simple-ads_3
shortcode-simple-ads_4

SP Product Carousel by Category

Display products in category by carousel format, each product chosen will show title,  pricing…

Shortcode Params:

1 – Category: Select any category that you would like to show products.

2 – Items per slide: Set number of items that you would like to show per slide.

3 – Show Category Link: Choose “Yes” if you would like to show category link, or “No” to disable it.

4 – Show Category Link text.

5 – CSS Animation: Select one of CSS animation for style.

6 – Animation Delay: Set delay time for CSS Animation.

7 – Save change: DON’T forget to save all your settings

shortcode_products-carousel-by-category
shortcode_products-carousel-by-category_1

SP Simple Image

Feel free to view video here

Params:

1 – Choose banner image

2 – Image Size

3 – Link

4 – Hover Effect

5 – CSS Animation

6 – Animation Delay

shortcode_simple-image_1
shortcode_simple-image_2

SP Simple list

Feel free to view video guide here.

Params:

1 – Title

2 – Title Color

3 – The title of a list

4 – Link

5 – CSS Animation

6 – Animation Delay

shortcode-simple-list_2
shortcode-simple-list_1

SP Icon Box

This short-code allow to show title, short description, icon…Let see some settings of this short-code.

Feel free to view video guide here

Params:

1 – Icon library: Select icon library.

2 – Icon: Select icon from library.

3 – Style: Click on drop-down list to select one of these styles.

4 – Icon Color: Select color for icon

5 – Title: Enter title in text-box.

6 – Title Color: Set color for title.

7 – Short Description: Enter short description.

8 – Short Description color: Set color for short description.

9 – Link:  If you would like to show a text link with custom url or available link, click on “Select Url”, then configure some settings on the popup.

10 – CSS Animation: Select one of CSS animation for style.

11 – Animation Delay: Set delay time for CSS Animation.

12 – Save Changes: Don’t forget to save the settings above.

shortcode-icon-box_1
shortcode-icon-box_2

SP Contact Box

Feel free to view video guide here.

Params:

1 – Icon library

2 – Icon: Select icon from library.

3 – Title

4 – Title Color

5 – Short Description

6 – Short Description Color

7 – Link

8 – CSS Animation

9 – Animation Delay

shortcode-contact-box
shortcode-contact-box_1

SP Google map

This short-code allow to show the address information of your company on google map. Let see some settings of this short-code.

Params:

1 – Map Type: Click on drop-down box to select one of these map types. ROADMAP displays the default road map view. SATELLITE displays Google Earth satellite images. HYBRID displays a mixture of normal and satellite views. TERRAIN displays a physical map based on terrain information.

2 – Hue: Set color for map. An RGB hex string. indicates the basic color.

3 – Lightness: A floating point value between -100 and 100. Indicates the percentage change in brightness of the element.

4 – Saturation: A floating point value between -100 and 100. Indicates the percentage change in intensity of the basic color to apply to the element.

5 – Address: Enter your company address.

6 – Information Title: Title of information box will show when click on pin icon.

7 – Phone: Company phone

8 – Email: Company email

9 – Website: Website of your company.

10 – Latitude: Open Google Maps, right-click the place or area on the map, select What’s here, Under the search box, an info card with coordinates will appear.

11- Longitude:  Open Google Maps, right-click the place or area on the map, select What’s here, under the search box, an info card with coordinates will appear.

12: Pin icon: Upload pin icon here. If not choose, default pin icon will show.

13: Zoom: Most roadmap imagery is available from zoom levels 0 to 18.

14 – Map Height: Map height unit is pixel.

15 – CSS Animation: Select one of CSS animation for style.

16 – Animation Delay: Set delay time for CSS Animation.

17 – Save Changes: Don’t forget to save the settings above.

shortcode-google-map_1
shorcode-google-map

SP Member Carousel

This shortcode allows you to show members in carousel.

Feel free to view this video guide here.

Params:

1 – Title

2 – Description

3 – Members: Input member Ids or member name to see suggestion.

4 – Image Size: Set the member image size. Default: 370 x 377

5 – Member Per Slide: How many members per slide on the large screen? Min = 1, max = 4. Default: 3.

6- CSS Animation: Select one of CSS animation for style.

7 – Animation Delay: Set delay time for CSS Animation.

8 – Save change: DON’T forget to save all your settings

shortcode-member-carousel_2
shortcode-member-carousel_1

SP Sale Product

Feel free to view video guide of this shortcode here.

Params:

1 – Select layout

2 – Title: Add title for layout.

3 – Products: Input product ID or product title to see suggestions.There are products sale.

4 – Short-code id

5 – Extra class name: If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

6 – CSS Animation: Select type of animation if you want this element to be animated when it enters into the browsers viewport. Note: Works only in modern browsers.

shortcode_sale-product_1

Let see the front-end of this short-code here.

shortcode_sale-product_2

SP Blog

Params:

1 – Title

2 – Select layout

3 – Number Post: Number post in a slide

4 – Category filter:

5 – Order by: Select how to sort retrieved posts.

6 – Order: Designates the ascending or descending order.

7 – Tabs animate

8 – Shortcode id

9 – Extra class name: If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

10 – CSS Animation: Select type of animation if you want this element to be animated when it enters into the browsers viewport. Note: Works only in modern browsers.

shortcode_blog_2

Let see the front-end of this shortcode.

shortcode_blog_1

SP Image Carousel

Params:

1 – Images

2- Image Size

3 – Slider Speed: Duration of animation between slides (in ms). Min = 100

4 – Items Per Slide: Enter number of slides to display at the same time on large screen. Min = 1, max = 10

5 – Custom Links

6 – Link Target

7 – Hover Effect

8 – CSS Animation

9 – Animation Delay

shortcode_image-carousel_1

Let see the front-end of this short-code settings

shortcode_image-carousel_2

SP Infor Company

Feel free to view video guide here.

Params:

1 – Logo: Upload footer logo

2 – Image Size: Set image size

3 – Sp Info List: Enter Title; Description

4 – CSS Animation

5 – Animation Delay

shortcode_inforcompany

Let see the front-end of this short-code settings

shortcode_inforcompany_1

SP Menu Vertical

Params:

1 – Select Menu On Locations

2 – Shortcode id

3 – Extra class name

4 – CSS Animation

5 –

shortcode_menu-vertical1
shortcode_menu-vertical2

Let see the front-end of this short-code settings

shortcode_menu-vertical3

SP Product Single

Params:

1 – Products

2 – Content Image

3 – Content Tab

4 – Shortcode id

5 – Extra class name

6 – CSS Animation

shortcode_product-single1
shortcode_feature-product-tabs3

Let see the front-end of this short-code settings

shortcode_feature-product-tabs5

Sp Feature Product Tabs

Params:

1 – Title

2 – Select layout

3 – Tabs animate

4 – Tab Ajax

5 – Number row: Show number row display products.

6 – Short-code id

7 – Extra class name

8 – CSS Animation

shortcode_feature-product-tabs

Using this short-code to show products in many different tabs. And you can add other widgets such as: SP Product Single into this short-code “SP Feature Product Tabs”.

shortcode_feature-product-tabs4

The Short-code ” SP Product Single” has been added.

shortcode_feature-product-tabs3

Let see the front-end of this short-code settings

shortcode_feature-product-tabs5

Home Layouts

Supermarket is premium responsive WordPress  theme which comes with some Unique Home layouts. It is a clean and modern layouts with many functions and suits any of your shop. Supermarket used both of the default WordPress shortcodes and our Supermarket shortcodes to build unique home layouts. In this section we will show you all layouts and which Supermarket shortcodes are used on them.

Home 2

Frontend: Pls click here to view live demo

homev2_frontend

Let see the back-end of this layout.

homev2_backend

Home 3

Frontend: Pls click here to view live demo

home-v3_frontend

Let see the back-end of this layout.

home-v3_backend

Home 4

Let see the back-end of this layout.

home-v4_frontend

Let see the back-end of this layout.

home-v4_backend

Home 5

Frontend: Pls click here to view live demo

01_homepage5

Let see the back-end of this layout.

home-v5_backend

Home 6

Front-end: Pls click here to view live demo

01_homepage6

Let see the back-end of this layout.

home6_backend
X