Verve Theme Documentation

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.

Colors

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.

Fonts

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:

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>

	</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>

	</div>

	</div>

	</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>

	</div>

	</div>

	</div>

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

The theme will add pages to your menu. If you want to add menu items for categories, you can create a new page & select 'Link to another website or document'

Note: - You can use the 'relative' path for internal pages. Ex: /living-room/

To create a menu 'sub-heading' you can simply add an asterisk before the page-name. Example: *Decor

The Verve theme supports custom header images. Header images can be added to pages, categories or products.

1. First insert the image in the 'wysiwyg' text editor (page content section).
2. You can then click on the 'advanced' tab
3. In the ID field enter 'vr-header'. - That's it, the theme will know to move that image to the header position.

Note: - Make sure you use wide images for header images. Recommended 1600px+

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.

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.