Home

Installing Theme

Quick Start Guide

Theme Settings

Home page 1

Home page 2

Home page 3

Help & Support

User Guide - BigCommerce WB Netro

overview

Netro multipurpose bigCommerce theme base on stencil framework, It is suitable for electronics, mobile, home accessories, computers, sports, auto, spare parts and tools store. It is also multipurpose theme which can be used for any kind of online store. Netro BigCommerce theme is looking good with it’s clean and fresh design. All sub pages are customized.


New to BigCommerce?

If you're setting up a BigCommerce store for the first time, we highly recommend heading over to their site and taking a look at their support resources. From their   community forums to their documentation to their BigCommerce University video series, they have everything you need to start your ecommerce journey on the right foot. 

Here are a few articles that cover the basics of setting up a store:

The BigCommerce dashboard

dashboard

The control panel is made of two major areas: the side navigation and the main window. The main window will change based on where you are in the store and where you will perform all actions. The side navigation will change what appears in the main window. Below is a highlight of some important areas in the control panel which will appear whenever you log in.

This is what your dashboard will look like when you first sign up for BigCommerce. You can go just about anywhere and do just about anything from here. It can be a little overwhelming at first, which is why we recommend taking  a quick guided tour to get your bearings.

Our documentation deals primarily with customizing the content and design of your store. If you're looking at the dashboard, we'll be covering the items listed under  Storefront ContentStorefront Design, and a little bit of TopDealing in these docs. If you're looking for basic information on how to add products, configure categories, set shipping rates, or anything else that isn't directly related to your theme, please consult BigCommerce's documentation or contact their support center.

Installing Theme

  1. Login to your BigCommerce store's admin page.
  2. Go to Storefront › My Themes
  3. Click the Upload Theme button by the My Themes heading below the Current Theme.

    Upload Button

  4. Drag the ZIP file into the Upload Theme pop-up window, or you can Select theme from your computer.
  5. After processing, a new custom theme card will appear under My Themes. If your theme was unable to be successfully processed, you will be presented with a screen detailing any errors encountered. Ensure your theme meets all the custom theme upload requirements.
  6. When a new theme appears, click on the button Apply Theme as showing below:
  7. Then choose a style you want to use: Refresh your store's front page you should see the theme installed successfully.

  1. Read Connecting to WebDAV with CyberDuck - When the login is successful, you will see your store's folders.
  2. Extract the image - archive file which you downloaded into your PC: yourtheme-sampledata.zip Upload yourtheme-sampledata/site folders you to into your CyberDuck folder content
  3. To edit the language file - Go to admin page › Storefront Design › My Themes, click button Advanced › Edit Theme Files of the current theme:
  4. From the left navigation- click to edit the language file en-full.json, en.json copy all content from en-full.json to en.json. Click on button save
    • en.json - the language file contains image placeholder
    • en-full.json - the language file contains image as demo site
  5. Refresh your store's front page you should see the theme installed successfully.

1. Go to admin  › Storefront › My Themes,  then click Advanced  › Download Saved Theme of the current theme.

2. Open archive file (grace_update_version.zip) which you downloaded into your PC.
It has 2 file (changelog.html, README.txt)

3. If you do not overrider core of theme. You copy all code for package theme.
Or use the compare tool (Beyond Compare ) to compare files code
When the Complete, you zip back the theme package file

4.You reinstall your theme . Refresh your store's front page you should see the successfully.

Quick Start Guide

Note

You want to see more Using the Stencil Theme Editor: Click here

To get started- go to Storefront › My Themes, then click Customize.

Your storefront will load in a new tab on your browser with the Style Customization panel on the left and the Preview panel on the right.

The Style Customization panel contains all of the controls that allow you to modify the look and feel of your theme. For example, here you’ll be able to update your theme’s typography (fonts and font sizes) and colors. The controls that are available in this panel will vary from theme to theme.

