24/7 Support: 800.608.6482

Get Started

Developer Docs

ReadyThemes Documentation

Download ReadyTheme Base Framework Here

ReadyThemes is functionality built into the core of Miva Merchant Version 9. It allows you build themes or integrate with an existing CSSUI store to better manage your Miva Merchant store from the admin. This includes updating your logo, managing social media links, managing promotional images, content, product lists, and navigation.

There are 6 different tabs available within ReadyThemes which provide different functionality. Below are code samples and an item reference guide to help you build a new theme or customize an existing Miva Merchant store.

Interested in building and selling a ReadyTheme in our Theme Marketplace? Click here to download our Theme Checklist.

Settings

Logo Sample code:

Available Entities:

Background Image, Color and Font:

There is an item which must be placed in the Global Head Tag which controls these settings. It outputs a single body style to control the default font, background color and background image.

3rd Party Social Sharing Snippet and Trust Symbol Code

Images

ReadyThemes has the ability to manage all your sites promotional images. They can be placed anywhere on the website. Miva will automatically resize them to any specifications you need. Common use cases are: homepage sliders, homepage banners, global promotional images, Category/Product Specific promotional images.

Images

* Search Friendly Links will automatically be used in URLs if configured in Miva Merchant Domain Settings

Text Banners

Text banners allow you to create text based banners which can be used for promotional messaging, or site notifications.,/p>

Text Banners

They can be placed anywhere on the site using the item generated when the banner is created. An optional link can be defined which will wrap the entire text banner.

Each Text Banner will be contained with a div tag with a class of "readytheme-banner" and and id of the code given to the banner.

Content Sections

Content Sections are a place to manage your sites content pages. Content such about us, policy pages, or other content needs.

Content Sections

Each Content Section will be contained with a div tag with a class of "readytheme-contentsection" and and id of the code given to the banner.

Function Variables

All the functions within the param tag for all ready theme items accept a string value (contained in single quotes) or a variable. This allows you to dynamically call in an image, banner, nav set or content item by reading in a parameter from the URL

Product Listings

Product Listings allow you to add featured products to any page of your Miva Store. Typically this will be used on the storefront. There are two options for which products get pulled in. It will use All Products, or products from a specific category. This will allow the store owner to create a new category to assign products to, or pull products from an existing category. Management of which products display and their order is all controlled at the category level.

Product Listings

Product Listings

Multiple product listing items can appear on the same page. The products listing item will inherit all the items for the page it is used on. So if you need to used toolkit or another items code within the product listing template, as long as toolkit is assigned to the page template it is used on it will work.

The product listing item have a complete page template which can be customized to support any layout needed. Because the Ready Theme feature used the product listing component, things like additional images, sorting, number of products to display are all built in.

Edit Product Listing

The layout of any product listing can be controlled though the Advanced Mode setting

Navigation Sets

Navigation Sets allow you to create custom navigation structures to control different parts of your Miva Merchant store. Currently Miva has a built in category tree, and a navigation bar. With Navigation Sets, you can define your own navigational structures to be used anywhere. Examples include footer navigation, custom content page navigation or even replacing the built in navbar and category tree.

Navigation Sets

Each Navigation Set has its own Template to control the layout. By default it will output a nested ul/li structure to allow for easy styling. Included in ready themes is a built in stylesheet with 4 layouts. Each layout provides different styles for the type of navigation menu you would like to use. The stylesheet automatically gets added to the store under CSS list when ready themes is activated.

User Interface

The goal of these built in menu styles for the theme developer to use as a starting point and customize for their specific theme

Below is an example of a navigational set structure that can be created within the admin. It supports up to 3 levels deep (parent plus two sub cats) A nav item can be just text or contain a link to a product, page, category or custom external page.

Nav Set

Here is the HTML code output by the navigation set item:

CSS Classes

  • Each Navigation Set will be contained in a div with a class of "navigation-element" plus a class of the code of the navigation set
  • The first ul will have a class of "navigation-set" plus a class of the layout chosen in the admin. The four layout classes are: horizontal-drop-down, horizontal-mega-menu, vertical-fly-out or single-navigation-column
  • The li for each level will have a class of "level-X" where X is the 1, 2, or 3 depending on the level of the navigation item

Default Navigation Set Template

Urls for the links are automatically generated. In the event you need more control over the link there are item available to build your own custom link.

Available Entities

Entities above are available at all three levels.

Template Language Functions

As of 9.0001 there are 5 functions available to any page the readytheme item is assigned. These functions can be used to pre-load the data for a image, banner, navigation set, content section or product listing. The main use of this would be to check to see if the ready theme element was active, however it can be used for other conditionals as well.

Example:

Parameter Definition

Code: The readytheme element code you want to reference

Output: The variable where you want the data will be loaded

Note: if output is omitted or left blank the data is automatically loaded into l.settings:readytheme:loaded

Full Function List

Miva believes that all online businesses should have access to a scalable ecommerce platform that can meet their unique business requirements. Miva offers PCI compliant ecommerce, hosting, and custom website design and development solutions. Miva customers have processed over $100 billion in online sales since 1997.

Copyright © 2016 Miva, Inc - All Rights Reserved   Privacy Policy | Store Policy

Links
Contact Us
Receive Tips & Updates

Copyright © 2016 Miva, Inc - All Rights Reserved

Back To The Top