Strollik Store

Bigcommerce Responsive Theme - Userguide

Created: 05/25/2017
Latest update: 05/25/2017
By: Apollotheme

THANK YOU FOR PURCHASING OUR THEME!

Here are some basics on installing, configuring and customizing the Strollik Store,

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 Strollik Store'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 "Strollik Store" is an elegant eCommerce Bigcommerce Strollik theme that charms your stores with the professional design, a sleek layout and functional features. The site makeover is well suited for Strollik stores about clothing, shoes, glasses and accessories.

At the first glance, you may fall for the beautiful imagery display of "Strollik Store" which is catchy, smooth and mostly animated. "Strollik Store" supports responsive web design along with Off-canvas menu for mobile device accessibility."Strollik Store" 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 Strollik Store

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 Strollik Theme:

Image Dimension

STT	Image Name	Image Size	Demo
1	Slideshow Image	1400x780	View image
2	Product Image	480x480	View image
3	Banner Image	370x480 1400x680 830x830 1400x788	View image View image View image View image
4	Image Carousel	485x570	View image
5	Image Testimonial	80x80	View image
6	Blog Image	1140x620	View image
7	Breadcrumb Image	1900x400	View image
8	Gallery Image	600x600	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.

Link Detail Here

IV. Import Data Product Sample

- Go to Products › Import Products.

- Fill out your preferred settings under Import Details.Reference link:

Link Import Product

- 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

Megamenu

1.Create menu

Detail here

2.Configure Ui Megamenu

- Go to Theme Editor -> -> Header -> Scroll to User Menu navigation

Slideshow

1.Carousel builder

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

Carousel Builder
2.Carousel configuration

- Go to Theme editor -> Carousel

Home Page