The Preview panel allows you to immediately preview your changes across mobile, tablet, and desktop to see how your store will look to your shoppers across these devices.

See the complete guide of Theme Editor in chapter Theme Settings.

Limitations

The following features are not available with Edit Theme Files:

  • Editing assets like font files, .SVG files, or other image files
  • Editing a theme’s config.json or schema.json configuration files (although you can view their contents)
  • Editing any JavaScript files
  • Concurrent editing is not supported. For a given store, only one instance of the editor should be opened at any time.

To access Edit Theme files, you need to be working on a copied version of the theme. It is not accessible from the default theme from the marketplace. Copied themes are considered a custom theme and will not receive Marketplace Theme Updates

1. Go to Storefront › My Themes and click on the Advanced drop-down menu of the current theme.

Make a Copy

2. From the Advanced drop down menu, select Make a Copy.

3. You will be prompted to name the copied theme. Type in a name, then click Save a Copy.

Make a Copy

It may take a few seconds for the theme to be copied.

4. Click on the action icon of your copied theme, then click on the Customize option to open it from the Theme Editor or Edit Theme Files to open the in-browser editor directly.

Make a Copy

5. In Theme Editor, click the Edit Theme Files tab to open the code panel.

Make a Copy

Using Google Chrome? If you are trying to open Edit Theme Files in Google Chrome, check your pop-up blocker and set it to allow pop-ups on this page.

When you click the Edit Theme Files tab in the Theme Editor, it replaces the preview panel with the theme’s underlying code. The tab’s left-hand side shows you the theme’s files, in a tree of nested folders. Files and directories that should only be edited by the original theme developer are hidden from this view. To edit those files, you will need to use Stencil CLI.

Edit Theme File Screen
  1. Theme Files — these are the folders and files that make up your theme. Click on a blue folder to open it. Click on a blue .html or .scss file to edit it. Greyed-out files are Read-Only. They can be altered only using Stencil CLI.
  2. Code Panel — this is where you edit the code of the selected file
  3. Preview — will display a preview of your store, based on your last save
  4. Save File — will save the file currently open and recompile the theme
  5. Save All Files — will save all open files and recompile the theme

The file editor color-codes elements within your source HTML, for easy identification and will auto-suggest HTML as you type. It also includes the ability to Undo and Redo edits. The file editor allows for a mix of HTML, Handlebar statements, SCSS, and JavaScript tags in your theme’s template files. See our Developer Documentation on Handlebars Syntax and Helpers

Pro Tip! You can search for elements within a file by pressing Ctrl+F or Cmd+F.
Search Box

Saving Theme Files

When you click the Save File or Save All Files button, it will recompile and repackage the theme files with your changes. You can then preview the revised theme and (if you choose) apply it to your store. Saving and compiling might take a few minutes to complete, depending on the complexity and number of the changes.

Preview and Save Buttons

Once saved, you can preview the theme by clicking the Preview button.

Preview Sample

The template language file is located in the lang folder. You have one called en.json which has the full English translation. You will need to copy and paste the data from en.json to the fr.json file and then translate the key-value pairs. Basically it will automatically change the language based on the user's browser settings.

Here's more information on how the localization works:
https://stencil.bigcommerce.com/docs/localization-file-structure

And here you can find the additional translation needed for the multi-language checkout:
https://stencil.bigcommerce.com/docs/multi-language-checkout

  1. Go to admin  › Storefront › My Themes,  then click Advanced  › Download Saved Theme of the current theme.
  2. Open archive file which you downloaded into your PC, overwrite image file assets/img/ProductDefault.gif archive file
  3. You reinstall your theme . Refresh your store's front page you should see the successfully.

Theme settings

Theme Settings or Theme Editor is a graphical user interface, lets you configure all features which the theme supports.

Go to admin  › Storefront › My Themes,  on the Current Theme section, click Customize button

1.Global color - This section lets you change colors of common elements, load indicator and overlays.

2.Typography - This section lets you change fonts, font sizes, colors of the logo, body text, headings, links, icons, ratings and other common elements.

3.Blogs - This section lets you configure blog post image sizes.

1.Logo position - This section lets you configure logo position and size.

2.Display on Top Header - This section lets you configure header on top when scroll

3.Display Email - This section lets you configure Email (Show/Hide)

4.Footer Menus & Payment icons - This section lets you configure footer menus & playment icon (Show/Hide )

5.GeoTrust SSL - Show/Hide GeoTrust SSL seal and configure seal size.

This section let you configure the WB Theme Setting:

1.Configure General:

Back Top Top: allows users to smoothly scroll back to the top of the page.

Banner Effect: Have all 12 effect banner you choose

2.Configure Product Category

Show Subcategory: Show/Hide Subcategory

Sidebar position: Select one in option ( Sidebar Left | Sidebar Right | Widthout Sidebar )

Product display mode: Column number display page category

Product display image gallery :( Fade, Gallery left, Gallery right, Gallery bottom )

3.Product Detail

Product view gallery: Select one in option ( Gallery Bottom| Gallery Left| Gallery Grid | Gallery list )

Tabs Size Chart: add product image size chart. You can edit url images in the language file en.json in the File Editor, find section wbThemeproductsimage_sizechart

Product view tabs: Select one in option(vertical|horizontal)

This section let you configure the homepage:

  • Show/hide any content blocks and product blocks.
  • Rearrange position of any blocks.

Home page 1: Position sections

Home page 2: Position sections

Home page 3: Position sections

This section let you configure the Module:

  • Configure display type of New, Featured, Popular Products blog.
  • Number of products to show on each block.

This configuration section lets you:

  • Show/Hide Quickview button.
  • Configure number of products, reviews, brands, search results showing.
  • Configure product image sizes
  • Configure Product swatch image sizes.
  • Configure position and colors of Product Badges.
  • Configure colors of elements of products grid items.

Please edit your product in backend then add Custom Fields following the image:

This section lets you change colors, borders, background of the form elements like labels, input boxes, select boxes, checkbox and radios.

This section lets you change colors, borders, background of header, logo the page checkout

Home Page 1

Header Styles

This theme support 2 different header styles: - Logo at left - Logo at center

To configure, open the Theme Editor, scroll down to section Logo, click to expand the logo options. Choose a certain option of Logo position, then click Refresh button appear after.

Top Banner

The top banner can be showed / edited in admin > page › Marketing › Banners. When you add / edit remember to choose Location is Top of Page.

Promotion Carousel

You can edit Promotion carousel in the language file lang/en.json. Find key wbThemepromotion:

"wb_promotion": {
        "item1": {
            "status": "true",
            "url": "#",
            "title": "Free International Shipping. No Minimum Purchase Required* Detail"
        },
        "item2": {
            "status": "true",
            "url": "#",
            "title": "Free International Shipping. No Minimum Purchase Required* Detail"
        }
    },
  • url - is the link url of image
  • title - is the content of promotion.

You can configure megamenu horizontal, web page on Main navigation. Header & Footer > Main navigation:

MegaMenu Horizontal

the mega menu Horizontal can be edited in the language file en.json:

"wb_megamenu": {
            "view_all": "View All Products",
            "horizontal": {
                    "menu_cat_0": {
                    "status": "true",
                    "icon-awesome": " ",
                    "icon-image": " ",
                    "menu-badge": " ",
                    "position": "left",
                    "type-menu": "mega",
                    "mega-category-col": "5",
                    "mega-banner-mode": " ",
                    "mega-banner-img": " ",
                    "mega-banner-placeholder": "http://via.placeholder.com/270x369",
                    "mega-banner-url": "#placeholder_link"
                    
                },
                "menu_cat_1": {
                    "status": "true",
                    "icon-awesome": " ",
                    "icon-image": " ",
                    "menu-badge": " ",
                    "position": "left",
                    "type-menu": "mega",
                    "mega-category-col": "3",
                    "mega-banner-mode": "right",
                    "mega-banner-img": " ",
                    "mega-banner-placeholder": "http://via.placeholder.com/270x369",
                    "mega-banner-url": "#placeholder_link"
                },
                "menu_cat_2": {
                    "status": "true",
                    "icon-awesome": " ",
                    "icon-image": " ",
                    "menu-badge": " ",
                    "position": "left",
                    "type-menu": "default",
                    "mega-category-col": "3",
                    "mega-banner-mode": "left",
                    "mega-banner-img": " ",
                    "mega-banner-placeholder": "http://via.placeholder.com/270x369",
                    "mega-banner-url": "#placeholder_link"
                }
				...
            },
        },
  • icon-awesome - icon name font awesome, user Fontawesome 4.7
  • icon-image - is the image URL.
  • menu-badge - is the badge (Hot, New, Top...) on menu items.
  • type-menu - is the type menu (default menu, mega menu)
  • position - align menu item (left/right ).

Type mega menu:

  • mega-category-col column number category display on mega menu.
  • mega-banner-mode is the align banner item (left/right ).
  • mega-banner-img is the image URL banner.
  • mega-banner-placeholder is the image URL placeholder.
  • mega-banner-url is the link url of image.

Adding Web Pages For MegaMenu Horizontal

Note

You want to see more add web page : Click here

