Smart Glasses - Single Product

Bigcommerce Responsive Theme - Userguide

Created: 05/05/2019
By: Apollotheme

THANK YOU FOR PURCHASING OUR THEME!

Here are some basics on installing, configuring and customizing the Smart Glasses,

BEFORE WE GO

The theme and the sample data is provided "as is". Customizing code and other design related issues can be done as freelance work on a $50-100 hourly rate only with Paypal and/or Skrill, if Smart Glasses's available. If you are new to Bigcommerce, please understand I cannot fix your site for free. Apollotheme would love to help everyone but there is no time. I suggest reading documentation available online regarding using Bigcommerce, server requirements, etc.

If you like this theme please rate it.

Have a wonderful rest of your day!

Apollotheme Team

THEME INTRODUCTION

Responsive Bigcommerce theme "Smart Glasses" is an elegant eCommerce Bigcommerce Smart Glasses theme that charms your stores with the professional design, a sleek layout and functional features. The site makeover is well suited for Smart Glassess about clothing, shoes, glasses and accessories.

At the first glance, you may fall for the beautiful imagery display of "Smart Glasses" which is catchy, smooth and mostly animated. "Smart Glasses" supports responsive web design along with Off-canvas menu for mobile device accessibility."Smart Glasses" also settings to get your store in multiple store views.

Getting Started

Getting up and running with Providence is quick and easy. Simply create a Bigcommerce account, purchase the theme and upload it. You'll then have the opportunity to customize it to your liking before publishing it as your main theme.

If that sounds like a lot, don't worry… each step is outlined in detail below and it's entirely possible to go from scratch to a store running Providence in under ten minutes!

Purchasing Providence

You could buy theme at providers such as: ThemeForest , Bigcommerce ...

Installing Providence

After you have followed the 'Purchasing Providence' steps above, you can download your theme and easily install your own theme for your online store based on our guideline below.

- Below is the image size we used in demo (You can refer them to build your website)

- You must upload/import images had the same size. The product’s image must had the same ratio.

- Ratio = (Width/height). Example: Product image had size (400px x 200px) => ratio = 400/200 = 2. You must upload all product image for website has ratio = 2.

AP Smart Glasses

Note: For display perfectly on the webpage, you just need to follow the exact image dimension and steps we given below, if your current image does not fit, you can use
software like photoshop to crop the image to the given dimension. These are most typical images of Smart Glasses Theme:

Image Dimension

STT	Image Name	Image Size	Demo
1	Slideshow Image	1600x880	View image
2	Product Image	660x315	View image
3	Banner Image	800x540 1600x640 600x580 650x350	View image View image View image View image
4	Logo	160x30	View image

I. Install theme

If you are new with Bigcommerce. We advise reading and familiarizing yourself with the Bigcommerce Manual.

To install the theme, log in to your Bigcommerce

Upload theme

II. Edit Currency

Upload theme

Link Detail Here

III. Create page

1. Creating a Web Content Page

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

Upload theme

Pages you created will be shown on the navigation menu.

Notes: Bigcommerce currently supports sub-menu for categories only, if you nested child page within parent page, child page will not be shown.

Upload theme

Link Detail Here

- General Setting

- When store administrators use Theme Editor to customize your theme for their store, the store's resulting configuration settings are saved to a separate configuration service at BigCommerce.

Upload theme

Theme Editor is a friendly user interface that allows BigCommerce merchants to modify their storefront's look and feel without coding.
Users customize their storefront theme by selecting from among graphical examples and menu options.

Upload theme

Link About Product List

Upload theme

Slideshow

1.Carousel builder

- Go to Storefront › Home Page Carousel to edit slideshow:

Carousel Builder
2.Carousel configuration

- Go to Theme editor => Carousel

Fillter Products

- Product filtering, also known as faceted search, allows shoppers to refine product searches based on multiple attributes such as price, size, ratings and more.

Detail Here

Social Icons

- Go to Storefornt > Social Media Links

Home Page

1. Banner Marketing - Banner Top

Before create banner, remember to upload your images to the Image manager

Click View Full Size to see the generated link by bigcommerce

In the Bigcommerce Control Panel, go to Marketing > Banners to edit banner

Banner top

Copy all this html code to the editor above
 <div class="section-text container"> <div class="st-title"> <h4>SMART GLASSES</h4> <h6>SMARTER EYEWEAR. BUILT BY ATHLETES FOR ATHLETES</h6> </div> <div class="st-content row"> <div class="st-content-block col-md-4 col-sm-4 col-xs-12 wow fadeInLeft"> <h5>IMPROVE</h5> <p>Adapt your performance in real-time and reach your potential.</p> </div> <div class="st-content-block col-md-4 col-sm-4 col-xs-12 wow fadeInUp"> <h5>SHOOT & SHARE</h5> <p>Smart glasses is always ready to take photos and videos from your rides. You can easily download & share straight from your phone.</p> </div> <div class="st-content-block col-md-4 col-sm-4 col-xs-12 wow fadeInRight"> <h5>TRACK YOUR ACTIVITY</h5> <p>Steps, calories, and distance. Get reminders to move</p> </div> </div> <div class="ajaxproduct" style="padding-top: 75px;" data-ap-category-url="/shop-all/"> </div> </div>  <p> </p>  <div class="col-md-12 col-sm-12 no-padding col-xs-12 section-two-banners"> <div class="stb-block col-md-6 col-sm-6 col-xs-12 no-padding"><img src="https://cdn11.bigcommerce.com/s-lq0a1t7jnu/product_images/uploaded_images/niche-09-banner9-1.jpg" alt="strollik-banners" /> <div class="content"><img class="small-img wow bounceInUp" src="https://cdn11.bigcommerce.com/s-lq0a1t7jnu/product_images/uploaded_images/shape9-1.png" alt="strollik-banners" /> <h4 class="wow fadeInRight" style="color: #fff;">RIDE BETTER</h4> <p class="wow fadeInRight" style="color: #fff;">Your handlebars are the last thing you should be looking at mid-ride. That’s why training with SmartGlasses is a evelation. No matter where you’re looking, your numbers are always right where you need them.</p> </div> </div>  <div class="stb-block col-md-6 col-sm-6 col-xs-12 no-padding"><img src="https://cdn11.bigcommerce.com/s-lq0a1t7jnu/product_images/uploaded_images/niche-09-banner9-2.jpg" alt="strollik-banners" /> <div class="content"><img class="small-img wow bounceInUp" src="https://cdn11.bigcommerce.com/s-lq0a1t7jnu/product_images/uploaded_images/niche-09-shape9-2.png" alt="strollik-banners" /> <h4 class="wow fadeInRight" style="color: #fff;">RUN SMARTER</h4> <p class="wow fadeInRight" style="color: #fff;">Looking at your wrist means breaking form, breaking stride, and losing focus. With Recon Jet, the numbers are never more than a glance away. That means training smarter isn’t harder.</p> </div> </div> </div>  <p> </p>  <div class="element-tabs"> <div class="container"> <h2>LIGHTWEIGHT. ADVANCED TECHNOLOGY.</h2> <p class="et-subtitle">Smart glasses is designed to feel like your existing cycling glasses, which is why they are lightweight, aerodynamic and designed with human ergonomics in mind.</p> <div class="tab"> <div class="tablinks active" onclick="openCity(event, 'tab1')">DISPLAY</div> <div class="tablinks" onclick="openCity(event, 'tab2')">CAMERA</div> <div class="tablinks" onclick="openCity(event, 'tab3')">FRAMW</div> <div class="tablinks" onclick="openCity(event, 'tab4')">POWER</div> <div class="tablinks" onclick="openCity(event, 'tab5')">CONTROL</div> <div class="tablinks" onclick="openCity(event, 'tab6')">AUDIO</div> </div>  <div id="tab1" class="tabcontent" style="display: block;"><img class="small-img wow bounceIn" src="https://cdn11.bigcommerce.com/s-lq0a1t7jnu/product_images/uploaded_images/niche-09-glasses9-1.png" alt="img-element-tabs" /> <h3>INTELLIGENT DISPLAY</h3> <p>Glasses display is equivalent to a 30” screen viewed from 7 feet (2 m) away. It’s crisp and vibrant in all lighting conditions—and thanks to our patented Glance Detection technology, it wakes up instantly when you glance down, then turns off again when you look away, minimizing distractions and maximizing power efficiency</p> </div>  <div id="tab2" class="tabcontent"><img class="small-img wow bounceIn" src="https://cdn11.bigcommerce.com/s-lq0a1t7jnu/product_images/uploaded_images/glasses9-2.png" alt="img-element-tabs" /> <h3>CAMERA</h3> <p>Glasses display is equivalent to a 30” screen viewed from 7 feet (2 m) away. It’s crisp and vibrant in all lighting conditions—and thanks to our patented Glance Detection technology, it wakes up instantly when you glance down, then turns off again when you look away, minimizing distractions and maximizing power efficiency</p> </div>  <div id="tab3" class="tabcontent"><img class="small-img wow bounceIn" src="https://cdn11.bigcommerce.com/s-lq0a1t7jnu/product_images/uploaded_images/glasses9-4.png" alt="img-element-tabs" /> <h3>SLEEK AERODYNAMIC FRAMES.</h3> <p>Glasses display is equivalent to a 30” screen viewed from 7 feet (2 m) away. It’s crisp and vibrant in all lighting conditions—and thanks to our patented Glance Detection technology, it wakes up instantly when you glance down, then turns off again when you look away, minimizing distractions and maximizing power efficiency</p> </div>  <div id="tab4" class="tabcontent"><img class="small-img wow bounceIn" src="https://cdn11.bigcommerce.com/s-lq0a1t7jnu/product_images/uploaded_images/glasses9-5.png" alt="img-element-tabs" /> <h3>SWAPPABLE LITHIUM-ION BATTERY</h3> <p>Glasses display is equivalent to a 30” screen viewed from 7 feet (2 m) away. It’s crisp and vibrant in all lighting conditions—and thanks to our patented Glance Detection technology, it wakes up instantly when you glance down, then turns off again when you look away, minimizing distractions and maximizing power efficiency</p> </div>  <div id="tab5" class="tabcontent"><img class="small-img wow bounceIn" src="https://cdn11.bigcommerce.com/s-lq0a1t7jnu/product_images/uploaded_images/glasses9-6.png" alt="img-element-tabs" /> <h3>SWAPPABLE LITHIUM-ION BATTERY</h3> <p>Glasses display is equivalent to a 30” screen viewed from 7 feet (2 m) away. It’s crisp and vibrant in all lighting conditions—and thanks to our patented Glance Detection technology, it wakes up instantly when you glance down, then turns off again when you look away, minimizing distractions and maximizing power efficiency</p> </div>  <div id="tab6" class="tabcontent"><img class="small-img wow bounceIn" src="https://cdn11.bigcommerce.com/s-lq0a1t7jnu/product_images/uploaded_images/glasses9-7.png" alt="img-element-tabs" /> <h3>IMMERSIVE AUDIO FIELD.</h3> <p>Glasses display is equivalent to a 30” screen viewed from 7 feet (2 m) away. It’s crisp and vibrant in all lighting conditions—and thanks to our patented Glance Detection technology, it wakes up instantly when you glance down, then turns off again when you look away, minimizing distractions and maximizing power efficiency</p> </div> </div> </div> 
