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