the menu item web pages can be edited in the language file en.json:

 "webpage": {
            "menu_cat_0": {
                "load-webpage": "yes",
                "icon-awesome": " ",
                "icon-image": " ",
                "menu-badge": "hot",
                "position": "left"
            },
            "menu_cat_1": {
                "load-webpage": "no",
                "icon-awesome": " ",
                "icon-image": " ",
                "menu-badge": " ",
                "position": "left"
            },
  • load-webpage - is the loading content of web page
  • icon-awesome - icon name font awesome, user Fontawesome 4.7
  • icon-image - is the image URL.
  • menu-badge - is the badge (Hot, New, Top...) on menu items.
  • position - align menu item (left/right ).

image placeholder Slideshow

Home 1 : size images (1740x560)

Home 2 : size images (1030x557)

Home 3 : size images (1420x600)

Edit the slideshow in Admin page › Storefront › Home Page Carousel:

Note

Note: You want to change number items of WB Banner

  1. Go to admin › Storefront › My Themes, then click Advanced › Edit Theme Files of the current theme.
  2. Edit Theme Files › templates\components\wbcomponents\sections\slideshow-home1.html

    Set limitation = 2 then the banner shows 2 items

    {{> components/wbcomponents/module/wb_banner/banner status=true prefix="slideshow" showContent=false limitation=2 class_sfx=""}}

Note

You want to see more Product Panels : Click here

Some themes have a section on the home page that features the store's top-selling products. This is an easy way to dynamically market your best-performing products right on your homepage.

The products that appear in this section are chosen dynamically from store sales data. They cannot be added manually.

Products are ranked by the total number of units sold and not by the number of orders. For example, a product that has a single order for a quantity of 100 will rank higher than another product that has 99 orders for a quantity of one.

Stock sold in other channels (like eBay, Amazon, Facebook, Pinterest, Square) are included in these calculations but not orders that have been canceled, refunded or used for testing purposes. If you want more control over which products appear on the home page, consider using the Featured Products panel.

Note

You want to see more Product Panels : Click here

Selecting Featured Products

1. Go to ProductsView. At the top of the list of products, there is a Featured column left of the Action column with white stars under it.

2. To feature a product, click the star to its right. When the star is filled in, it has been marked as Featured.

Click the star next to a product to make it featured

Click it again to take off the Featured status.

You can also make a product Featured from the Other Details tab when adding or editing a product.

Number of Featured Products to Display

1. Go to Storefront DesignMy Themes, then click Customize.

Customize button highlighted on the My Themes page

2. On the left, scroll down and click the Products section to expand it. Under Number of Featured Products, set the number of featured products you want to show on the home page.

Number of Featured Products setting highlighted in the Stencil Theme Editor

3. Click Save Changes when you're done.

you should reset the specify category ID for properly in the language filelang/en.json. Find key wbThemewb_supper_category:

    "wb_supper_category": {
        "view_all": "View All Categoies",
        "noItem": "Has no item to show",
        "noCategory": "specify  category ID to display module in the language file lang/en.json.
Find key wbTheme › wb_supper_category > category_auto > category_id", "noSubCategory": "Has no item sub category to show", "category_1": { "category_id": "23", "image": "webdav:site/banner/cate_1.jpg", "placeholderImage": "http://via.placeholder.com/430x405" }, "category_2": { "category_id": "28", "image": "webdav:site/banner/cate_2.jpg", "placeholderImage": "http://via.placeholder.com/430x405" }, "category_3": { "category_id": "26", "image": "webdav:site/banner/cate_3.jpg", "placeholderImage": "http://via.placeholder.com/430x405" }, "category_4": { "category_id": "33", "image": "webdav:site/banner/cate_4.jpg", "placeholderImage": "http://via.placeholder.com/430x405" } }
  • category_id - is the ID to category .

You can find the category url by editing the category, look at screenshot:

You can configure number of products and product display type in Theme Editor > Module:

You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbThemewb_instagram

    "wb_category": {
        "heading": "Shop By Categories",
        "view_all": "View More",
        "totalCategory": "6",
        "columnCategory": "6",
        "placeholderImage": "http://via.placeholder.com/255x160",
        "noItem": "Has no item to show",
        "noCategory": "specify category ID to display module in the language file lang/en.json. Find key wbTheme › wb_category > category_auto > category_id",
		"category_1": {
			"category_id": "18"
		},
		"category_2": {
			"category_id": "27"
		},
		"category_3": {
			"category_id": "28"
		},
		"category_4": {
			"category_id": "26"
		},
		"category_5": {
			"category_id": "79"
		},
		"category_6": {
			"category_id": "78"
		}
    }
    }
  • category_id - is the link to category .

You can find the category url by editing the category, look at screenshot:

You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbBannerstatic_brand

Contact Us

In your admin page › Store Setup › Store Profile, edit Store Address and Phone:

For email, Theme Editor › Header & Footer › Address Email : write email info

Social Follow us

In your admin page › Storefront Design › Design Options › Social Media, enter your social links:

Our Services

You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbThememenu_info_1

"menu_info_2": {
	"heading": "Our Services",
	"row_1": {
		"title": "Product Support",
		"url": "#"
	},
	"row_2": {
		"title": "PC Setup & Support",
		"url": "#"
	},
	"row_3": {
		"title": "Services",
		"url": "#"
	},
	"row_4": {
		"title": "Term & Conditions",
		"url": "#"
    }
    ...
}

Sign up for Newsletter

Make sure you tick on the option "Allow Newsletter Subscription" in admin page › Marketing › Email Marketing :

Payment Icon

To show/hide payment icons, go to Theme Editor › Payment Icons secitons, check or uncheck any icons you want to show or hide.

Home Page 2

You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbBannerhome2slider

"home2slider": {
		"heading": " ",
		"banner1": {
			"image": "webdav:site/banner/home2/banner3.jpg",
			"placeholderImage": "http://placehold.jp/380x174.png",
			"icon": " ",
			"url": "#",
			"title": "slideshow banner1",
			"text": " ",
			"button": " "
		},
		"banner2": {
			"image": "webdav:site/banner/home2/banner4.jpg",
			"placeholderImage": "http://placehold.jp/380x174.png",
			"icon": " ",
			"url": "#",
			"title": "slideshow banner2",
			"text": " ",
			"button": " "
		}
		...
	}

Banner Services

You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbBannerservices

Block Banner Sidebar

You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbBannersidebarBanner,home2sidebar2

Block Banner 1, 2 & 3

You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbBannerhome2blockBanner1,home2blockBanner2, home2blockBanner3

The New Products panel on your homepage displays the most recently added products in your store. It's a great way to promote new product lines and it lets your shoppers know about new additions quickly and easily.

You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbThemewb_testimonial

you should reset the specify category ID for properly in the language filelang/en.json. Find key wbThemewb_home2deal:

"wb_home2deal":{
				"heading": "Deals of the week",
				"viewAll": "View All",
				"text_offerend": "Hurry Up! Offer ends in",
				"noItem": "Has no item discount to show",
				"noCategory": "specify category ID to display module in the language file lang/en.json.
Find key wbTheme › wb_hotdeal_home2 > category_auto > id", "category_1": { "category_id": "38" } }
  • id - is the number is category ID.
  • image - is the image URL
  • placeholderImage - is the image URL
  • url - is the link url of image

You can find the category ID by editing the category, look at the URL on your web browser, the number is category ID:

Home Page 3

You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbBannerhome3blockBanner1

"home3blockBanner1": {
		"heading": " ",
		"banner1": {
			"image": "webdav:site/banner/home3/banner8.jpg",
			"placeholderImage": "http://placehold.jp/420x220.png",
			"icon": " ",
			"url": "#",
			"title": "Banner",
			"text": " ",
			"button": " "
		},
		"banner2": {
			"image": "webdav:site/banner/home3/banner9.jpg",
			"placeholderImage": "http://placehold.jp/420x220.png",
			"icon": " ",
			"url": "#",
			"title": "Men",
			"text": "18 products",
			"button": " "
		},
		...
	}

Banner Services

You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbBannerservices

Block Banner Sidebar

You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbBannersidebarBanner

you should reset the specify category ID for properly in the language filelang/en.json. Find key wbThemehome3_wb_supper_category:

"home3_wb_supper_category":{
				"view_all": "View All Categoies",
				"noItem": "Has no item to show",
				"noCategory": "specify  category ID to display module in the language file lang/en.json.
Find key wbTheme › wb_supper_category > category_auto > category_id", "noSubCategory": "Has no item sub category to show", "category_1": { "category_id": "23", "image": "webdav:site/collection/home3/subcat_4.jpg", "placeholderImage": "http://via.placeholder.com/1375x275" }, "category_2": { "category_id": "28", "image": "webdav:site/collection/home3/subcat_3.jpg", "placeholderImage": "http://via.placeholder.com/1375x275" }, "category_3": { "category_id": "26", "image": "webdav:site/collection/home3/subcat_2.jpg", "placeholderImage": "http://via.placeholder.com/1375x275" }, "category_4": { "category_id": "33", "image": "webdav:site/collection/home3/subcat_1.jpg", "placeholderImage": "http://via.placeholder.com/1375x275" } }
  • category_id - is the number is category ID.
  • image - is the image URL
  • placeholderImage - is the image URL

You can find the category ID by editing the category, look at the URL on your web browser, the number is category ID:

Help & Support

If you have any question that is beyond the scope of this help file, please send us via: Submit a Ticket

Our working hours: Monday to Friday 8AM - 5PM GMT+8.

Thank you so much for purchasing this theme!

What do we support and do not support?

We Do Support:

  • Provide detailed documentation to help you install and configure the theme successfully by yourself.
  • Answer your enquiries about theme configuration and use.
  • Answer you how to edit and translate the language files.
  • Fix bugs of our themes ONLY if the source code are not modified.

We Do Not Support:

  • Answer you how to use BigCommerce, manage, edit or configure any built-in BigCommerce features which are not related to our themes. Please contact BigCommerce Support for help.
  • Upgrading the theme on your store if the source code was modified by any reasons.
  • Editing the theme's source code for your own requirements which the theme's current version is not supported. Except editing language files.