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.
Logo Sample code:
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
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.
* Search Friendly Links will automatically be used in URLs if configured in Miva Merchant Domain Settings
Text banners allow you to create text based banners which can be used for promotional messaging, or site notifications.,/p>
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 are a place to manage your sites content pages. Content such about us, policy pages, or other content needs.
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.
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 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.
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.
The layout of any product listing can be controlled though the Advanced Mode setting
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.
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.
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.
Here is the HTML code output by the navigation set 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.
Entities above are available at all three levels.
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.
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