Merchato Documentation

on

Overview

Ready to get started? Read through the documentation below to learn how to harness the full potential of Merchato and build a stunning website in no time!

If you have any questions we haven’t covered in this guide or are having trouble getting started, please send us an email through our priority support form.

Installation

If you’re not familiar with the process for installing WordPress themes, please follow the steps in our theme installation guide.

Getting Started

After installing and activating Merchato, you can jump right in and begin customizing your site by going to Appearance → Customize in your admin panel to open the customizer.

The customizer allows you to preview changes to your site before publishing them. The left side of the screen contains a series of sections and controls to modify various site settings, while the right side displays a preview of your site that updates in real-time.

You’ll find options for adding a logo, changing colors, creating custom menus, front-page settings, and more.

Appearance

As with all our themes, Merchato includes various options to help you make your site your own.

Site Identity

Your site’s title and tagline are displayed in the header area of Merchato by default, but you can easily replace the text with your own logo in the customizer:

  1. Go to Appearance → Customize
  2. Click the Site Identity section to expand it
  3. Upload a new image in the Logo field

You can also update the site title and tagline text, or hide them to display the logo by itself.

If you only want to hide the tagline and not the site title, drop this snippet in the Additional CSS section in the customizer:

.site-description {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    white-space: nowrap;
    width: 1px;
}

Colors

The accent color is used to style links, buttons and hover colors in various places throughout the theme. It can be changed in the customizer:

  1. Go to Appearance → Customize
  2. Click the Colors section to expand it
  3. Update the Accent Color setting

Fonts

Merchato has built-in support for a few handpicked Google fonts. To update your fonts:

  1. Go to Appearance → Customize
  2. Click the Fonts section to expand it
  3. Update the selected font in each dropdown

Typekit Fonts

If you have a Typekit account and would like to use the fonts included in one of your kits, you can follow the documentation for integrating custom fonts for Typekit.

Custom Menus provide control over the links that appear in the navigation areas on your site.

Merchato supports three menu locations out of the box: the Header Menu, Social Menu, and Footer Menu. Additional menu locations are available when using AudioTheme or WooCommerce.

You can manage menus by going to Appearance → Customize → Menus.

Header Menu

The Header Menu appears in the middle of the header area at the top of your site and supports one level of drop-down links.

On smaller screens, the menu is displayed when a visitor clicks the “Menu” button.

Social Menu

The Social Menu allows you to display links to your social media profiles as icons. It appears in the right side of the header and footer. On mobile devices, it is anchored to the bottom of the screen when the menu is open.

Learn how to add a social links menu.

The Footer Menu appears at the very bottom of the site on the right side of the footer. It supports a single level of links.

Breadcrumbs are a horizontal list of links that help visitors find their way around your site. They show the current page in relation to the hierarchy or structure of the site to make it easier to navigate within a section.

Merchato requires the Breadcrumb Trail plugin to display breadcrumbs.

Homepage

The homepage, or front page, is typically one of the first pages most visitors see when visiting your site. While it shows a list of your latest posts by default, Merchato includes a few options that allow you to customize the layout and information displayed.

Read the instructions for setting up a static front page if you’d prefer to use a page for your homepage. You’ll also want to create a page for displaying your latest posts (or blog).

In addition to the standard content areas, Merchato includes three special homepage features:

Header Media

Adding a banner image or video to the top of the homepage is a great way to make a good first impression and set the tone for your site.

  1. Go to Appearance → Customize
  2. Click the Header Media section to expand it
  3. Upload a new image or video

If you’re going to feature a video, it’s a good idea to also set a similar image to display on devices where the video doesn’t load.

Header Content

There are a few content-related options that can be enabled on the homepage. To access the header content options:

  1. Go to Appearance → Customize
  2. Make sure the homepage is being previewed in the frame on the right
  3. Click the Theme Options panel to expand it
  4. Click the Header Content section to expand it

Header Layout

  • Banner – The default option spans the full-width of the screen and centers the title and any content.
  • Panels – Splits the header into two columns when a header image or video exists. The title and content will be centered in the left column with the media in the right column.

Header Title

Displays the site tagline by default, but can be changed to any text.

Header Text

The Header Text field allows you to add more text in the header area to help create a compelling call-to-action. It’s possible to use a limited subset of HTML tags.

To add a button, insert an anchor tag with button for the class attribute value:

<a href="https://example.com/" class="button">Button Text</a>

Darken Header Media

