# Bellissima Ecommerce Theme

## Premium Wordpress theme - By Team Unifato

- Created: 06/24/2012
- latest Update: 06/25/2012
- By: Chetan Chauhan
- themeforest.net/user/Unifato
- Email: unifato.themes@gmail.com

### Introduction

This theme has two different color schemes. It is much more than just a simple background change like most themes do, but instead it has the entire set of elements optimized for each of the two color skins. The two skins are Purple and White. The purple one is more elegant and focus the attention on the lighter content block. The white one on the other hand is more generic. Hopefully new skins will be added with the time.

This theme makes use of Wordpress WooCommerce plugin.

### Installing Theme

Upon downloading the package, you will find a zip file named bellissima inside the theme package.

Log into your wordpress admin and under the Appearance tab click on Themes. Click on the Install Themes button on top and then click Upload. Upload the zip file bellissima in the upload field. After that is done, activate the theme as you would activate any other theme.

The theme comes with Widgets, Custom Menus, Slider Manager, Portfolio Post Type and Theme Options for easy and quick setup.

After installing the theme, you'll need to install WooCommerce plugin. Visit this page to download WooCommerce: http://wordpress.org/extend/plugins/woocommerce/. Install and activate the plugin before proceeding to the next steps.

Install and activate the plugin before proceeding to the next steps.

### Installing Theme and Demo Content

### Setting Up Homepage Part 1

### Setting Up Homepage Part2

### Widgets and Shortcodes

### Setting Up Slider

### Setting Up Portfolio

### Importing Dummy Content

If you want to, quickly, create some dummy posts and pages, you can import a dummy content XML file to your Wordpress site. Doing this would give you a hint on how this theme works. You can even edit these sample posts and pages and use them on your site. Follow these steps:

1. The XML Dummy conntent file can be found in the root folder of the package that you downloaded.
2. In your WP Admin, under Tools section, click on Import. You might, first, be required to install the Importer plugin if yours is a new Wordpress installation.
3. In the table that appears on the Import page, click on Wordpress.
4. In the Import Wordpress page, click on Choose file. In the dialog box that appears, select the XML content file. Then click on 'Upload File and Import'.
5. In the Import Wordpress Page, select the author that you want these new posts to be assigned to. Then, to import dummy images, select Import Attachments field.
6. Click Submit. You may have to wait a few minutes for the content to be downloaded on to your server.

### Theme Options

Now that you have installed the theme, lets look at the Theme Options. In your WP admin, under Appearance tab, click on Theme Options. You'll see 4 tabs, namely: General, Styling and Slider. Let's look at them one by one.

## General

- Upload Logo : Upload your logo image file. This could be any jpeg, png or gif file. You can provide direct URL of the image file or upload it from your computer.
- Upload favicon : This is a .ico image file that browsers show next to your site's URL in the address bar. You can create your own .ico file here.
- Show Top Text Teaser : This theme allows you to show a promo bar right at the top of the pages, where you can display any kind of message for your site visitors like Coupons, News Announcements, etc. By selecting this field, you'll see another field appear, called Top Teaser Text. Here you enter the message of the promo bar.
- Headline : The content you enter in this field, is shown just below the Slider area on Homepage. You can use it to display your site's Title or your Tagline or any other message.
- Show Megamenu : The theme allows you to add a megamenu link to the menu area. When you select this field, 2 other fields appear, namely: Megamenu Title and Megamenu Content. You can use text/HTML/Shortcodes in the Megamenu Content field. For adding columns in this field you can use [col2] and [col2_last] shortcodes. More about Shortcodes can be read in the Shortcodes section.
- Show List/Grid View Filter : If you select this field, a List/Grid View selector will be displayed on the WooCommerce pages.
- Show Social Bookmarking Links :If you select this field, some social bookmarking links like, Google Plus, Tweet and Facebook Like will be displayed on the Post and Portfolio pages.
- Additional Scripts : If you want to add Google Analytics script or any other script, you can enter it into this field.

## Styling

