User Guide - BigCommerce SB Revo

Created: 12/3/2017
By: Revotheme

Revo multipurposeBigCommerce theme base on stencil framework, It is suitable for HiTech Shop, electronic, Fashion store,or any eCommerce site. It is also multipurpose theme which can be used for any kind of online store. Revo BigCommerce theme is looking good with it’s clean and fresh design.

Demo Buy Now Support

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

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 Content, Storefront Design, and a little bit of Marketing 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.

Theme Installation BigCommerce

Login to your BigCommerce store's admin page.
Go to Storefront Design › My Themes.
Click button Upload Theme. On the popup, click button Select theme from your computer.
Choose the zip file sb_revo_theme_x.zip to start installing the theme. Waiting for the uploading completed.
When a new theme appears, click on the button Apply Theme as showing below:

Then choose a style you want to use:

Refresh your store's front page you should see the theme installed successfully.
Go to, Perform web demo configuration:

Instruction configured image as demo

Read Connecting to WebDAV with CyberDuck - When the login is successful, you will see your store's folders.
Extract the image - archive file which you downloaded into your PC: sample_data_revo.zip Upload http://images.smartaddons.com/bigecommerce-images/sb-revo/site folders you to into your CyberDuck folder content
To edit the language file - Go to admin page › Storefront Design › My Themes, click button Advanced › Edit Theme Files of the current theme:
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
Refresh your store's front page you should see the theme installed successfully.

Importing Web pages

Guide create new web pages as demo site

Note

You want to see more add web page : Click here

Adding Web Pages- Go to Storefront › Web Pages, then click Create a Web Page.

For This Page Will - select Contain content created using the WYSIWYG editor below.
Extract the web pages - archive file which you downloaded into your PC: sample_data_revo.zip.
Example (open file webpage/faq.text ) - copy content to include in the Page Content section. The Page Content section has the same functionality as the WYSIWYG Editor in your product pages.
Save your changes.Refresh your store's front page

Update Package Theme

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

2. Go to Themeforest › Download the updated package.

3. Open archive file (revo_update_version.zip) which you downloaded in step 2.
It has 2 file (changelog.html, README.txt)

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

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

Theme Editor

This theme provides a powerful Theme Editor with many options let you change styles, colors, fonts and more.

Note

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

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

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

Edit language file

Language files contains hard-coded static text, images and other links, which can be edited and translated to any languages.

1.To get started - Go to admin › Storefront › My Themes, then click Advanced › Edit Theme Files of the current theme.

2.From the left navigation - click to edit the language file (e.i en.json)

How do I translate all of my theme

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

Edit template files

Edit template files is not recommended, unless you have HTML, CSS and Sass programming skills.

You can edit the HTML files, SCSS files, images. However remember to backup your changed files as they are overwritten when you upgrade the theme.

Go to admin › Storefront › My Themes, then click Advanced › Edit Theme Files of the current theme.

All HTML files are in directory templates.
All Sass files are in directory assets/scss.
Images are placed in directory assets/img.

Activate a theme style

To activate a theme style, open Theme Editor, find Styles section, click on the theme variation's thumbnail to activate corresponding style. Theme only one styles

Custom Css theme

Note

Copy / backup this file for future theme upgrade.
Add custom CSS code required CSS (or Sass) programming skill. It's not recommended for new users.

Go to admin › Storefront › My Themes, then click Advanced › Edit Theme Files of the current theme.

From the left navigation - To add your own custom CSS code you can edit the file assets/scss/_theme-custom.scss_ in Edit Theme Files editor:

How to set up a default picture to products

Go to admin › Storefront › My Themes, then click Advanced › Download Saved Theme of the current theme.
Open archive file which you downloaded into your PC, overwrite image file ProductDefault.gif archive file
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

Styles

This section shows all the theme's variations. You can change other style here.

Storewide

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.

Header & Footer

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.

SB Theme Setting

This section let you configure the SB Theme Setting:

1.Configure General:

RTL Languages: Theme support RTL Languages

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

Fade out image gradually while scrolling: scrolling create effect image fade

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: max item = 3

3.Product Detail

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

Show Size Chart: add product image size chart. You can edit url images in the language file en.json in the File Editor, find section sb_themes › products › image_sizechart

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

Home Page

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

Home page 4: Position sections

Module

This section let you configure the Module:

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

Product

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.

Button & icons

This section lets you change colors of buttons.

Forms

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

Optimized Checkout

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

Customization

This page will explain all configuration available and how to edit each section appear on theme. Let's view the first homepage.

Product Label & Countdown

Go to admin › Products › View, then click view product.
Copy the code below into the view product, then click save
```
[shortcode][badges]webdav:site/product_label/free_Shipping/2.png[/badges][countdown]12/25/2018[/countdown][/shortcode]
```
- badges - is the image URL.
- countdown - is the Countdown Timer to Any Date.
Go to configure the SB Theme Setting,Check if they are enabled or not

Header

Header Styles

This theme support 3 different header styles: - Logo at left - Logo at right - 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 sb_revo › promotion:

"promotion": {
    "item1": {
        "url": "#",
    "title": "Free Shipping on all Orders. No Minimum Purchases Required*"
    },
    "item2": {
        "url": "#",
    "title": "Free 3 day delirery and free returns within the US"
    },
    "item3": {
        "url": "#",
    "title": "20% Discount on Selected Items"
    }
},

url - is the link url of image
title - is the content of promotion.

MegaMenu

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:

"sb_megamenu": {
    "view_all": "View All Products",
    "horizontal": {
        "menu_cat_0": {
            "icon-awesome": " ",
            "icon-image": " ",
            "menu-badge": " ",
            "position": "left",
            "type-menu": "mega",
            "mega-category-col": "5",
            "mega-banner-mode": " ",
            "mega-banner-img": "webdav:site/banner/home1/image-left.jpg",
            "mega-banner-placeholder": "http://via.placeholder.com/270x369",
            "mega-banner-url": "#placeholder_link"
            
        },
        "menu_cat_1": {
            "icon-awesome": " ",
            "icon-image": " ",
            "menu-badge": " ",
            "position": "left",
            "type-menu": "mega",
            "mega-category-col": "3",
            "mega-banner-mode": "right",
            "mega-banner-img": "webdav:site/banner/home1/image-left.jpg",
            "mega-banner-placeholder": "http://via.placeholder.com/270x369",
            "mega-banner-url": "#placeholder_link"
        },
        "menu_cat_2": {
            "icon-awesome": " ",
            "icon-image": " ",
            "menu-badge": " ",
            "position": "left",
            "type-menu": "default",
            "mega-category-col": "3",
            "mega-banner-mode": "left",
            "mega-banner-img": "webdav:site/banner/home1/image-left.jpg",
            "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 ).

MegaMenu Vertical

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

"vertical": {
    "more_categories": "More Categories",
    "close_categories": "Close Categories",
    "menu_cat_0": {
        "type-menu": "mega",
        "icon-awesome": "gitlab",
        "icon-image": "webdav:site/menu/icon/icon-1.png",
        "content_column": "3",
        "show_banner": "yes",
        "banner_mode": "vertical",
        "image": "webdav:site/banner/home1/6.jpg",
        "placeholderImage": "http://via.placeholder.com/170x470",
        "url": "#"
    },
    "menu_cat_1": {
        "type-menu": "mega",
        "icon-awesome": "cutlery",
        "icon-image": "webdav:site/menu/icon/icon-2.png",
        "content_column": "3",
        "show_banner": "yes",
        "banner_mode": "horizontal",
        "image": "webdav:site/banner/home1/9.jpg",
        "placeholderImage": "http://via.placeholder.com/170x470",
        "url": "#"
    },
    "menu_cat_2": {
        "type-menu": "default",
        "icon-awesome": "desktop",
        "icon-image": "webdav:site/menu/icon/icon-3.png",
        "content_column": "4",
        "show_banner": "yes",
        "banner_mode": "horizontal",
        "image": "webdav:site/banner/home1/9.jpg",
        "placeholderImage": "http://via.placeholder.com/770x140",
        "url": "#"
    },
}

type-menu - is the type menu (default menu, mega menu)
icon-awesome - icon name font awesome, user Fontawesome 4.7
icon-image - is the image URL.
content_column - column item show on sub content.
show_banner - Show/Hide banner
banner_mode - Show banner with value (horizontal/vertical)
image - is the image URL
placeholderImage - is the image URL banner
url - is the link url of image banner

Main Slideshow / Carousel

Image placeholder carousel

Home 1 : size images (650x510)

Home 2 : size images (1920x510)

Home 3 : size images (1170x510)

Home 4 : size images (1170x550)

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

All Banner

Note

Note: You want to change number items of SB Banner

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

Set limitation = 2 then the banner shows 2 items
```
{{> components/sbthemes/module/sb_banner/banner status=true prefix="slideshow" showContent=false limitation=2 class_sfx=""}}
```

Banner Slideshow

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

"slideshow": {
    "heading": " ",
    "banner1": {
        "image": "webdav:site/banner/home1/1.jpg",
        "placeholderImage": "http://via.placeholder.com/250x170",
        "icon": " ",
        "url": "#",
        "title": " ",
        "text": " ",
        "button": " "
    },
    "banner2": {
        "image": "webdav:site/banner/home1/2.jpg",
        "placeholderImage": "http://via.placeholder.com/250x170",
        "icon": " ",
        "url": "#",
        "title": " ",
        "text": " ",
        "button": " "
    },
     "banner3": {
        "image": "webdav:site/banner/home1/3.jpg",
        "placeholderImage": "http://via.placeholder.com/250x170",
        "icon": " ",
        "url": "#",
        "title": " ",
        "text": " ",
        "button": " "
    }
}

Featured Categories

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

"feature_category": {
    "heading": "Featured Categories",
    "banner1": {
        "image": "webdav:site/banner/home1/cate1.jpg",
    "placeholderImage": "http://via.placeholder.com/210x270",
    "icon": " ",
        "url": "/categories/watches.html",
        "title": "Watches",
        "text": " ",
        "button": " "
    },
    "banner2": {
        "image": "webdav:site/banner/home1/cate2.jpg",
    "placeholderImage": "http://via.placeholder.com/210x270",
    "icon": " ",
        "url": "/categories/bags.html",
        "title": "Bags",
        "text": " ",
        "button": " "
    },
     "banner3": {
        "image": "webdav:site/banner/home1/cate3.jpg",
    "placeholderImage": "http://via.placeholder.com/210x270",
    "icon": " ",
        "url": "/categories/accessories.html",
        "title": "Accessories",
        "text": " ",
        "button": " "
    },
     "banner4": {
        "image": "webdav:site/banner/home1/cate4.jpg",
    "placeholderImage": "http://via.placeholder.com/210x270",
    "icon": " ",
        "url": "/categories/fashion/sports.html",
        "title": "Shoes",
        "text": " ",
        "button": " "
    },
     "banner5": {
        "image": "webdav:site/banner/home1/cate5.jpg",
    "placeholderImage": "http://via.placeholder.com/210x270",
    "icon": " ",
        "url": "/categories/fashion.html",
        "title": "Fashion",
        "text": " ",
        "button": " "
    }
},

You want to see define the name sections of banner please click here

Block Banner 1 and 2

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

"blockBanner1": {
    "heading": " ",
    "banner1": {
    "image": "webdav:site/banner/home1/4.jpg",
    "placeholderImage": "http://via.placeholder.com/570x220",
        "icon": " ",
        "url": "#",
        "title": " ",
        "text": " ",
        "button": " "
    },
    "banner2": {
        "image": "webdav:site/banner/home1/5.jpg",
    "placeholderImage": "http://via.placeholder.com/570x220",
        "icon": " ",
        "url": "#",
        "title": " ",
        "text": " ",
        "button": " "
    }
     
},

You want to see define the name sections of banner please click here

"blockBanner2": {
    "heading": " ",
    "banner1": {
        "image": "webdav:site/banner/home1/9.jpg",
    "placeholderImage": "http://via.placeholder.com/1170x220",
        "icon": " ",
        "url": "#",
        "title": " ",
        "text": " ",
        "button": " "
    }
},

You want to see define the name sections of banner please click here

Banner App Store

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

"downloadApp": {
    "heading": " ",
   "banner1": {
        "image": "webdav:site/app/app-qrcode.png",
        "placeholderImage": "http://via.placeholder.com/270x369",
        "icon": " ",
        "url": "#",
        "title": "qrcode",
        "text": " ",
        "button": " "
    },
    "banner2": {
        "image": "webdav:site/app/app-store.png",
        "placeholderImage": "http://via.placeholder.com/270x369",
        "icon": " ",
        "url": "#",
        "title": "Apple Store",
        "text": " ",
        "button": " "
    },
    "banner3": {
        "image": "webdav:site/app/google-play.png",
        "placeholderImage": "http://via.placeholder.com/270x369",
        "icon": " ",
        "url": "#",
        "title": "Google Play",
        "text": " ",
        "button": " "
    }
},

You want to see define the name sections of banner please click here

Page Category - Banner

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

"sidebarBanner": {
    "heading": " ",
    "banner1": {
        "image": "webdav:site/banner/home1/image-left.jpg",
        "placeholderImage": "http://via.placeholder.com/270x369",
        "icon": " ",
        "url": "#",
        "title": " ",
        "text": " ",
        "button": " "
    }
     
},
"cmsblock": {
    "heading": "Custom CMS Block",
    "banner1": {
        "image": "webdav:site/banner/home1/3.jpg",
        "placeholderImage": "http://via.placeholder.com/270x369",
        "icon": " ",
        "url": "#",
        "title": "Custom Title",
        "text": "Custom CMS block displayed at the left sidebar on the Catalog Page. Put your own content here: text, html, images, media... whatever you like.",
        "button": " Read More"
    }
     
},

You want to see define the name sections of banner please click here

Page Product - Banner

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

"buyFromus": {
    "heading": "4 Great reasons to buy from us:",
    "banner1": {
        "image": "webdav:site/banner/home1/reasons/reasons-1.png",
        "placeholderImage": "http://via.placeholder.com/270x369",
        "icon": " ",
        "url": "#",
        "title": "reasons 1",
        "text": " ",
        "button": " "
    },
    "banner2": {
        "image": "webdav:site/banner/home1/reasons/reasons-2.png",
        "placeholderImage": "http://via.placeholder.com/270x369",
        "icon": " ",
        "url": "#",
        "title": "reasons 2",
        "text": " ",
        "button": " "
    },
    "banner3": {
        "image": "webdav:site/banner/home1/reasons/reasons-3.png",
        "placeholderImage": "http://via.placeholder.com/270x369",
        "icon": " ",
        "url": "#",
        "title": "reasons 3",
        "text": " ",
        "button": " "
    },
    "banner4": {
        "image": "webdav:site/banner/home1/reasons/reasons-4.png",
        "placeholderImage": "http://via.placeholder.com/270x369",
        "icon": " ",
        "url": "#",
        "title": " ",
        "text": " ",
        "button": " "
    }
}

You want to see define the name sections of banner please click here

SB Deals

The today's deals section: get the discount product on category

1.you should reset the specify category ID for properly in the language file lang/en.json. Find key sb_themes › sb_deals:

"sb_deals":{
    "heading": "ToDay Deals",
    "noItem": "You choose the setting for id category:  Open file lang/en.json, structure sb_themes.sb_deals.category_auto.id ",
    "category_1": {
        "id": "23",
        "url": "#"
    }
},

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

2.The discount product : Please set sale price and date for the each product of your category that you set category id in sp deal block .

3.Set Countdown product: Read More

SB Listingtab

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

"sb_listing_tabs": {
    "bestselling": "Bestselling",
    "featured": "Featured",
    "new": "New Arrivals",
    "reviews": "Top Reviewed",
    "view_all": "View All Products",
    "noItem": "You choose the setting for id category:Open file lang/en.json, structure sb_themes.sb_listing_tabs.category_auto.id ",
    "category_1": {
        "id": "19",
        "image": "webdav:site/banner/home1/6.jpg",
        "placeholderImage": "http://via.placeholder.com/196x542",
        "url": "#"
    },
    "category_2": {
        "id": "20",
        "image": "webdav:site/banner/home1/7.jpg",
        "placeholderImage": "http://via.placeholder.com/196x542",
        "url": "#"
    },
    "category_3": {
        "id": "21",
        "image": "webdav:site/banner/home1/8.jpg",
        "placeholderImage": "http://via.placeholder.com/196x542",
        "url": "#"
    }
},

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:

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

SB Extraslider

Custom module (New Product, Featured Products, Best Sellers) of Bigcommerce

You can configure number of products in Theme Editor > Module:

SB Latestblog

Custom module Latest blog from Bigcommerce

SB Brand

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

"static_brand": {
    "banner1": {
        "image": "webdav:site/manufacturer/home1/brand-1.png",
        "placeholderImage": "http://via.placeholder.com/160x72",
        "url": "#",
        "title": "brand1"
    },
    "banner2": {
        "image": "webdav:site/manufacturer/home1/brand-2.png",
        "placeholderImage": "http://via.placeholder.com/160x72",
        "url": "#",
        "title": "brand2"
    },
    "banner3": {
        "image": "webdav:site/manufacturer/home1/brand-3.png",
        "placeholderImage": "http://via.placeholder.com/160x72",
        "url": "#",
        "title": "brand3"
    },
    "banner4": {
        "image": "webdav:site/manufacturer/home1/brand-4.png",
        "placeholderImage": "http://via.placeholder.com/160x72",
        "url": "#",
        "title": "brand4"
    },
    "banner5": {
        "image": "webdav:site/manufacturer/home1/brand-5.png",
    "placeholderImage": "http://via.placeholder.com/160x72",
        "url": "#",
        "title": "brand5"
    },
    "banner6": {
        "image": "webdav:site/manufacturer/home1/brand-6.png",
        "placeholderImage": "http://via.placeholder.com/160x72",
        "url": "#",
        "title": "brand6"
    },
    "banner7": {
        "image": "webdav:site/manufacturer/home1/brand-1.png",
        "placeholderImage": "http://via.placeholder.com/160x72",
        "url": "#",
        "title": "brand7"
    }
     
},

image - is the image URL
placeholderImage - is the image URL
url - is the link url of image
title - is the heading of brand.

SB Banner - Custom Services

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

"services": {
    "heading": " ",
    "banner1": {
        "image": " ",
        "url": "#",
        "icon": "truck",
        "title": "free delivery",
        "text": "From 275 AED",
        "button": " "
    },
    "banner2": {
        "image": " ",
        "url": "#",
        "icon": "money",
        "title": "cash on delivery",
        "text": "From 275 AED",
        "button": " "
    },
    "banner3": {
        "image": " ",
        "url": "#",
        "icon": "gift",
        "title": "free gift box",
        "text": "& gift note",
        "button": " "
    },
    "banner4": {
        "image": " ",
        "url": "#",
        "icon": "phone-square",
        "title": "contact us",
        "text": "123 456 789",
        "button": " "
    },
    "banner5": {
        "image": " ",
        "url": "#",
        "icon": "diamond",
        "title": "Loyalty",
        "text": "Rewarded",
        "button": " "
    }
},

You want to see define the name sections of banner please click here

SB Menu Footer

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

"menu_info_1": {
    "heading": "Our Shops",
    "row_1": {
        "title": "Product Support",
        "url": "#"
    },
    "row_2": {
        "title": "PC Setup & Support",
        "url": "#"
    },
    "row_3": {
        "title": "Services",
        "url": "#"
    },
    "row_4": {
        "title": "Term & Conditions",
        "url": "#"
    },
    "row_5": {
        "title": "Privacy Policy",
        "url": "#"
    },
    "row_6": {
        "title": " ",
        "url": " "
    },
    "row_7": {
        "title": " ",
        "url": " "
    }
},

Custom Nav pages

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

"footer": {
    "message": "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of  classical Latin literature from 45 BC, making it over 2000 years old."
},

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:

Credit Link

To show/hide the credit links, go to Theme Editor › Footer section, tick or untick the checkboxes as showing above.

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 2

Note

General section of home 1 and 2, Will not be written here here. Please read at home 1

Home 2 - SB Banner

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

"home2Banner1": {
        "heading": " ",
        "banner1": {
            "image": "webdav:site/banner/home2/h2-img-1.jpg",
            "placeholderImage": "http://via.placeholder.com/370x220",
            "icon": " ",
            "url": "#",
            "title": " ",
            "text": " ",
            "button": " "
        },
        "banner2": {
            "image": "webdav:site/banner/home2/h2-img-2.jpg",
            "placeholderImage": "http://via.placeholder.com/370x220",
            "icon": " ",
            "url": "#",
            "title": " ",
            "text": " ",
            "button": " "
        },
        "banner3": {
            "image": "webdav:site/banner/home2/h2-img-3.jpg",
            "placeholderImage": "http://via.placeholder.com/370x220",
            "icon": " ",
            "url": "#",
            "title": " ",
            "text": " ",
            "button": " "
        }
    }

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

"blockBanner2": {
            "heading": " ",
            "banner1": {
                "image": "webdav:site/banner/home2/4.jpg",
                "placeholderImage": "http://via.placeholder.com/1170x220",
                "icon": " ",
                "url": "#",
                "title": " ",
                "text": " ",
                "button": " "
            }
        }

SB Supper Category

you should reset the specify category ID for properly in the language file lang/en.json. Find key sb_themes › sb_supper_category:

"sb_supper_category": {
            "view_all": "View All",
            "noItem": "specify category ID to display module in the language file lang/en.json. Find key sb_themes › sb_supper_category > category_auto > id",
            "category_1": {
                "id": "29",
                "image": " ",
                "placeholderImage": "http://via.placeholder.com/975x180"
            },
            "category_2": {
                "id": "35",
                "image": " ",
                "placeholderImage": "http://via.placeholder.com/975x180"

            },
            "category_3": {
                "id": "25",
                "image": " ",
                "placeholderImage": "http://via.placeholder.com/975x180"
            }
        },

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:

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

SB Category Slider

Form left: Show product discount
Form right: Show product new, total number product = 9

you should reset the specify category ID for properly in the language file lang/en.json. Find key sb_themes › so_category_slider:

"so_category_slider": {
            "view_all": "View All",
            "noItem": "specify category ID to display module in the language file lang/en.json. Find key sb_themes › so_category_slider > category_auto > id",
            "category_1": {
                "id": "29"
            },
            "category_2": {
                "id": "25"
            }
        }

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

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

Home 3

Note

General section of home 1 and 3, Will not be written here here. Please read at home 1

Home 3 - SB Banner

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

"home3Services": {
            "heading": " ",
            "banner1": {
                "image": " ",
                "url": "#",
                "icon": "check",
                "title": "Official Revo Shop",
                "text": " over 1100 products online",
                "button": " "
            },
            "banner2": {
                "image": " ",
                "url": "#",
                "icon": "check",
                "title": "Free shipping and returns",
                "text": " for members",
                "button": " "
            },
            "banner3": {
                "image": " ",
                "url": "#",
                "icon": "check",
                "title": "Same-day dispatch",
                "text": " before 8pm (Mon-Fri)",
                "button": " "
            }
            
        }

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

3. the language file en.json in the File Editor, find section sb_revo › blockBanner1

4. the language file en.json in the File Editor, find section sb_revo › home3FeatureCat

5. the language file en.json in the File Editor, find section sb_revo › blockBanner2

SB Extraslider (New Product, Featured Products, Best Sellers)

Custom module (New Product, Featured Products, Best Sellers) of Bigcommerce

You can configure number of products in Theme Editor > Module:

Home 4

Note

General section of home 1 and 4, Will not be written here here. Please read at home 1

Home 4 - SB Banner

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

"home3Services": {
            "heading": " ",
            "banner1": {
                "image": " ",
                "url": "#",
                "icon": "check",
                "title": "Official Revo Shop",
                "text": " over 1100 products online",
                "button": " "
            },
            "banner2": {
                "image": " ",
                "url": "#",
                "icon": "check",
                "title": "Free shipping and returns",
                "text": " for members",
                "button": " "
            },
            "banner3": {
                "image": " ",
                "url": "#",
                "icon": "check",
                "title": "Same-day dispatch",
                "text": " before 8pm (Mon-Fri)",
                "button": " "
            }
            
        }

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

3. the language file en.json in the File Editor, find section sb_revo › home4BlockBanner1

4. the language file en.json in the File Editor, find section sb_revo › home4BlockBanner2

SB Top Deal

You can configure number of products in Theme Editor > Module:

you should reset the specify category ID for properly in the language file lang/en.json. Find key sb_themes › sb_topdeals_home4:

"sb_topdeals_home4":{
            "heading": "Our Top Deals",
            "viewAll": "View All",
            "endIn": "End in",
            "noItem": "Has no item discount to show",
            "noCategory": "specify category ID to display module in the language file lang/en.json.
 Find key sb_themes › sb_deals > category_auto > id",
            "countdown": "11/23/2018",
            "category_1": {
                "id": "84",
                "image": "webdav:site/banner/home4/4.jpg",
                "placeholderImage": "http://via.placeholder.com/285x375",
                "url": "#"
            }
        },

id - is the number is category ID.
image - is the image URL banner
placeholderImage - is the image URL placeholder
url - is the link URL banner

Note

Note: this block only works for the only 1 categories.

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.

Note

Note: We have right to answer or not answer you how to edit the theme's source code.

User Guide - BigCommerce SB Revo

New to BigCommerce?

The BigCommerce dashboard

Theme Installation BigCommerce

Instruction configured image as demo

Importing Web pages

Update Package Theme

Theme Editor

Edit language file

How do I translate all of my theme

Edit template files

Activate a theme style

Custom Css theme

How to set up a default picture to products

Theme settings

Styles

Storewide

Header & Footer

SB Theme Setting

1.Configure General:

2.Configure Product Category

3.Product Detail

Home Page

Home page 1: Position sections

Home page 2: Position sections

Home page 3: Position sections

Home page 4: Position sections

Module

Product

Button & icons

Forms

Optimized Checkout

Customization

Product Label & Countdown

Header

Header Styles

Top Banner

Promotion Carousel

MegaMenu

MegaMenu Horizontal

Adding Web Pages For MegaMenu Horizontal

MegaMenu Vertical

Main Slideshow / Carousel

All Banner

Banner Slideshow

Featured Categories

Block Banner 1 and 2

Banner App Store

Page Category - Banner

Page Product - Banner

SB Deals

SB Listingtab

SB Extraslider

SB Latestblog

SB Brand

Footer

SB Banner - Custom Services

SB Menu Footer

Custom Nav pages

Contact Us

Social Follow us

Sign up for Newsletter

Credit Link

Payment Icon

Home 2

Home 2 - SB Banner

SB Supper Category

SB Category Slider

Home 3

Home 3 - SB Banner

SB Extraslider (New Product, Featured Products, Best Sellers)

Home 4

Home 4 - SB Banner

SB Top Deal

Help & Support

What do we support and do not support?

We Do Support:

We Do Not Support: