“Villenoir” Documentation by “Cristian Gogoneata” v1.0


“Villenoir”

Created: 21/02/2017
By: Cristian Gogoneata
Email: cristiangogoneata@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Theme setup
  2. Product settings
  3. Storefront settings
  4. Blog settings
  5. Social media and Newsletter
  6. PHP Code Explanation (If your theme uses PHP)
  7. Flash (If your theme uses Flash)
  8. API Usage (If your theme uses an API)
  9. Any additional unique features that need an overview

A) Theme setup - top

This section covers some essentials needed to get your theme up and running. Customization settings can be found in the sections below.

Theme variation

Villenoir comes packaged with one theme variation that curate the fonts, colors, and general style of your store. Check out our store demo to see it in action.

Variations

To return the variation to its default state, you can click Reset Theme Variant at the bottom of your theme editor, which will revert any customizations you've made on a theme variant.

Add your first product

To add a product to your store, navigate to Products > Add from your dashboard.

See BigCommerce's support article on Adding a Product for a full overview of product settings, including brands, product options, and tips on how to take better product photos.

Upload a store logo

Your store's logo provides branding for your site and a clickable link to return to the homepage. The logo will appear in the header of your site.

To replace your store title with a logo image, go to Storefront Design > Design Options and then click the Logo tab.

Add logo

Set up a carousel

The homepage carousel displays up to five images with a heading, subtitle, and a call-to-action button that can link to any page within your store or an external site. To add images to your Carousel, go to Storefront Design > Design Options and click the Carousel & Social Media tab.

See BigCommerce's support article on Using the Carousel Builder for a full overview.

Carousel

The supported file types are JPEG, GIF, and PNG. The recommended images size is at least 1200px wide, for example the ones in the demo have 1800x850px. But most importantly, you'll want slide images that are consistent in dimension.

Add a contact page

From your sidebar control panel, go to Content > Web Pages and then click Create a Web Page at the top of your Pages list.

Under Web Site Link, enable the Allow people to send questions/comments via a contact form option. Then, under Web Page Details, enter a name for the Contact page. The Page URL will auto-fill based on the page name.

You can also insert content (such as text and images) in the Page Content area that will appear above the Contact Form.

Contact


B) Product settings - top

Product images and layout

By default, your product images will not be not cropped in any way. However, under Global Theme Settings in your theme editor, you can select the option to Crop and Force Product Images to Fill Container. This will ensure that all images are the same size.

In your theme editor, you can select how many Product reviews and Related Products to display on product pages.

Category Banner

On category pages, you can create an image banner by uploading a category image. From your Dashboard, go to Products > Product Categories and then select a category. Under Category Details, choose a file to upload for Category image.


C) Storefront settings - top

Typography and colors

Under the Typography section of the theme editor, you can change the fonts of your storefront. You can change the font family and size of the Logo, Body and Headings.

Further down bellow you'll find the color options for every element from the theme, customize them as you wish.

Favicon

A favicon is the small graphic that appears to the left of the page title at the top of your browser window.

To upload a custom favicon for your store, first create an image 16 x 16px or 32 x 32px in dimension. The image must be saved in ICO, JPG, GIF, or PNG format.

Go to Store Design > Design Options, then click More > Favicon. Click Choose File to select the favicon from your computer. Click Upload Favicon.

Featured, New, and Popular Products

The featured, new, and popular products sections are automatically displayed on your home page. In your theme editor, under the Products >> Homepage section, you can use the dropdowns to control how many products are displayed or disable them from being shown.

Banners

Banners allow you to add promotional links and images throughout your store to advertise special deals and discounts to your shoppers.

Go to Marketing > Banners to begin. Banners can be added to the Homepage, a specific category or brand, and the results page. Use the rich text editor to add text and links. You can enable your banner or choose to display it between specific dates.

In this theme we used banners to display the featured icons bellow the slider. You can find the HTML code here: Banner Homepage About Us code just copy/paste it in the HTML source editor.

Banners

Footer

Your footer contains menus and contact information that you can toggle on or off. Menus for Pages, Categories, and Brands will be auto-generated, and you can also show your Shop address / phone number.

The contact info in your footer can be edited from your control panel under Settings > Store Profile in the available fields.

The payment icons in your footer can be edited from your theme editor under Payment icons.


D) Blog settings - top

Post updates on products, upcoming events, and other news in your shop’s built-in blog. Navigate to the Blog settings by clicking on Content > Blog.

Set up a blog

To name your blog, click on the gear icon under the Published tab. Name your blog in the Blog Title field, and set the URL in the Blog URL field. You can also enable or disable Disqus Comments on this page. Click Save Settings to save the Blog name and URL.

Create a blog post

To add a post, navigate back to the main Blog Settings page by going to Content > Blog and click the + icon under the Published tab. Give your post a title in the Title field, write the content and add images in the Body Text Editor, and enter the Author of the blog in the Author field. You can also add tags for each post in the Tags section. To add a tag, type a tag in the Tags field, and hit Enter on the keyboard to separate the tags.

To upload an image that will appear as the post’s Thumbnail, choose a file and clicking Upload in the Summary thumbnail image section.


E) Social media and Newsletter - top

Social Links

Go to Store Design > Design Options and click the Carousel & Social Media tab. Scroll down to the Social Media section, and input the your social media profile links to the corresponding icon beside Available Networks. Make sure you include http:// before the link.

Newsletter

To setup the newsletter, go to your Marketing > Settings > Email Marketing.

See BigCommerce's support article on Newsletter and Email Marketing Settings for a full overview.


Thank you!

Go To Table of Contents