How To Guides

How To Guides

MMUI to CSSUI Tool

This page will help you get started with MMUI to CSSUI conversion tool HTML. You'll be up and running in a jiffy!

While we’ve done everything we can to make this process as simple as possible, we do recommend that only Developers make this change for your store to limit down time for your site. There are some technical steps that need to be done and they will be easier for your Developer to handle for you. Before you start this process, you’ll need to be logged in as the Manager. To make sure you are - go to “Menu,” scroll down to “Store Settings,”and make sure you are the the one in the “Manager Field.” If you are not, then either click the “Look Up” button to find your user and select it or log in as the store administrator.

This is where you show your users how to set it up. You can use code samples, like this:

MMUI to CSSUI Tool

The MMUI to CSSUI Module is a Developer Tool that will help you take your store from the old interface of MMUI to the new foundation of CSSUI in a few easy steps.

While we’ve done everything we can to make this process as simple as possible, we do recommend that only Developers make this change for your store to limit down time for your site. There are some technical steps that need to be done and they will be easier for your Developer to handle for you.

STEP 1 – Create a Copy/Backup of Your Store:

1. Contact your host and ask them to make a copy of your store and move it to a development site. If Miva is your host, contact support at support@miva.com and let them know you would like a copy of your store on our dev servers.

Once you have a copy of your dev store, you’re ready to step 2.

In Step 2 you will be working on your Development store and you will completely wipe out the look and feel of your site with the new MMUI to CSSUI Conversion Tool. It will maintain all of your products and categories, but any custom look and feel will be erased. What you’ll want to do is go through your custom modules prior to installing the MMUI to CSSUI Conversion Tool. Write down a list of all the modules currently being used in your store, so that once your new Framework is uploaded, you can see if any of the module code needs to be edited back in to any of your page templates.

STEP 2 – Install MMUI to CSSUI Conversion Tool to your Development Store:

a) In your Miva Admin, click “Menu” and scroll down and click on “Modules.”logging a block from the right to see how easy it is to add more content!

b) Click on the “Upload button,” navigate to your module and upload it, then click the “Update” button.

c) Run the wizard on your dev store. To begin the wizard, go up to your Search Box and type in “MMUI” and hit return. It will bring up a link called “Wizard” - Click on the link.

d) You will get your first wizard screen explaining the steps of the MMUI to CSSUI migration. Read the instructions and then click “Next.”

e) A screen will then appear that asks you to confirm that you have made a backup of your store. Follow the instructions and click “Next.”

f) A confirmation screen will appear, again, making sure you have a backup copy of your site before proceeding.

g) The next screen will show you if there were any errors in the migration. You can go ahead and click “Finish” now to complete the wizard process.

*Now that you’ve run the wizard on your Dev store, you now have a blank CSSUI template with all of your data in a development environment. Now it’s time to rebuild your look and feel. You have a few options: *

1. You can download one of our free easy to use ReadyThemes from the Miva App Store and apply it to your store. Click on this link and choose the ReadyTheme that best works for you. Here are some videos on our ReadyThemes if you’d like to see how they work.
2. You can have your own Developer design a custom look for you.
3. If you have any questions, you can visit the Miva Development Forum.

*We highly recommend our ReadyThemes as they are created with simplicity in mind and are very easy to use. If you are going to have a Developer customize your store, once he/she is done, then skip to Step #4. If choosing one of our ReadyThemes, move to Step #3. If you would like to talk to a Miva Developer to create a customized design for your site, you can contact our Sales Team here.*

STEP 3 – Applying a ReadyTheme to Your Store:

1. Once you’ve found the ReadyTheme you like, download the file so you can import it into your Framework. The download folder will contain your pkg file as well as documentation on how to install, apply and customize your ReadyTheme.

a) Install your ReadyTheme

b) Customize your new design with your own images, logo, etc.

c) Test your modules to make sure they work properly (shipping, wish lists, etc.)

d) Verify that your categories, products and customizations are working properly

Once you are comfortable with your new look, feel and usability of your store, you’ll want to export your new pkg file from your Dev Store so you can upload it to your live store.

STEP 4 – Exporting Your New Framework for Your Live Store:

Here’s how to export your new design:

a) Click on “Menu” then scroll down to “User Interface”

b) Click on “Frameworks” then click on the “Save” icon.

The Save Framework screen will then ask for some basic information. Type in a code, a name, and if you want, a Framework Description. A preview image isn’t necessary. You will in the example below that the Framework Pages and Components to Export fields already have everything selected so you don’t have to do anything there.

c) Go ahead and click “Save Framework.”

d) Now that your Framework is saved, you’ll need to ftp into your Dev account to get the pkg file. Here’s the path to find your pkg file: mm5/frameworks/00000001/yourfilename.pkg

While saving your framework out the software tries to gather all the files that are necessary for transfer, however, it is possible a file or two might be missed. It’s important that once you upload the pkg file to the live site, you retest it to make sure all the files came across and are working properly. If you find that something is missing, whether it be a css, javascript or image, you’ll need to push those up separately.

STEP 5 – Taking Your New Site Live:

You might want to wait for after hours to do this to reduce downtime of your site for your clients. Here are the steps to take your new site live:

1. Place your live store in “Maintenance Mode”
2. Upload the MMUI to CSSUI Module to your store
3. Run the Wizard in your store
4. Upload the original ReadyTheme pkg file to your site
5. Upload your pkg file to your site
6. Test

1. To Place your live store in Maintenance Mode:

a) Click on “Menu,” then scroll down and click on “Store Settings.”



b) Under the Store Details tab you want to scroll down and look for “Maintenance Mode.”



c) Here you will want to click the “Off-line” option and enter the date and time you want to take it down.



2. Upload the MMUI to CSSUI Module: (repeat steps just like you did in your Dev Store)
3. Run the Wizard in your store: (repeat steps just like you did in your Dev Store)
4. Upload the original ReadyTheme pkg file to your site: (repeat steps just like you did in your Dev Store)

*Once your ReadyTheme is installed, you should test your store out to make sure everything is functioning. Here is a checklist you’ll want to go through before taking your new design live:*

√ Make sure all modules are configured properly

√ Make sure all the code is interacting with the front end properly

√ Make sure your design looks correct

√ Make sure your categories/products/checkout process are functional and working properly.

*Once you’re confident your site is functioning correctly, take your store out of maintenance mode, test and enjoy your new design and user interface.*