1. Banner Marketing

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 id="productfeatured" class="container"> <div class="boxApollo"> <div class="apolloHeading"> <h3 class="page-subheading heading-style1"><span class="subheading-text">Overview</span> <span class="description">introduction</span></h3> </div> <div class="apolloDescription row clearfix"> <div class="large-4 medium-6 small-12 columns text-column"> <h4 class="space-30">Product description</h4> <p>Head out with your little one for a jog with the Strolik in the Arctic style, which features an adjustable canopy with a peek-a-boo window and covered sunroof for protection from the elements.</p> <p>The handy parent tray includes two cup holders, and the covered compartment above an extra-large storage basket allows you to carry essentials on your jog.</p> <p>You can connect your compatible car seat (not included) for a complete travel system, and the lightweight steel frame.</p> </div> <div class="large-4 img-columns columns"><img class="__mce_add_custom__" title="featuredproduct-rs.jpg" src="https://apollo-demoshop9.mybigcommerce.com/product_images/uploaded_images/featuredproduct-rs.jpg" alt="featuredproduct-rs.jpg" /></div> <div class="large-4 medium-6 small-12 columns text-column"> <h4 class="space-30">Product highlights</h4> <ul class="list-unstyled list-circle"> <li>Keep your child out of the sun and wind with the adjustable canopy with a peek-a-boo window and covered sunroof</li> <li>Parent tray includes two cup holders and a convenient, covered compartment above an extra-large storage basket</li> <li>Connect your compatible car seat (not included) for a complete travel system</li> <li>Lightweight steel frame construction with an effortless trigger-fold easily reduces the stroller to a compact unit for storage or travel</li> </ul> </div> </div> </div> </div>  <div class="image-productextra"><img class="__mce_add_custom__" title="productextra-rs.jpg" src="https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/productextra-rs.jpg" alt="productextra-rs.jpg" /> <div class="productextra-caption"> <div class="text_first" style="color: #ffffff;">Protection from the</div> <h3 style="color: #ffffff;">Elements</h3> <p style="color: #ffffff;">The adjustable canopy with a peek-a-boo window and covered sunroof provides protection from the sun and wind.</p> <a class="btn btn-lg btn-outline" href="https://store-lqyiffiqi0.mybigcommerce.com/products/featured-product">discover now</a></div> </div>  <div class="block_homehtml "> <div class="container"> <div class="row"> <div class="small-6 columns"> <div class="boxApollo"> <div class="apolloHeading"> <h3 class="page-subheading heading-default"><span class="subheading-text">Features</span> <span class="description">the key</span></h3> </div> <div class="feature-box"> <div class="fbox-image"><img class="__mce_add_custom__" title="home-html1.png" src="https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/home-html1.png" alt="home-html1.png" /></div> <div class="fbox-content"> <div class="fbox-body"> <h4>All terrain suitability</h4> </div> <p class="description">As the inventors of the world's first modular stroller, we are pioneers in our industry, setting the standards and trends for the rest to follow.</p> </div> </div> <div class="feature-box"> <div class="fbox-image"><img class="__mce_add_custom__" title="home-html2.png" src="https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/home-html2.png" alt="home-html2.png" /></div> <div class="fbox-content"> <div class="fbox-body"> <h4>Safety and Security</h4> </div> <p class="description">Our engineers apply innovative thinking, well thought-through design and vast years of experience to ensure exceptional performance and quality in each one.</p> </div> </div> <div class="feature-box"> <div class="fbox-image"><img class="__mce_add_custom__" title="home-html3.png" src="https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/home-html3.png" alt="home-html3.png" /></div> <div class="fbox-content"> <div class="fbox-body"> <h4>Care and Cleaning</h4> </div> <p class="description">Keep your child out of the sun and wind with the adjustable canopy with a peek-a-boo window and covered sunroof</p> </div> </div> <a class="btn btn-lg btn-outline" href="https://store-lqyiffiqi0.mybigcommerce.com/products/strollik-c4">View all features</a></div> </div> </div> </div> </div>  <div class="design-slick-index"> <div class="apolloHeading"> <h3 class="page-subheading heading-style1"><span class="subheading-text">Design</span> <span class="description">The smartest</span></h3> </div> <div class="block-design-slick"> <div class="item media"> <div id="videoPopup_1" class="videoPopup" style="display: none;"> <div class="videoBox"> <div class="videoContainer"><iframe src="https://www.youtube.com/embed/JwDnzj44vQU" frameborder="0"></iframe></div> </div> </div> <div class="image pull-left hidden-sm hidden-xs"><img class="__mce_add_custom__" title="design-image-1-rs.jpg" src="https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/design-image-1-rs.jpg" alt="design-image-1-rs.jpg" /></div> <div class="content body-media text-center"> <h3 class="design_title">Keep rolling</h3> <div class="design_description">The lockable front swivel wheel, all-terrain bicycle tires<br /> and footrest reflectors for low-light visibility help make<br /> your jog pleasant and safe.</div> <div class="button-video"><a class="playVideo" href="#videoPopup_1"><span class="fa fa-play-circle-o"><em>See It In Action</em></span></a></div> </div> </div>  <div class="item media"> <div id="videoPopup_2" class="videoPopup" style="display: none;"> <div class="videoBox"> <div class="videoContainer"><iframe src="https://www.youtube.com/embed/JwDnzj44vQU" frameborder="0"></iframe></div> </div> </div> <div class="image pull-left hidden-sm hidden-xs"><img class="__mce_add_custom__" title="design-image-2-rs.jpg" src="https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/design-image-2-rs.jpg" alt="design-image-2-rs.jpg" /></div> <div class="content body-media text-center"> <h3 class="design_title">Head Barrie</h3> <div class="design_description">The lockable front swivel wheel, all-terrain bicycle tires<br /> and footrest reflectors for low-light visibility help make<br /> your jog pleasant and safe.</div> <div class="button-video"><a class="playVideo" href="#videoPopup_2"><span class="fa fa-play-circle-o"><em>See It In Action</em></span></a></div> </div> </div>  <div class="item media"> <div id="videoPopup_3" class="videoPopup" style="display: none;"> <div class="videoBox"> <div class="videoContainer"><iframe src="https://www.youtube.com/embed/JwDnzj44vQU" frameborder="0"></iframe></div> </div> </div> <div class="image pull-left hidden-sm hidden-xs"><img class="__mce_add_custom__" title="design-image-3-rs.jpg" src="https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/design-image-3-rs.jpg" alt="design-image-3-rs.jpg" /></div> <div class="content body-media text-center"> <h3 class="design_title">Easy storage</h3> <div class="design_description">The effortless trigger-fold reduces the stroller's<br /> lightweight steel frame to a compact unit for<br /> simple travel.</div> <div class="button-video"><a class="playVideo" href="#videoPopup_3"><span class="fa fa-play-circle-o"><em>See It In Action</em></span></a></div> </div> </div>  <div class="item media"> <div id="videoPopup_4" class="videoPopup" style="display: none;"> <div class="videoBox"> <div class="videoContainer"><iframe src="https://www.youtube.com/embed/JwDnzj44vQU" frameborder="0"></iframe></div> </div> </div> <div class="image pull-left hidden-sm hidden-xs"><img class="__mce_add_custom__" title="design-image-4-rs.jpg" src="https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/design-image-4-rs.jpg" alt="design-image-4-rs.jpg" /></div> <div class="content body-media text-center"> <h3 class="design_title">Room for more</h3> <div class="design_description">The covered compartment, extra-large storage<br /> basket and a parent tray with two cup holders help you carry<br /> what you need.</div> <div class="button-video"><a class="playVideo" href="#videoPopup_4"><span class="fa fa-play-circle-o"><em>See It In Action</em></span></a></div> </div> </div> </div> </div>  <div class="block_image360 "> <div class="container"> <div class="apolloHeading"> <h3 class="page-subheading heading-style1"><span class="subheading-text">360-Degree</span> <span class="description">See it in</span></h3> </div> <div class="block block-rotateimages"> <div class="block_content"> <div class="rotate"> <div id="rotateimages"><span>360</span></div> </div> </div> </div> </div> </div> <script type="text/javascript">// <![CDATA[ jQuery(document).ready(function($){ $("#rotateimages").spritespin({ source: ["https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/1-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/2-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/3-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/4-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/1-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/6-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/7-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/8-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/9-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/10-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/11-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/12-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/13-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/14-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/15-min.png","https://store-lqyiffiqi0.mybigcommerce.com/product_images/uploaded_images/16-min.png"], width : 877, height : 732, }); }) // ]]></script>  <div class="testimonial-slick-indext container"> <div class="apolloHeading"> <h3 class="page-subheading heading-style1"><span class="subheading-text">User reviews</span> <span class="description">Happy customer</span></h3> </div> <div class="testimonial-slick"> <div class="testimonial-item"> <h4>Better than Expected</h4> <div class="testimonial"> <p>I wanted a stroller for me and my baby that was easy to take around and workout with. I would recommend buying a stroller like this for multiple uses. My older kids are able to help me because it has a wrist strap so it won’t get away and moves better in grass, concrete and bumps.</p> </div> <div class="tesrating rating_4"> </div> <div class="avatar radius-x"><img class="img-circle" src="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/portrait1.jpg" alt="Sotudin" /></div> <div class="profile"> <h4 class="name">Sotudin</h4> <div class="job"> <p>CEO Book</p> </div> </div> </div>  <div class="testimonial-item"> <h4>Great everyday stroller</h4> <div class="testimonial"> <p>My son loves it. It seems like it’s more fun for him. Maybe because of the smoother ride. It’s also way more comfortable for my husband and I. Nomore picking up the stroller for uneven sidewalk. It may not be the most expensive jogging stroller but for moms who just want a more comfortable</p> </div> <div class="tesrating rating_3"> </div> <div class="avatar radius-x"><img class="img-circle" src="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/portrait2.jpg" alt="Aenean" /></div> <div class="profile"> <h4 class="name">Aenean</h4> <div class="job"> <p>CEO</p> </div> </div> </div>  <div class="testimonial-item"> <h4>Nothing prevents our</h4> <div class="testimonial"> <p>In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best. Nomore picking up the stroller for uneven sidewalk. It may not be the most expensive jogging stroller but for moms who just want a more comfortable ride…it’s perfect.</p> </div> <div class="tesrating rating_4"> </div> <div class="avatar radius-x"><img class="img-circle" src="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/portrait3.jpg" alt="Joe Doe" /></div> <div class="profile"> <h4 class="name">Joe Doe</h4> <div class="job"> <p>consequat auctor</p> </div> </div> </div>  <div class="testimonial-item"> <h4>Fantastic stroller</h4> <div class="testimonial"> <p>Mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system.I wanted a stroller for me and my baby that was easy to take around and workout with. I would recommend buying a stroller like this for multiple uses.</p> </div> <div class="tesrating rating_5"> </div> <div class="avatar radius-x"><img class="img-circle" src="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/portrait1.jpg" alt="Jane Doe" /></div> <div class="profile"> <h4 class="name">Jane Doe</h4> <div class="job"> <p>creative manager</p> </div> </div> </div> </div> </div>  <div class="ap-parallax"> <div class="container"> <h2 class="p-title">The ride of your life</h2> <p class="p-desc">Everything a stroller should be</p> <p><a class="btn btn-outline btn-lg" href="#">from $600 – shop now</a></p> </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 Block Introduct

Get image by: Storefont Content --> Image Manager

Click "View Full Size" on image

Get link and paste to html code

1.2 Block Banner Top

Get link and paste to html code

1.3 Block HTML Feature

Get link and paste to html code

Input big image

Get link by Storefont Content --> Image Manager

Go to Storefont Design --> My Themes --> Customize

Click "Edit Theme Files"

Go to banners.scss by: assets --> scss --> components --> stencil --> banners

Ctrl + F and search ".block_homehtml" and paste link follow this picture

1.4 Block Carousel

Get link image and paste to html code

Get link video on youtube

1.5 Block 360 Degree

Get link image and paste to html code

Each link need to be pasted in " " and separated by ,

1.5 Block Testimonial

Get link image and paste to html code

Input rating image

Go to Storefont Design --> My Themes --> Customize

Click "Edit Theme Files"

Go to banners.scss by: assets --> scss --> components --> stencil --> banners

Ctrl + F and search "tesrating" and paste link follow this picture

1.5 Block Banner Bottom

Input Banner

Go to Storefont Design --> My Themes --> Customize

Click "Edit Theme Files"

Go to banners.scss by: assets --> scss --> components --> stencil --> banners

Ctrl + F and search "tesrating" and paste link follow this picture

2. Product Homepage

1. Display store settings can be accessed in Store Setup › Store Settings