- Default Page Layout : Select the default page layout. This layout will be used in the blog and all the inner pages.
- Heading Font : All the heading fonts including h1, h2, h3, etc will be styled using these options. The default color is #863200.
- Content Typography : All the content text would be styled using these options. The default color is #373737.
- Hyperlink Typography : All the hyperlinks would be styled using these options. The default color is #c75603.
- Theme Skin : Choose the color scheme.
- Use Skin Default Typography? : If checked, any typography option selected in the fields above would be overlooked and the default styles related to the currently selected theme skin would be applied. *Please note that the Font Face styles selected in the above fields would still be applied as selected.
- Background Image : Choose the background image. Please note that some background images might not be applied if the selected color scheme does not correspond to the the selected background image.
- Custom Styles : Any CSS styles that you add here are added to the Markup after all the stylesheets are imported.

## Slider

- Show 'Featured ' Ribbon? : If checked a red colored ribbon image would appear on the top left of the slider area.
- Pick Slides From : Pick Slides from Slider Manager or Featured Products. We'll talk about them later.
- Autoplay Slider : If checked the slider would be set to autoplay.
- Autoplay Timer : Enter the time between auto slide transitions in milliseconds. 1 second = 1000 milliseconds
- Slides per Item : When the slides are being fetched from Featured Products, you can select to show multiple images of a single product in the slider. Here, select the minimum numbers of images to show per product. Please note that for this slider to work properly, every item should have this minimum number of slide images added.

### Adding Custom Fonts

First, you'll need to select '- Add custom font -' as the value in the Font Face field of Heading or Content Typography fields. You can add any of the fonts available at Google Web Fonts at www.google.com/webfonts. Watch this video to get a better understanding of Google Fonts work:

Now, after selecting a font from Google, you'll need 2 things, as shown in the image above. The first is the font name, it could be like 'Titillium Web', 'Elsie', 'Droid Sans', etc. The second value is the script code that you copy from Google Fonts. It is in this format:

    <link href='http://fonts.googleapis.com/css?family=Elsie+Swash+Caps:400,900' rel='stylesheet' type='text/css'>

### Page Templates and Widget Areas

The theme offers several page templates, so that every page can be styled accordingly. Each page template either has its own sidebar area or no sidebar at all. Whenever you create a new page, under the Page Attributes section, you can see a Template field. All the page templates are listed in this field. The template selected there will render that page.

Let's look at the different page templates avaliable:

### Default Template

This template is used to render the posts pages, single portfolio items, single posts, etc by default. It has one sidebar area. Depending upon what item is being shown (page or post), it renders page_sidebar or post_sidebar widget area. This template can be used for general pages like FAQ, Blog, Services, etc.

### Full_Width.Template

This template doesn't have any sidebar, and thus uses the full width of the page to render the content. This template can be used for Contact Page.

### Home_Page

This template is used to render the Home Page of the theme, which contains the Slider area and several widget areas like: home_sidebar_wide, home_sidebar_one and home_sidebar_two.

### Portfolio 2 Column

This template is a full width page, and thus has no sidebar. It is used for rendering a list of Portfolio items in 2 columns.

### Portfolio 3 Column

This template is a full width page, and thus has no sidebar. It is used for rendering a list of Portfolio items in 3 columns.

### Portfolio 4 Column

This template is a full width page, and thus has no sidebar. It is used for rendering a list of Portfolio items in 4 columns.

## Other Sidebar Areas

The theme has other sidebar areas too, that are used in other sections of the theme. These include:

- shop_sidebar : This sidebar is used in all of the WooCommerce generated page templates like Shop, Single Product items, etc. However, other pages like Cart, My Account, etc will use the sidebar areas according to the page templates selected by you.
- footer_column_1 : This sidebar render the first column of the footer area in all of the pages of the site.
- footer_column_2
- footer_column_3

### Setting Up Homepage

You'll see that even after installing the theme, you don't see any slider area or wide widget areas on your site's homepage, like the ones you saw in the theme's preview. For that we'll need to setup the homepage properly. Follow these steps:

- Create a New Page and enter its title and/or content. Let's say the Title we set is Home.
- Then, under Page Attributes section (on the right side of the Post Editor), you'll find a Template field. Select Home_Page as the page's template from that dropdown menu.
- Click on Publish.
- Follow the same steps for creating a Blog Page, except for, the Title for the blog page should (of course) be different and in Template field you'll select Default Template as the page's template.
- After publishing both the pages, under wordpress Settings menu, click on Reading tab.
- On Reading Settings page, against the very first field, i.e Front Page Displays, select the radio button with this label: A Static Page(select below) and then select your Home and Blog pages. Shown below is an example:

### Slider Manager