You should not change the HTML structure but you can change content of HTML in line color. Follow tutorial below

Detail Here

1.1 SECTION TEXT INTRO

Create button "Add To Cart"

1. Create Category

2. Add one product to Category

3. Paste url

1.2 SECTION TWO BANNERS

Get url image by: Storefont ==> Image Manager

Click "View Full Size" on image

Get link and paste to html code

1.3 SECTION TABS

2. Block Banner Bottom

In the Bigcommerce Control Panel, go to Marketing > Banners to edit banner

Banner bottom

Copy all this html code to the editor above
 <div class="col-md-12 col-xs-12 col-sm-12 no-padding section-big-banner"><img src="https://cdn11.bigcommerce.com/s-lq0a1t7jnu/product_images/uploaded_images/banner-glasses.jpg" alt="strollik-banners" /> <div class="content container wow fadeInDown"> <h3 class="title" style="color: #fff;">SMART MEETS STYLE</h3> <p style="color: #999;">At a basic level, the functions as glasses, meaning you will be able to order the lenses you depend on, whether they are prescription, non-corrective (plano), or sunglasses. The frames come with integrated technology, meaning your glasses will be able to do more than meets the eye.</p> </div> </div>  <p> </p>  <div class="container no-padding section-banner-text"> <div class="sbt-left wow fadeInLeft col-md-5 hidden-sm hidden-xs"><img src="https://cdn11.bigcommerce.com/s-lq0a1t7jnu/product_images/uploaded_images/niche-09-banner9-3.jpg" alt="strollik-banners" /></div> <div class="sbt-right col-md-7 col-sm-12 col-xs-12 wow fadeInRight"> <h4 class="title">PRODUCT SPECS</h4> <div class="content"> <div class="sbt-block col-md-6 col-sm-6 col-xs-12"> <h5>WEIGHT AND DIMENSIONS</h5> <div class="list-text"> <p>Product Dimensions: 160x180x50mm</p> <p>Product Weight: 65gr</p> <p>Vista Module: 45 x 12 x 5.5 mm</p> </div> </div>  <div class="sbt-block col-md-6 col-sm-6 col-xs-12"> <h5>BATTERY</h5> <div class="list-text"> <p>Integrated battery</p> <p>Battery type: Lithium ion</p> <p>Rechargeable via MicroUSB connector</p> <p>Battery life: 5 hours typical use</p> </div> </div>  <div class="sbt-block col-md-6 col-sm-6 col-xs-12"> <h5>DISPLAY</h5> <div class="list-text"> <p>Widescreen WQVGA 16:9 microdisplay</p> <p>Sunlight readable – high contrast</p> <p>Virtual image appears is 3x larger than typical bike computer</p> <p>Field of View (FOV) 10.68</p> </div> </div>  <div class="sbt-block col-md-6 col-sm-6 col-xs-12"> <h5>CONNECTIVITY</h5> <div class="list-text"> <p>Bluetooth sensors (BLE)</p> <p>ANT+ sensors</p> <p>Micro USB – recharging port</p> </div> </div> </div> </div> <div class="sbt-line"> </div> </div>  <p> </p>  <div class="section-discount container no-padding wow fadeInUp"> <h2>GET 10% OFF<br />YOUR FIRST ORDER</h2> <p>As a welcome to all our new customers we have a special code which you <br />can use to get 10% off your first order.</p> <div class="ajaxproduct" style="padding-top: 35px;" data-ap-category-url="/shop-all/"> </div> </div> 
2.1 SECTION BIG BANNER

2.2 SECTION BANNER&TEXT

2.3 SECTION DISCOUNT

2.3.1 Paste url (same url with SECTION TEXT INTRO )

Store Profile

Store Setup ==> Store Profile

Full Document Bigcommerce