1. Documentation
  2. Themes
  3. Merchant

Merchant

Important: This theme was retired in October 2015 and is not for sale. Documentation is no longer being updated.

Setting Up Merchant ↑ Back to top

The home page of Merchant comes with two options for setup. You can use a module based layout that has 8 regions available. To enable these or turn them off go to Merchant > Settings > Homepage Options. 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 need.

Merchant Theme Demo: demo2.woothemes.com/merchant

Using A Widgetized Homepage ↑ Back to top

To enable the Homepage Widgets go to: Appearance > Widgets in your dashboard.

The widgets could be anything you want including the regular modules as a widget, called the Woo-Component Widget. Here are the included components:

  • Intro Message
  • Slider
  • Features
  • Portfolio
  • Promotions
  • Feedback
  • Horizontal Blog Layout
  • Content Layout

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, for example, 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. Be sure to save changes when finished.

Featured Slider ↑ Back to top

To enable the Featured Slider go to Merchant > Settings > Homepage Options

slider

 

Slider Title & Subheading

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 upload an image using the Featured Image, 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 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 ↑ Back to top

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 > Settings > Intro Message. It’s also got a nice option to include some social icons. Those are setup under Merchant > Subscribe & Connect

intromessage

Intro Message In Action

Features Area ↑ Back to top

Next is the Features Area. This is very similar to our Mini-Features in our other themes. You can enable this under Merchant > Settings > 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.

features

 

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 panel
    5. Publish the slide.

Setup The Portfolio ↑ Back to top

    1. To setup the portfolio go to Page > Add New.
    2. Assign the Portfolio Page Template to your new page.

portfolio

  1. Save changes.
  2. Next, go to Portfolio > Add New.
  3. Title your portfolio item and write a short description of it if you’d like.
  4. Optionally add it to a ‘Portfolio Gallery’ to organize it.
  5. Add images or video embed code in the Merchant Custom Settings panel.
  6. 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.

Portfolio Area ↑ Back to top

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. Go to Merchant > Settings > Portfolio Settings to enable and adjust the following settings:

portfolio-area

Promotions ↑ Back to top

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.

promotions

Promotion In Action

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 ↑ Back to top

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! To enable go to Merchant > Settings > Feedback Area.

feedback

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.
Feedback Area In Action

Content Area ↑ Back to top

The content area has quite a few settings and is worth looking over if you want to include a special page in the homepage. To add go to Merchant > Settings > Content Area or utilize the ‘Woo – Component Widget’ in Appearance > Widgets.

content-area

Blog Area ↑ Back to top

Our last area on the home page is the Blog Area. To enable go to Merchant > Homepage Options > Blog Area edit the options here as you’d like. You can choose how many posts to show, as well as the order to display them in.

blog-area

Theme & Image Dimensions ↑ Back to top

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 ↑ Back to top

Floating Header ↑ Back to top

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 > Settings > Styling Options > Header there are additional options for your styles.

header

Content Width ↑ Back to top

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 > Settings > Layout Options.

layoutoptions

Masonry ↑ Back to top

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

What is Masonry?

Custom Merchant Widgets ↑ Back to top

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

To learn more about how to add Widgets please see our tutorial here: How to Add Widgets

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment