Adding the Built-In Carousel to the BigCommerce Mobile Theme (Blueprint)

These instructions apply to free, legacy Blueprint themes that have not been customized and are not responsive. The BigCommerce Support Team may not be able to assist with issues that occur after applying them to a previously customized theme. As always, we recommend backing up your current theme customizations before making any changes.

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce approved agencies or our Community Forum. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

In order to complete these steps you must have a WebDAV client such as CyberDuck (Mac) or BitKinex (Windows) installed on your computer. For more information see Connecting to WebDAV.

These instructions will only cause the carousel's images to display without the overlayed text. If you'd like to have text display, consider adding it to the images themselves prior to uploading.

Downloading Your Mobile Theme Files

1. Go to Storefront Design › Design Options, then click the Mobile tab.

2. If it is not already, be sure to check the box to the left of Yes, enable the mobile theme, then click Save.

3. Click Download Template Files. Your mobile theme files will download in a single .zip file.

Download template files button highlighted in the Mobile tab

4. Create a new folder on your desktop and name it BigCommerce Mobile Theme Files.

5. Move the downloaded .zip file to the new folder on your desktop, then unzip the file using a program such as 7-Zip (Windows) or WinZip (Windows & Mac).

Updating default.html

1. In the list of theme files you unzipped, find default.html and open it in a plain text editor such as Notepad or TextEdit.

2. Place your cursor in front of the %%Panel.HomeFeaturedProducts%% variable, then press Enter or Return once.

3. On the empty line that you've just created, copy and paste the following:

%%Panel.HomeSlideShow%%

The default.html file after editing.

4. Save your changes, then close the file.

Updating default.css

1. In the list of theme files you unzipped, open the Styles folder, then find default.css. Open it in a plain text editor such as Notepad or TextEdit.

2. Place your cursor at the very end of the file, then press Enter or Return once.

3. Copy and paste the following at the end of the file:

/* Mobile Carousel */
.flexslider {
visibility: visible;
}
.slide-show-render.slide-show .flex-control-nav.flex-control-display {
paging: none;
}
#HomeSlideShow ol {
  margin: 0;
}

The default.css file after editing.

4. Save your changes, then close the file.

Uploading Your Changes

1. In your control panel, go to Server Settings File Access (WebDAV), then click Download for the WebDAV client you have installed on your computer. A connection file for that WebDAV client will download to your computer.

WebDAV connection file download buttons

2. Open the downloaded file. It will automatically open a connection to your store’s server in your WebDAV client.

3. Upload the default.html file from the BigCommerce Mobile Theme Files folder you created earlier to the mobile_template folder in your WebDAV connection.

The default.html file uploaded to WebDAV.

4. Upload the default.css file that is located in the Styles folder of the BigCommerce Mobile Theme Files folder you created earlier to the Styles folder in your WebDAV connection.

The default.css file uploaded to WebDAV.

5. Once the upload is complete, view your store on a mobile device to verify that the built-in carousel now displays on your homepage.

Go to Design Options in my store

Was this article helpful?