Now that we have setup the homepage properly, you'll see that, although the slider area is being shown on the homepage, there are no slide items being displayed. Let's create some slides to show on homepage.

The Slider will fetch slides from the Slider Manager only when the 'Pick Slides From' field in the Theme Options has been checked as Slider Manager.

Under Appearance tab, click on Slider Manager. You'll see the Slider Manager page offers an easy to use user interface to quickly create a few slides. You can easily upload an image to be used in the slide, add new slides with a click of the button, drag and drop the position of the slide with respect to others and remove slides easily. However, there are some prerequisites for slider to show up properly:

- The Slide images should be exactly 750px wide and 330px high.
- A Slide Title must be provided.
- The slider area shows maximum 4 slides. So any more slides that that will not be included in the Slider.

There are 2 ways to add slides to the Slider area. One is by using the Slider Manager as discussed above. And, the other one is by adding Featured Products. We'll talk about adding slides through Featured Products later in the Slider section.

### Menus

The theme comes with an added functionality of WP menus, an effective way to create and manage custom menus. The Bellissima theme uses WP Menus to show the top menu bar.

To create the menu simply go to Appearance >> Menus and create a new menu.

After creating a menu, from the "Theme Locations" block dropdown choose the menu you've created and click Save. Then using "Pages", "Custom Links", "Categories" blocks, etc add items to your menu and Save it. You can drag and drop the menu items to easily manage the items and create dropdowns.

### Featured Images

Bellissima theme uses Featured Image functionality of Wordpress to show post thumbnails in different sections of the site like: Blog, Portfolio Pages, Widgets, etc. All the items like Pages, Posts, Portfolio items, and Product items have the Featured Image functionality enabled, thus a user can add images for any of these items.

However, in the case of the Product items, you'll see that there are additonal fields like Slider Image 1, Slider Image 2, etc below the Featured Image field. These are the fields in which we add images to the Featured Products that are included in the Slider on homepage. We'll talk about that later in the Slider section.

### Slider

The Slider Area on homepage, as mentioned earlier, fetches slide items either from the Slider Manager or Featured Products. In this section we'll talk about fetching slide items from Featured Products. Follow these steps:

- In the Theme Options, under the field 'Pick Slides From', select Featured Products. Then, in the field Slides Per Item, select the number of slide images per product.
- Select any product item, open up Edit Product page and make sure the product has a Title and some content.
- Under Product Data options, select the field Featured.
- Next, below the Featured Image field, you'll see a few fields like Slider Image 1, Slider Image 2, etc. The number of these fields will be equal to the number you've selected in the first step above, in the field Slides Per Item.
- Click on Set Slider Image 1, and using the Wordpress Media Uploader, upload an image file 750px wide and 330px high, you can also select any image from your gallery.
- Then, in the Media table, click on Set as Slider Image 1. This would make sure that this image is displayed in the Slider area. However, if you want to block this image from appearing in your Product page, you can select the field Exclude Image.
- Close the Media Upload box, and repeat this pattern with the other 'Slider Image #' fields. And after you're done with all these fields, save the post.

The Slider would display a number of images per Product, and a maximum of 4 Product on the homepage.

### Portfolio

Bellissima theme uses an effective way to create and manage portfolio items. It makes use of the Custom Posts feature of Wordpress. Thus, you have a Custom Post type named Portfolio. All your portfolio items are stored in this post type. Additionally, you can create several categories to categorize your portfolio items (into, for example, nature, architecture, wildlife,etc) by using the Galleries taxonomy.

We'll first need to create some categories for our Portfolio Items. Go to Portfolio >> Galleries and add a few categories.

Now that we have our categories set up, we can add portfolio items. Click on Portfolio >> Add New.

Here you'll see all the options that relate to that particular portfolio item. But there are 4 important sections that you need to look into:

- Post Editor : In this section, you enter the title and the content of the Portfolio item. The content of the items is seen only when someone visits the item's page, but, the Title is displayed on the Portfolio Gallery page.
- Gallery Options : In this section you have various fields, that define how this particular Portfolio item is diplayed in the Gallery page. In the Excerpt field, you enter the summary of the product info. In the Link to field, you enter the URL where you want the Title of this Portfolio item to link to. Leaving this field blank, the item would link to its own page, while entering 'none' would not link anywhere. The next field is Item Type, where you can select a kind of banner image to be displayed with the item.
- Galleries : Here you'll select the Gallery (category) this item belongs to. An item can belong to multiple categories.
- Featured Image : In this section you upload the image of the item. This would be used whenever the item is included in a portfolio gallery.

