Verve Theme Documentation

How to quickly setup and use this theme.

  1. Go to Storefront Design › My Themes.
  2. Click the Upload Theme button.
  3. Drag the ZIP file into the Upload Theme pop-up window, or you can Select theme from your computer.
  4. Once the ZIP file has uploaded, a theme card will appear under My Themes showing theme processing progress. Click Cancel if you want to halt processing and start over.
  5. After processing, a new custom theme card will appear under My Themes.

To upload a custom favicon for your store, you'll first want to have the image itself created. It should be 16x16 pixels in dimension, and must be saved in ICO, JPG, GIF or PNG format. (ICO files can also be 32 x 32 pixels.)

  1. Go to Storefront Design › Design Options, then click More › Favicon.
  2. Click Browse, and select the favicon image from your computer.
  3. Click Upload Favicon.

To use the Style Editor go to Storefront Design › My Themes and select the Customize button. On the Themes tab click the Style Editor button to the right of the picture of your current theme.



To change a color, click on the color swatch beside the name of the area you wish to change. *Note that not every element of every theme supports color changes via the style editor.


To switch fonts, open up the Backgrounds & Fonts section. Select the fonts you wish to use from the available fonts. Click Publish at the bottom of the Style Editor to save your changes.

Adding Images to Slides

You can display up to five slides on your carousel. Unused slides won't appear on your storefront.

  1. Click on an empty slide thumbnail. The preview will change to a message telling you to add the image.
  2. The Select from your computer link.
  3. On your computer, open the folder that contains your image, then drag and drop the image from your computer to the Carousel preview box.
  4. Save your changes.

Adding Text

  1. Type your message into the field next to the type of text you want to display.
  2. Click the color button to the right of the text field to choose a different text color.

Split Heading Example

Note: - To add text 'above' the heading you can use a divider. See the example below.

In the Heading field you can enter text like the following example:

This is Your Heading | This is the text above the heading.


Reordering Slides

Click and drag a slide to move it into your preferred order. All of the text and links will be moved along with it.

Video Walkthrough


  1. Click Create a Banner.
  2. Enter a Banner Name. This is for internal purposes only, and will not be visible to your customers.
  3. Use the WYSIWYG Editor to add the content for your banner.
  4. Select which page the banner should appear on. Banners can only be added to one page at a time.
  5. Select an optional Date Range for the banner to display.
  6. Select whether or not the banner should be Visible. If you'd like to save the banner as a draft, deselect this option before saving.
  7. From the Location drop down, select whether the banner should appear at the Top of [the] page, or Bottom of [the] page.
  8. Save your changes.

Note: - If multiple banners are added to the same page and location at the same time, then they will load randomly each time a customer visits the page.

Like the banners in the demo?

You can use the below snippets and replace the images with your own.

Here is how to enter the top banner (ads).

Note: - Click on the 'html' tab on the banner wysiwyg editor.

	<div class="img-block">
<div class="img-holder"><img title="img03.jpg" src="http://verve.mybigcommerce.com/product_images/uploaded_images/img03.jpg" alt="img03.jpg" width="570" height="359" />
<div class="title-holder">
<div class="title-img"><a href="#">Essentials Up to 20% Off</a></div>
<div class="img-holder"><img title="img04.jpg" src="http://verve.mybigcommerce.com/product_images/uploaded_images/img04.jpg" alt="img04.jpg" width="570" height="359" />
<div class="title-holder">
<div class="title-img"><a href="#">Now Celebrating 15 Years</a></div>

Here is how to enter bottom banner (mid-page on homepage).

<div class="visual inner-visual" style="background: url('https://cdn6.bigcommerce.com/s-aehqp/product_images/uploaded_images/img08.jpg');">
<div class="container">
<div class="inner-holder">
<div class="info-block">
<p>Up to 40% off designer chairs</p>
<h1>New Clowe Sofas</h1>
<span class="date">On Now Until March 31</span> <a class="link" href="#">View event</a></div>

Note: - You can use these formats for any banner on available pages.

The page titles are automatically used as page headings. However you can also add a subheading. Enter it into the 'wsysiwyg' text editor (page content section). Then highlight it with your cursor and click on the 'paragraph' dropdown. Select 'Heading 2'. The theme will now use this as your page subheading.

image manager

The Image Manager allows for you to upload and store images on Bigcommerce servers. This means you may quickly reference and drop them into your Bigcommerce store anywhere that uses the built-in WYSIWYG editor, such as product descriptions, category descriptions and web pages.

Image Requirements

Images must meet the following requirements. Attempting to upload an image that does not meet these requirements can cause unexpected behavior. Image file names must be alphanumeric, and cannot contain any spaces or special characters. Supported file types are JPEG/JPG, GIF and PNG. TIF and PDF files are not supported.

Uploading Images

  1. Go to Storefront Content › Image Manager, then click Upload Images.
  2. In the popup that appears, click Choose File (or Browse) and select an image from your computer.
  3. Repeat Step 2 for each additional image you want to upload. When you are finished, click Upload.

The Verve theme has a product image 'hover' effect. The theme automatically uses the last image in the product images collection as the 'hover' image. So you can set your 'thumbnail' image & then place (drag & drop) the image you want as the hover image last.

product images

For additional support please visit the theme support here.

BigCommerce Documentation