Detail Here

3. 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="gallery"> <div class="single-gallery large-3 medium-6 small-12 column no-padding"><a class="fancybox-gallery" href="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery1-rs.jpg" rel="tag"> <img src="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery1-rs.jpg" alt="gallery-strollik" /> </a></div>  <div class="single-gallery large-3 medium-6 small-12 column no-padding"><a class="fancybox-gallery" href="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery2-rs.jpg" rel="tag"> <img src="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery2-rs.jpg" alt="gallery-strollik" /> </a></div>  <div class="single-gallery large-3 medium-6 small-12 column no-padding"><a class="fancybox-gallery" href="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery3-rs.jpg" rel="tag"> <img src="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery3-rs.jpg" alt="gallery-strollik" /> </a></div>  <div class="single-gallery large-3 medium-6 small-12 column no-padding"><a class="fancybox-gallery" href="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery4-rs.jpg" rel="tag"> <img src="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery4-rs.jpg" alt="gallery-strollik" /> </a></div>  <div class="single-gallery large-3 medium-6 small-12 column no-padding"><a class="fancybox-gallery" href="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery5-rs.jpg" rel="tag"> <img src="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery5-rs.jpg" alt="gallery-strollik" /> </a></div>  <div class="single-gallery large-3 medium-6 small-12 column no-padding"><a class="fancybox-gallery" href="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery6-rs.jpg" rel="tag"> <img src="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery6-rs.jpg" alt="gallery-strollik" /> </a></div>  <div class="single-gallery large-3 medium-6 small-12 column no-padding"><a class="fancybox-gallery" href="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery7-rs.jpg" rel="tag"> <img src="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery7-rs.jpg" alt="gallery-strollik" /> </a></div>  <div class="single-gallery large-3 medium-6 small-12 column no-padding"><a class="fancybox-gallery" href="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery8-rs.jpg" rel="tag"> <img src="https://cdn6.bigcommerce.com/s-pem98hsuvh/product_images/uploaded_images/image-gallery8-rs.jpg" alt="gallery-strollik" /> </a></div> </div>  <div class="block-bottom-index"> <div class="container"> <div class="row"> <div class="block-bottom_wrap"> <div class="column large-8 medium-6 small-12 "> <div class="block-bottom clearfix"> <div class="textblock"> <div class="media"> <div class="pull-left"><em class="fa fa-automobile"><em>.</em></em></div> <div class="media-body"> <h3>free shipping</h3> <p>TOTALLY FREE SHIPPING on ALL baby gear!</p> </div> </div> </div> </div> </div> <div class="column large-4 medium-6 small-12 "> <div class="block-bottom clearfix"> <div class="textblock"> <div class="media"> <div class="pull-left"><em class="fa fa-tty"><em>.</em></em></div> <div class="media-body"> <p>customer service</p> <h3>1900 - 123 - 4567</h3> </div> </div> </div> </div> </div> </div> </div> </div> </div>
3.1 Block Gallery

Get link image: Store Content --> Image Manager

3.2 Block HTML Bottom

4. Newsletter

Configure Newsletter

Detail Here

Footer

1. About Shop

- Go to Store Setup --> Store Profile

2. Navigate Footer

- GotoStorefront --> Web Pages

3. Brand Footer

- Goto Products --> Brand

5. Block Social

- Goto Storefront --> Social Media Links

Detail Here

6. Block Payment

Goto Theme Editor --> Payment icons

You can enable/disable icon payment

Sidebar

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

Full Document Bigcommerce