How To

Setting Up Merchant

The home page of Merchant comes with two options for setup. You can use a largely module based layout that has 8 regions available for you to use at your discretion. We’ll cover them each below. You can enable these or turn them off via the theme options under the Homepage Options tab. You can also enable the homepage to be widgetized. This allows you to put a selection of components you want on the homepage, and then arrange them as you want. Let’s talk about the widgetized homepage for a minute.

Using A Widgetized Homepage

As mentioned just above, there is the option to use widgets on the homepage of Merchant. The widgets could be anything you want to put there, but we’ve also extracted the regular modules into a widget. It’s called the WooComponent Widget. Here are the included components;

This is what lets you re-arrange the default homepage in Merchant. For example, you could put the components in this order; Intro Message, Slider, Portfolio, Feedback. This also allows you to use multiple components, AKA, two sliders on the homepage if you’d like. If you choose to use the widgetized homepage, this automatically overrides the default modules as soon as you drop the WooComponent widget into the Homepage widget area.

Each component you then choose has it’s own set of settings for you to setup. Just be sure to save and your widgetized homepage will be up and running in no time. Let’s talk about each module now.

Featured Slider

First let’s walk through setting up the Featured Slider. You’ll initially need to enable the Featured Slider in the theme options under Merchant>Featured Slider. You then have a few options here to control the slider as well.

With the Featured Slider setup we need to add slides. It’s important to note that you need to create at minimum the number of slides you set in the theme options. If you’ve set it to show 3 slides then we need to create 3 slides. You can do so by going to Slides>Add New. Be sure to title your slide and write a short description/excerpt. Then you can either upload an image using the Featured Image or TimThumb options, or you can paste a video embed code. The slider will handle either type of media just fine.

To Recap

To add a slide follow these steps:

1. Go to Slides > Add New.
2. Type a title for the slide and complete all of the post’s body content.
3. If you want an image to appear as the background to the entire slide than add a “Slide Image” in the Custom Settings panel.
4. If you want to use a video simply past the embed code in the proper box under the Custom Settings
5. Publish the slide.

Multiple Sliders

You have the option to display multiple sliders on the homepage, each displaying a different content type (Slides or Portfolio). To have multiple sliders you will need to add them using the WooComponent widget. Add the widget to the “Homepage” widget region, then select “Slider”from the dropdown list. At this point you’ll need to save the widget settings in order for the slide specific options to show in the widget. The widget specific slider options will over ride those set in the Theme Options.

Now we can talk about the 4 regions you have on the homepage as well. They are as follows; Intro Message, Features Area, Portfolio Area, and Blog Area.

Intro Message

The Intro Message is a small area under the slider where you can put any sort of message you’d like your visitors to see. Enable and enter your message under Merchant>Homepage Options>Intro Message. It’s also got a nice option to include some social icons. Those are setup under Merchant>Subscribe & Connect

Features Area

Next is the Features Area. This is very similar to our Mini-Features in our other themes. You can enable this under Merchant>Homepage Options>Features Area. You’ll find a place to enter a short message the shows up on the left of the features, as well as a title for the section and a link to view a list of all Features you’ve created.

Once you’ve setup your options you will need to create at minimum the number of features you specified in the theme options. If you set it to show 3 Features then be sure to create at least 3 features. You can do so by navigating to Features>Add New. Here you simply need to fill out the title, excerpt, and then upload an image if you’d like.

To Recap

To add a feature follow these steps:

1. Go to Features > Add New.
2. Type a title for the feature and complete all of the post’s body content.
3. If you want an icon to appear beside the feature than add a “Slide Image” in the Custom Settings panel.
4. If you want to use a video simply past the embed code in the proper box under the Custom Settings
5. Publish the slide.

Setup The Portfolio

The portfolio area setup below is a great spot to show off the work you’ve done and is pretty simple to setup. First we’ll need to be sure that your portfolio is setup correctly. Create a page and title it however you’d like, we’d recommend calling it Portfolio. Then be sure to assign the Portfolio page template to it.

From here we need to add items to the portfolio. Go to Portfolio>Add New. Title your portfolio item and write a short description of it if you’d like. You can also add it to a portfolio gallery of your choice to organize it. Now you can add your images or paste a video embed code in the custom settings box. Finally, click publish.

To add multiple images to a portfolio post simply upload all of them when setting a featured image. Once you’ve set your featured image the rest of the images will be pulled into the post.

To Recap

To add a portfolio post follow these steps:

1. Go to Portfolio > Add New.
2. Type a title for the post and complete all of the post’s body content.
3. If you are posting an image(s) upload them via the appropriate image options you’ve chosen.
4. If you want to use a video simply past the embed code in the proper box under the Custom Settings
5. Publish the portfolio post.

Portfolio Area

Now that we’ve setup our portfolio and added some work to it, we need to show a few of our latest posts on the homepage. Navigate to Merchant>Homepage Options>Portfolio Area to enable this and tweak any other options here to your liking.

Promotions

This module and custom post type is a great way to highlight something your business or site is proud of. Merchant makes it easy to show of your promoted material. First let’s be sure to enable Promotions and tweak the settings to our taste. Just be sure that the number of Promotions you choose here is at least the number of Promotion posts you’ve created.

Adding a promotion is very simple, much like writing a post. Go to Promotions>Add New and write a title and short description of the promotion. Then you’ll want to upload an image via the image options you’ve chosen in the framework. Either using the WP Post Thumbnail or TimThumb. From there just make sure you fill out the call to action text and a link. Click publish and you’re done!

To Recap

To add a promotion follow these steps:

1. Go to Promotions > Add New.
2. Type a title for the post and complete all of the post’s body content.
3. If you are posting an image(s) upload them via the appropriate image options you’ve chosen.
4. Fill out the appropriate call to action text and link.
5. Publish the promotion.

Feedback

The Feedback module is a great way to show new and potential customers your happy clients, and it let’s your past clients brag on you a bit! As usual, be sure to enable this module if you’d like to use it under Merchant>Homepage Options>Feedback Area.

Head over to Feedback>Add New to get started. Give the feedback a title and put the actual customer feedback in the body. Upload an image if you’ve got one, we always like to see a smiling face. Finally put their name and a link to their site if applicable and publish!

To Recap

To add Feedback follow these steps:

1. Go to Feedback > Add New.
2. Type a title for the Feedback and in the body add the actual client/customer feedback.
3. If you are posting an image upload one via the appropriate image options you’ve chosen.
4. Fill out the appropriate name and link to their site.
5. Publish the feedback.

Content Area

The content area has quite a few settings and is worth looking over if you want to include a special page in the homepage. This would be extremely useful in the widgetized homepage. Drop in the content area component and set any page’s content as your homepage.

Blog Area

Our last area on the home page is the Blog Area. As it says this where you can feature a few of your latest posts on the homepage. Head over to Merchant>Homepage Options>Blog Area to setup the options here as you’d like. You can choose how many posts to show, as well as the order to display them in.

Theme & Image Dimensions

Below are the dimension of the theme layout. The layout is responsive and will change based on the browser resolution. The widths below are the maximum for these containers.

• Total site width: 960px
• Main content width: 710px
• Blog content width: 540px
• Sidebar width: 210px

These are the ideal image dimension to use for Merchant. Larger images will be dynamically resized to fit, while smaller images will be stretched to fit. All widths stated are in pixels.

• Full width slider: 1600 x 400
• Normal width slider: 960 x 400
• Portfolio thumbnails: 215 x 220
• Portfolio single page gallery: 710 wide (Can be any height)
• WooCommerce Images: 720 x720
• Blog featured images: 170 x 180

Special Notes

Floating Header

In Merchant we have this awesome option built in that lets you float the header to the left of your content on wider screens. You can also set it to be a fixed header with a simple click, this means that the header scrolls with you as you go down the page. The floated header is also responsive, so if there’s no space for it to float, it drops back to the standard layout

In addition, under Merchant>Styling Options>Header there are additional options for your styles.

Content Width

Under “Layout Options” you can set a “Content Width” for the site using that neat slider. Also, if you use this in conjunction with the floated header, the theme will dynamically calculate how much space is available for the floating header. So if you set a low content width, the floated header can be visible on a wider range of screen resolution.

Set this under Merchant>Layout Options.

Masonry

The Features, Blog and Portfolio sections on homepage have Masonry applied, as well as the portfolio gallery page template.

Widgets

Custom Merchant Widgets

The theme includes 9 custom widgets that you can add to any of your 5 widgetized regions – 1 sidebar and 4 footer widgetized regions.

The custom woo widgets included are:

• Woo – Adspace
• Woo – Search
• Woo – Tabs
• Woo – Twitter Stream
• Woo – Flickr
• Woo – Blog Author Info
• Woo – Embed/Video
• Woo – Subscribe/Connect
• Woo – Component

[insert name=”adding-widgets”]

Page Templates

[insert name=”page-templates”]