BigCommerce Stile Documentation

Getting Started

Introduction

Thank you for purchasing our theme. This documention explains how our theme works and helps you setup your website.

*Note - This documentation is only intended to provide theme specific guidence, for general help please visit the BigCommerce Support Center.

Mega Dropdown Menu

The stile theme includes robust support for Mega Dropdown Menus. A Mega Menu allows you to display a dropdown menu in a column based view. Follow the instructions below to add a mega menu to your website.

1. Navigate to the theme editor.
2. Click on the Header section.
3. Enter the title of the link that you want to display as a mega menu. *Note - the mega menu title is case sensitive.

Home Page

Featured Images

To add featured images to your website you will need to add a custom banner to the Home Page.

1. Use the featured images html generator below to create the featured images markup.
2. On your BigCommerce dashboard, navigate to Marketing > Banners and then click the Create Banner button.
3. Before you can paste the html into the Banner Content textarea are you must click the html icon to toggle html mode on.
4. Paste the featured images html in the Banner Content textarea.
5. Set the Show on Page setting to Home Page.
6. Enable the Visible Setting.
7. Set the Location setting to Bottom of Page.


<div class="row row-fullwidth-background module-featured-images-1">
 <div class="container">
 <div class="row">
 <div class="col-lg-12">
 <div class="row-title-wrapper">
 <h3 class="heading-1">Collections</h3>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="col-lg-3 col-md-6 module-featured-images-1-image-1 module-featured-images-column">
 <div class="inner-column-container">
 <a href="https://www.selectlayers.com">
 <img src="https://www.selectlayers.com/assets/featured-image.jpg" alt="" />
 </a>
 <div class="featured-image-details">
 <div class="featured-image-details-content">
 <div class="featured-image-title">
 <a href="#">Tables</a>
 </div>
 </div>
 <div class="featured-image-details-actions">
 <div class="featured-image-details-actions-inner">
 <div class="button-container">
 <div class="button-wrapper">
 <a class="button" href="#">Discover</a>
 </div>
 </div>
 <div class="button-container-background"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="col-lg-3 col-md-6 module-featured-images-1-image-2 module-featured-images-column">
 <div class="inner-column-container">
 <a href="https://www.selectlayers.com">
 <img src="https://www.selectlayers.com/assets/featured-image.jpg" alt="" />
 </a>
 <div class="featured-image-details">
 <div class="featured-image-details-content">
 <div class="featured-image-title">
 <a href="#">Lamps</a>
 </div>
 </div>
 <div class="featured-image-details-actions">
 <div class="featured-image-details-actions-inner">
 <div class="button-container">
 <div class="button-wrapper">
 <a class="button" href="#">Discover</a>
 </div>
 </div>
 <div class="button-container-background"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="col-lg-3 col-md-6 module-featured-images-1-image-3 module-featured-images-column">
 <div class="inner-column-container">
 <a href="https://www.selectlayers.com">
 <img src="https://www.selectlayers.com/assets/featured-image.jpg" alt="" />
 </a>
 <div class="featured-image-details">
 <div class="featured-image-details-content">
 <div class="featured-image-title">
 <a href="#">Chairs</a>
 </div>
 </div>
 <div class="featured-image-details-actions">
 <div class="featured-image-details-actions-inner">
 <div class="button-container">
 <div class="button-wrapper">
 <a class="button" href="#">Discover</a>
 </div>
 </div>
 <div class="button-container-background"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="col-lg-3 col-md-6 module-featured-images-1-image-4 module-featured-images-column">
 <div class="inner-column-container">
 <a href="https://www.selectlayers.com">
 <img src="https://www.selectlayers.com/assets/featured-image.jpg" alt="" />
 </a>
 <div class="featured-image-details">
 <div class="featured-image-details-content">
 <div class="featured-image-title">
 <a href="#">Sofas</a>
 </div>
 </div>
 <div class="featured-image-details-actions">
 <div class="featured-image-details-actions-inner">
 <div class="button-container">
 <div class="button-wrapper">
 <a class="button" href="#">Discover</a>
 </div>
 </div>
 <div class="button-container-background"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

Image Sizes

Home Page Carousel Images

The home page carousel images used on our demo site are "2560px by 1040px" The recommended minimum width is 1920px, the height does not have any size constraints.

Home Page Featured Collections

The home page featured collections used on our demo site are "253px by 310px" The recommended minimum width is 253px, the height does not have any size constraints.

Thumbnail/Full Product Images

The thumbnail product images used on our demo site are "500px by 659px" The full product images used on our demo site are "700px by 900px"

Recent/Full Blog Images

The recent blog images used on our demo site are "615px by 615px" The recommend minimum width for recent blog post images is 615px, the height does not have any size constraints. The full blog images used on our demo site are "1110px by 1110px" The recommend minimum width for full blog post images is 1110px, the height does not have any size constraints.