The Bellissima Theme Allows only Images to be used in the Portfolio Items.

### Widgets

Bellissima theme comes with 5 custom widgets. These are:

- bellissima - Photo Gallery : This widget displays a small gallery of Product Items, Posts or flickr images. In case of Portfolio items or Posts, you'll need to make sure that these have Featured Images attached. In the Categories field, you can enter the ID of the category (categories) if you want to fetch the items only from those categories. In case the Photo Source is flick, you'll need to enter your flickr ID.
- bellissima - Popular Posts
- bellissima - Recent Posts
- bellissima - Products Widget : Using this widget you can show your recent Product items as a carousel. You can use this widget for the Homepage, in home_sidebar_wide, home_sidebar_one or home_sidebar_2 sidebar areas. If you intend to use the widget in the home_sidebar_wide area, you should set Widget Width field as 'wide', in other cases you should set it as 'narrow'.
- bellissima - Subscribe Widget : You can choose to let your site visitors subscribe to your Feedburner feeds

### Shortcodes

The Bellissima theme comes with over 30 shortcodes installed. But that's not all, the Shortcode Generator that comes installed for the post editor makes it extremely easy for you to include any shortcode and its attributes' data without having to remember the shortcodes' names.

A click on the Shortcode Generator button opens up a frame. Here you can select any shortcode. If the shortcode has any attributes it will ask you to enter its data, and if there's no attribute you can just click on Insert.

Although almost of the shortcodes' names are self explanatory, I'll go through some of them here to give you a more in depth understanding:

### raw

In the post editor Wordpress, sometimes, automatically adds random <p> and <br> tags, which can break the layout of the content area. Enclosing any content or even other shortcodes inside this [raw] shortcode fixes this issue.

    [raw]
      This is some textual content.
      [contactform sendto="admin@site.com" /]
    [/raw]

### clear

Whenever you're working with columns or images, you may find some content stacking up on the side of other content, unintentionaly. This can be solved by using [clear /] shortcode.

### tabgroup

You can include tabs in your content by using the tabgroup shortcode like this:

    [tabgroup tab1="About Us" tab2="Reach Us"]
      [tab]This is some content related to About Us.[/tab]
      [tab]This content is related to Reach Us section[/tab]
    [/tabgroup]

### alt-tabgroup

Similar to the tabgroup shortcode above, this shortcode renders a Tabbed interface, but with a little different style. You can include tabs in your content by using the tabgroup shortcode like this:

    [alt-tabgroup tab1="About Us" tab2="Reach Us"]
      [tab]This is some content related to About Us.[/tab]
      [tab]This content is related to Reach Us section[/tab]
    [/alt-tabgroup]

### social

These shortcodes add social networking links:

    [social type="facebook"]http://facebook.com[/social]
    [social type="vimeo"]http://vimeo.com[/social]
    [social type="youtube"]http://youtube.com[/social]
    [social type="google"]http://google.com[/social]
    [social]http://twitter.com[/social]

### faq

Similar to the tabgroup shortcode you can add FAQ items like this:

    [faq]
      [faqitem question="Your First Question?"]Here you can enter the answer to your first question.[/faqitem]
      [faqitem question="Second Question?"]Here you can enter the answer to your second question.[/faqitem]
    [/faq]

### accordion

You can include a Accordion/Toggle interface by using the [accordion] or [alt-accordion] tags like this:

    [accordion]
      [pane title="First"]Your content..[/pane]
      [pane title="Second"]Your content..[/pane]
    [/accordion]

### divider

You can quickly add a horizontal rule using this shortcode.

### column shortcodes

The theme offers [col2], [col3], [col2_last], etc shortcodes. You can use columns like this:

    [col2]Your content ...[/col2]
    [col2_last]Your content ...[/col2_last]

or

    [col3]Your content ...[/col3]
    [col3]Your content ...[/col3]
    [col3_last]Your content ...[/col3_last]

### Theme Translation

This theme is ready for localization via .po/.mo files. These files are located in the theme's /language/ folder. If you are not familiar with translating Wordpress themes, I recommend watching the following video. The plugin used for translation is Codestyling Localization.

Additionally, read this article on how to translate WooCommerce and Themes: http://wcdocs.woothemes.com/user-guide/localization/