When the Header Layout is in “Banner” mode, text will display over an image or video if one is set. In some cases, the text may be difficult to read. The Darken Header Media slider can be used to provide more contrast between the text and media to make it easier to read.

Featured Content

One unique feature available in Merchato is the ability to highlight manually curated content on the homepage. Featured content can consist of post, pages, products, records, videos, and AudioTheme archives.

It’s worth noting, if a featured image is not set for the featured content item, an image will be pulled from the item’s content or the first image uploaded to the post.

Adding Featured Content

  1. Go to Appearance → Customize
  2. Click the Theme Options panel to expand it
  3. Click the Featured Content section to expand it
  4. Click the Add Posts button
  5. Select the items you want to feature from the fly-out panel
  6. Click the Add Posts button to close the fly-out panel
  7. Drag and drop items into your preferred order
  8. Click the Save & Publish button at the top of the customizer

Each featured item can be further customized by clicking the arrow to the right to expand it.

Layouts

There are a couple of different layout options for displaying featured content:

  • The default Block Grid layout displays each item as a small square with four items per row on larger screens.
  • The Mosiac Grid option creates a unique layout.

Widgets

Widgets allow you to add content or tools to sidebars, or other widget-enabled areas, on your site. They can be used for displaying lists of posts, static text, images, and email sign-up forms, among many other possibilities. Most widgets are configurable so you can customize how they display.

WordPress includes a number of widgets out of the box and additional widgets can be added using plugins. Learn more about managing widgets.

Merchato includes one widget location:

Widgets added to the Footer widget area will display on all pages at the bottom of your site in a three-column grid.

Site-wide Player

The site wide player in Merchato relies on the Cue and CueBar plugins, which gives you the ability to easily create custom playlists and display a site wide player.

Once Cue is activated, go to Playlists → Add New to create a playlist. After creating at least one playlist, you can assign it to the CueBar player area by going to Appearance → Customize → Cue Players. Select a playlist for the CueBar Playlist setting.

Page Templates

Page templates allow you to change the layout or functionality of individual pages on your site. The page template can be set in the Page Attributes meta box when editing a page in your admin panel.

Default

The default page template displays content in a single column. When a featured image is added, it will appear as a banner behind the page title.

Grid Page

The Grid Page template displays child pages in a visually appealing grid using the featured image and page title. Learn how to use the Grid Page template.

Mosaic Grid Page

The Mosaic Grid Page works like the Grid Page template, but displays items in a unique mosaic grid instead of uniform columns and rows. Learn how to use the Mosaic Grid Page template.

Merchato includes extra support for a few plugins.

AudioTheme Integration

AudioTheme makes it easy for bands and musicians to showcase music, keep fans updated with live performances, tour dates and venue information, and embed videos from over a dozen popular services.

Merchato requires the AudioTheme plugin to function as shown in the theme demo. It can be downloaded from your account dashboard.

Gig, Discography, & Video Archives

Be sure to read the documentation for setting up your archives to add links to your discography, gig, and video pages.

Archive Menus

Merchato includes menu locations for the Gig, Record, and Video archive pages. These menus can be used to add additional navigation for past gigs or display different record types (e.g. Albums, Singles).

Assigning a menu to these archive pages is the same as assigning a menu to other menu locations via Appearance → Customize → Menus.

Gigs

Documentation for managing gigs can be found in the AudioTheme plugin documentation.

Records

Documentation for managing records can be found in the AudioTheme plugin documentation.

Videos

Documentation for managing videos can be found in the AudioTheme plugin documentation.

WooCommerce Integration

Merchato includes extensive support for WooCommerce to ensure the content displays within the theme’s layout. There are also a few settings for customizing the appearance of your shop. You can choose a mosaic grid layout and whether or not you want to show a search form or price filter.

To access the theme-specific settings for WooCommerce:

  1. Go to Appearance → Customize
  2. Visit the shop page in the preview frame on the right
  3. Click the Theme Options panel to expand it
  4. Click the Shop section to expand it

Shop Menu

Like the AudioTheme archives, a section-specific submenu can be featured below the the title on catalog or category pages in your shop.

To manage the Shop Menu, go to Appearance → Customize → Menus.

Customizing Merchato

Check out our knowledge base article on the recommended ways to customize your theme along with helpful plugins and links.

Child Theme

You can download a sample child theme here. In the sample, we’ve changed the site content background color from white to red as a way to demonstrate the changes are working.