Did You Know...? You can show an MSRP price and your discounted price for any product.
Focus: Custom Product Fields Goal: Show the full price of a product, cross it out, then show your lower price. Level: Beginner - New to Store Morph
If you run an online discount store, you may want to compare the Manufacturer's Suggested Retail Price (MSRP) to your discounted price. Or, if you put items on sale, you may want to show both the original price and the sale price.
This is easy to do in Miva Merchant 5. You simply create a custom product field for the higher price, and use the built-in price field for the lower price. Then you can edit the Page templates for the Product and Category pages (and maybe even the Search page) to show the higher price (with a strikethrough) next to the lower price.
Step 1: Add a custom product field for the higher price.
In the Miva Merchant 5 admin interface, click Utilities (on the left - the first one underneath the name of your store). Make sure the "Custom Fields" module is checked - if not, check the box and click the Update button.
Click Custom Product Fields (on the top), then click the ADD button to add a new field. You can choose any code or name for the field - we'll use the code "FullPrice" and the name "Full Price". Click Update to save the field definition.
Step 2: On each page template, enable the custom field for the higher price.
Click Pages (on the left). Click the Edit button for the PROD page. Click Product Display Layout (on the top). (If you see code, click "Point + Click Mode" near the bottom of the page.) Check the box for the custom field you created (Full Price). Click Update at the bottom of the page.
If you want the higher price to appear on the Category and Search pages, repeat this step for the CTGY page (edit the Category Product List Layout template) and SRCH page (edit the Search Results Layout template).
Step 3: Change the template code for each page to display the full price.
Click Pages (on the left). Click the Edit button for the PROD page. Click Product Display Layout (on the top). If you do not see any code, click the Advanced Mode link near the bottom. In the Store Morph code, right before the price entity, (which looks like &mvt:product:formatted_price; ), add code similar to the following...
The <s> and </s> HTML tags are used to "cross out" the price. You can also dress this up with more HTML or CSS formatting if you like.
If you see code similar to the above elsewhere in the Product Display Layout template, be sure to delete it - otherwise the Full Price will appear twice on the page.
Click Update to save your changes.
If you want the higher price to appear on the Category and Search pages, repeat this step for the CTGY page (edit the Category Product List Layout template) and SRCH page (edit the Search Results Layout template).
Step 4: For each product that you want to show a higher price for, enter the higher price into the custom product field you created in Step 2.
Click Products (on the left). Click the Edit button for the product you want to specify a higher price for. Click Custom Fields (on the top). Type the higher price into the "Full Price" field. Click Update to save your changes.
Step 5: Test a few sample products.
Go to the Category and Product pages for a few of the items that you entered a higher price for in Step 4. Make sure everything looks OK. If you edited the Search page, test the Search Results as well for a few representative products.
That's it! Now your customers will know how much money they can save shopping at your store.
Did You Know...? You can add a Search box to any page on your store.
Focus: Search Form Goal: Add a Search Form to any page. Level: Beginner - New to Store Morph
If you have a store with a lot of products, it may be helpful to your customers to have a small Search box on every page of your online store. A search box makes it much easier for your shoppers to find that perfect product they're looking for.
Adding a Search box is easy to do in Miva Merchant 5. You simply paste a small HTML form into the page template for each screen that you want the search box to appear on.
Step 1: Add a Search Form to each page in your catalog.
In the Miva Merchant 5 admin interface, click Pages (on the left). Click the Edit button for the CTGY page. Insert the code below in the desired place in the page Template, usually above or below <mvt:item name="category_tree" />.
(If you are using a third party category tree module, you may want to add the code to the module's category tree template instead.)
Click Update to save the template.
If you added the code to a third party module's category tree template, you're done! Otherwise, repeat this step for any other page you want to have add a Search Box, such as 'Product Display - PROD', 'Storefront - SFNT', 'Basket Contents - BASK', etc.
Step 2: Test the form.
Go to each page type that you edited, enter some search words, and make sure you see an appropriate Search Results page. If you have an additional (separate) form on any of these pages, be sure to give that form a specific name so that it doesn't get confused with your new Search Form.
That's it!
Now your customers can search for the products they need from any page of your online store.
Did You Know...? You can change the page shoppers are sent to when they add a product to their basket.
Focus: Product Page Templates Goal: Redirect shoppers to a different store page when they click "Add to Basket". Level: Beginner - New to Store Morph
By default, when a shopper clicks on the "Add to Basket" button on a Product Display page, Miva Merchant refreshes the screen and updates the "Quantity in Basket" value from 0 to 1. But for some shoppers, they expect to be taken straight to the Basket Contents page to verify what has been added to their order.
Luckily, with Miva Merchant 5, there are several quick and easy ways to send shoppers straight to their basket.
From a Product page
Step 1: Locate the Product Display Layout item
In your Miva Merchant admin interface, expand the 'Stores' menu, expand your store, and select the 'Pages' menu item. To the right, you will see a list of all the pages in your Miva Merchant 5 store.
Find the Product Display page, with code "PROD", and select the 'Edit' button to the right. This will pull-up the 'Edit Page: Product Display' screen. Along the items at the top, select the 'Product Display Layout' tab.
Step 2: Find the "Add to Basket" button form
Scroll through the code for the 'Product Display Layout' item until you find a section of code that looks like this:
This is the beginning of the form code for your "Add to Basket" button. The line you want to look at in particular is:
<input type="hidden" name="Screen" value="PROD">
Step 3: Edit the "Screen" value
To redirect your shopper to the Basket Contents page when they add an item to their basket, you need to change the page, or "screen", they are sent to. Since BASK is the default page code for the Basket Contents page, you will want to change the "screen" value from PROD to BASK.
When you are finished making this edit, click the 'Update' button so your changes stick.
Step 4: Test your "Add to Basket" button
Now that you have completed this simple change, you can test your edited "Add to Basket" button. Locate a product in your store to test and add the item to your basket.
Instead of simply refreshing the existing product display screen you are looking at, you should now be taken directly to your basket contents, with the product you added listed.
From a category page
Step 1: Locate the Category Layout item
In your Miva Merchant admin interface, expand the 'Stores' menu, expand your store, and select the 'Pages' menu item. To the right, you will see a list of all the pages in your Miva Merchant 5 store. Find the Category Display page, with code "CTGY", and select the 'Edit' button to the right. This will pull-up the 'Edit Page: Category Display' screen. Along the items at the top, select the 'Category Product List Layout' tab.
Step 2: Find the "Add to Basket" button form
Scroll through the code for the 'Category Product List Layout' item until you find a section of code that looks like this:
Step 3: Edit the "Screen" value
To redirect your shopper to the Basket Contents page when they add an item to their basket, you need to change the page, or "screen", they are sent to. Since BASK is the default page code for the Basket Contents page, you will want to change the "screen" value from '&mvte:global:Screen;' to BASK.
When you are finished making this edit, click the 'Update' button so your changes stick.
Step 4: Test your "Add to Basket" button
Now that you have completed this simple change, you can test your edited "Add to Basket" button. Locate a product in your store to test and add the item to your basket.
Instead of simply refreshing the existing category display screen you are looking at, you should now be taken directly to your basket contents, with the product you added listed.
From the Product List
Step 1: Locate the Product List Layout item
In your Miva Merchant admin interface, expand the 'Stores' menu, expand your store, and select the 'Pages' menu item. To the right, you will see a list of all the pages in your Miva Merchant 5 store. Find the Product List page, with code "PLST", and select the 'Edit' button to the right. This will pull-up the 'Edit Page: Product List' screen. Along the items at the top, select the 'Product List Layout' tab.
Step 2: Find the "Add to Basket" button form
Scroll through the code for the 'Product List Layout' item until you find a section of code that looks like this:
Step 3: Edit the "Screen" value
To redirect your shopper to the Basket Contents page when they add an item to their basket, you need to change the page, or "screen", they are sent to. Since BASK is the default page code for the Basket Contents page, you will want to change the "screen" value from PLST to BASK.
When you are finished making this edit, click the 'Update' button so your changes stick.
Step 4: Test your "Add to Basket" button
Now that you have completed this simple change, you can test your edited "Add to Basket" button. Locate a product in your store to test and add the item to your basket.
Instead of simply refreshing the existing category display screen you are looking at, you should now be taken directly to your basket contents, with the product you added listed.
Did You Know...? You can display a large view of a product WITHOUT using popup windows.
Focus: Product Page Templates Goal: Display a larger, zoomed-in view of a product on its own page.
Many online stores offer the option to view a large image of a product by clicking on a link. The problem is that the link could open a new window in your browser. This does not work well for web site visitors who have popup blockers enabled. They may think that your site is broken when the image does not display.
One solution is to create a new page in your Miva Merchant 5 store - a page designed just for the large image. This is essentially a copy of the PROD page, but instead of displaying a medium-sized image, you display the large version of the image.
Step 1: Design the new page
Using your tool of choice (Photoshop, Dreamweaver, a sketch pad, etc.), design how you want the new "Product Zoom" page to look. You can start with your existing Product (PROD) page layout. You may have to remove some elements of the PROD page (like the product description) in order make room for the large image. If you want visitors to be able to navigate back to the Product page, include a "Return" or "Continue Shopping" button in your design.
Step 2: Add a custom product field for the large image's file name
In the Merchant 5 admin interface, click Utilities (on the left - the first one underneath the name of your store). Make sure the "Custom Fields" module is checked - if not, check the box and click the Update button.
Click Custom Product Fields (on the top), then click the ADD button to add a new field. You can choose any code or name for the field - we'll use the code "LargeImage" and the name "Large Image". Click Update to save the field definition.
Step 3: Add the new page to Miva Merchant 5
Click Pages (on the left), and add a new page. We'll use the code "PRZM" and name "Product Zoom". Leave the Template blank for now and click the Add button.
Step 4: Assign the items you'll need for this page
First you'll need a list of the items used by the PROD page: Click Pages (on the left). Click the Edit button for the PROD page. Click Items (on the top). Make a note of all the items that are checked for this page.
Now assign all of these items to the PRZM page: Click Pages (on the left). Click the Edit button for the PRZM page. Click Items (on the top). Check all the items that were used for the PROD page. Click Update.
Step 5: Enable the custom field for the large image
While you are still editing the PRZM page, click Product Display Layout (on the top). Check the box for the custom field you created (Large Image). Click Update at the bottom of the page.
Step 6: Copy the templates from the PROD page to the new page
a. Click Pages (on the left). Click the Edit button for the PROD page. Copy the code in the Page Template to the clipboard (Ctrl-A to select, Ctrl-C to copy).
b. Click Pages (on the left). Click the Edit button for the PRZM page. Paste the code to the Page Template (Ctrl-V to paste). Click Update.
c. Click Pages (on the left). Click the Edit button for the PROD page. Click Product Display Layout (on the top). (If you don't see any Store Morph code, click the Advanced Mode link near the bottom.) Copy the code in the Product Display Layout template to the clipboard (Ctrl-A to select, Ctrl-C to copy).
d. Click Pages (on the left). Click the Edit button for the PRZM page. Click Product Display Layout (on the top). (If you don't see any Store Morph code, click the Advanced Mode link near the bottom.) Paste the code to the Product Display Layout template (Ctrl-A to select, Ctrl-V to paste). Click Update.
Step 7: Change the template code for the new page to match your design from Step 1
This is where you use your HTML and Store Morph skills. While you are still editing the PRZM page, change the code in the Product Display Layout template to match your new design from Step 1. You may find it easier to edit the text in Notepad or another editor, then paste it back into the Miva Merchant admin interface.
Here is sample code that could be used to display the large image if it exists:
Step 8: Add a link for the "Product Zoom" page to the PROD page
Click Pages (on the left). Click the Edit button for the PROD page. Click Product Display Layout (on the top). (If you don't see any Store Morph code, click the Advanced Mode link near the bottom.) Add a link similar to the one below so that visitors can click through to the "Product Zoom" page for each product (make sure the URL is all on one line):
Note to Advanced Store Morphers: To make this link appear only when a LargeImage exists, you need to enable the LargeImage custom field for the PROD page using Point and Click mode, then code an mvt:if statement (similar to the one in Step 7) to make sure it is not null before displaying the link.
Step 9: FTP the large image files for your product to the correct location on the hosting server
Use your favorite FTP program. By default, the product images may reside in a folder similar to graphics/00000001, but the folder can vary with each store.
Step 10: For each product, enter the path and file name for its large image into the custom product field you created in Step 2
Click Products (on the left). Click the Edit button for the product you want to specify a large image for. Click Custom Fields (on the top). Type the path and file name for the LargeImage, for example,
graphics/00000001/prodXYZ_Large.jpg
Repeat for each product. If you have a large store, you can upload the image file names using the Import Products From Flat File utility.
Step 11: Test each product
In your Miva Merchant 5 store, visit each product page, then click the link you created to enlarge the image. Make sure everything looks OK. Click the "Return" or "Continue Shopping" button to make sure you return to the correct product page.
Did You Know...? You can import any existing customers, thus creating an account for them.
Focus: Customer Accounts Goal: Create accounts for pre-existing customers.
If you have a pre-existing customer base (i.e. from another shopping cart), you can import those customers into Miva Merchant 5. This is useful when you want to add existing customers to Price or Availability groups.
Step 1: Create or Obtain a Flat File of your Customers
You can use a spreadsheet or database program. At the least, you need to include the customer's login, lost password email address, and password. You can include the shipping and billing info, or let the customer complete those fields on their own.
You want to save your file as a delimited text file. Using a TAB delimiter is okay.
Step 2: Upload the File
In the Admin menu, click the + next to your store's Utilities, then the + next to Import Data. Then click on Import Customers from Flat File. Then you click the Upload button and locate the file on your computer and click Open.
Step 3: Specify the Delimiter
Tell Miva Merchant what delimiter you used for the file. Also select whether or not the first row is the headers for the fields or not.
Step 3: Match the Fields
Use the pull-down menus to match the content with the appropriate customer fields. You can also opt to keep, update or replace existing records. Once they are all matched, click the Import button.
Did You Know...? You can configure shipping based on the weight of your products AND attributes.
Focus: Product Attributes & Options Goal: Configure shipping based on weights of products AND their attributes and options.
Miva Merchant 5 offers the option to add weight to product attributes and options, which means you can charge shipping against them. For example, a store selling computers with configurable options, can provide a weight for an add-on printer. The customer can select the add-on and be charged shipping accordingly.
You can assign weights to attributes and options while you build them in the store, or you can edit any product attributes later.
Step 1: Create or Edit an Existing Attribute or Option
Open the product for editing and click the Attributes link. Create or edit any existing attributes.
Step 2: Assign Weights
In the Weight field, enter a numeric value. Miva Merchant 5 will use the weight unit assigned to the store (pounds, ounces, etc.).
That's it. Now you can configure shipping by weight and the weight of your attributes or options will be considered in the overall weight of the order.
Did You Know...? Miva Merchant 5 enables you to create your own custom pages.
Focus: Miva Merchant 5 - Store Morph Technology™ Goal: Create a new, custom page for your online store.
One of the great new features that Store Morph Technology (SMT™) makes possible is the ability to easily add new, custom pages to your Miva Merchant 5 store. Now you have the freedom to create additional pages to enhance your online store.
In this second design-related tip, we will cover the steps to creating your own custom pages in Miva Merchant 5. Step-by-step instructions and screenshots will aid you in customizing your online store.
Before we get started, there are a few terms, new with Miva Merchant 5 and Store Morph Technology, which you should understand. These terms are "Pages" and "Items." You can read more about Pages and Items in the Online Help Topic "User Interface: Pages & Items."
For this example, we will be adding a new "Contact Us" page to the list of existing pages. To begin, locate Pages, in the left navigation area, below the store name. Click Pages to display the list of store page templates. The templates for every page Miva Merchant generates are all found in one area under this Pages menu.
Step 1: Add a New Page
In the upper right corner of the Pages screen, you will see a button for adding a new page, labeled "Add Page." Click this button, and a blank page template will be displayed. This is where we will begin creating your new page.
On the blank template screen, there are three required fields we need to fill in. These can be changed later.
Code: Every page Miva Merchant generates needs a unique code. You want to make sure that your new page's code is not in use by any other page Miva Merchant already generates. We will use "CONTACT."
Name: Create a name for this page. This page name can be used later as the page title in your HEAD tag. For our example, we will call it "Contact Us."
Template: This is where you will enter your page content. We'll cover this more in Step 2.
Step 2: Create the Page Content
On the 'Add Page' screen, your new page content will go in the 'Template' section. In this field, you can use HTML, text, or any other code that a browser can read on its own. (That means server-side scripts like ASP or PHP will not work.)
Once you are done creating your content, click 'Add' at the bottom. It doesn't need to be perfect the first time. It can always be altered later.
Your new page is now ready to view. To browse to the page, view your Miva Merchant storefront at a URL similar to: http://www.YOURDOMAIN.com/mm5/merchant.mvc
At the end of that URL, add a question mark (?) and the variable Screen=, which is then followed by your new page's code. In our example, that would be CONTACT.
So, the complete URL for this example page is: http://www.YOURDOMAIN.com/mm5/merchant.mvc?Screen=CONTACT
Step 3: Insert Page Items
When you display your newly created page, you'll notice that, for the most part, it's pretty plain. You won't see your navigation bar or the category tree, only the content that you added to the new page's template.
To enhance this new page, you'll want to insert some page items from your Miva Merchant store. For example, the Navigation Bar that appears at the top of every page is an item. The same is true with the Category Tree on the left, or your Global Footer along the bottom. Items can be inserted into any page, whether it's one that came with Miva Merchant, or a new page you create yourself.
Next week, we'll go over how to insert page items into your store pages. A few examples will be covered, to help provide a solid understanding of how these new items work.
Did You Know...? There are some easy changes you can implement to improve your product display pages.
Focus: Miva Merchant 5 - Store Morph Technology™ Goal: Complete a simple customization of the Product Display page.
This is the first in a series of design-related Miva Merchant Tips & Tricks, aimed and helping you understand the level of control you have with the groundbreaking Store Morph Technology (SMT™) in Miva Merchant 5. We'll start off pretty basic and, over time, go into some of the more advanced features available to you with SMT.
In this first tip, we'll go over how you can change the wording on some of the different field labels on the product display pages, such as "Code" or "Product Name." We'll include some screenshots to help you find the areas we're discussing.
Before we get started, there are a few terms, new with Miva Merchant 5 snd Store Morph Technology, that you should understand. These terms are "Pages" and "Items". You can read more about Pages and Items in the Online Help Topic "User Interface: Pages & Items."
For this example, we will be editing the page code for the Product Display page. To begin, locate Pages, in the left navigation area, below the store name. Click Pages to display the list of store page templates. The templates for every page Miva Merchant generates are all found in one area under this Pages menu.
You will see a list of every page that Miva Merchant generates by default, including some pages that you may have created on your own. We'll cover creating new pages in a future "Tips & Tricks."
Locate the Product Display (PROD) page template, and click the Edit button to the right. This is where we need to be to modify the product display screen.
Step 1: Determine the Display Item
When looking at the template code for the Product Display page, you will see a placeholder for where the actual product display will be shown. It will look like this:
<mvt:item name="product_display" />
That little bit of code above is an item tag, which gets replaced by the item it is referencing when the page is displayed on your store. In this case, the item tag is calling the 'Product Display Layout' item.
When the Product Display page is generated for your shoppers, the actual layout of the products is created by this 'Product Display Layout' item. The code that creates each item can be modified, and it is that code which we need to edit to change the field labels.
Step 2: Change the Display Item Mode
Above the page template code, you will see several tabs for all of the different items used on this page. We need to edit the 'Product Display Layout' item. Click on that tab for its settings.
When you initially view this screen, it will be in 'Point + Click' mode. For what we need to do, change the field labels, we'll need to work in the 'Advanced' mode. Click on the 'Advanced' mode link to display the item code.
Step 3: Edit the Display Item
For this example, we will be changing the field label "Code" to "Part Number," and changing the field label "Price" to "Our Low Price." We will also change the font color for "Our Low Price" and the product price to red.
First, we need to find all instances of the "Code" and "Price" field labels. In the 'Product Display Layout' item, they each occur only once. Once located, you can change the labels. You are able to use HTML to format the display.
Here are the changes we are making in this example:
Original code:
Code: <b>&mvt:product:code;</b> Changed to:
Part Number: <b>&mvt:product:code;</b>
Original code:
Price: <b>&mvt:product:formatted_price;</b> Changed to:
<font color="red">Our Low Price: <b>&mvt:product:formatted_price;</b></font>
After changing the code, be sure to click the Update button. Below is how the original display looked, and the new, edited display.
Before
After
This is just one very basic way you can customize a Miva Merchant 5 store by harnessing the power of Store Morph Technology. Throughout this series of tips, we will get into much more advanced customization ideas, accompanied by code examples on how you can implement the ideas in your own Miva Merchant 5 store.
Did You Know...? You can insert new items into your store pages.
Focus: Miva Merchant 5 - Store Morph Technology™ Goal: Insert a new item into a store page.
Store Morph Technology (SMT™) provides unprecedented flexibility and control over the look and layout of your Miva Merchant 5 online store. One of the more powerful new features of this technology is the ability to insert new items, such as the category tree or basket contents, into any other store page.
With this week's "Tips & Tricks", we are going to cover adding an item to the new 'Contact Us' page we created in the tip from last week. If you remember, the new page we created last week was pretty plain. We'll dress it up a bit this week.
Before we get started, there are a few terms, new with Miva Merchant 5 and Store Morph Technology, which you should understand. These terms are "Pages" and "Items." You can read more about Pages and Items in the Online Help Topic "User Interface: Pages & Items."
For this example, we will be adding the Navigation Bar item to the new 'Contact Us' page. To begin, locate Pages in the left navigation area, below the store name. Click Pages to display the list of store page templates. The templates for every page Miva Merchant generates are all found in one area under this Pages menu.
Step 1: Edit the Page
In the list of pages, find the 'Contact Us' page, or any other page you wish to add items to, and click on the Edit button to the far right. The 'Edit Page' screen will be displayed. The edits we make in Step 3 will go in the "Template" field you see here.
Step 2: Select the Items
In order to insert new items into a store page, we need to activate them for the page. At the top of this 'Edit Page' screen, click on the Items tab, which will display a list of all page items available.
For this example, we will be inserting the Navigation Bar item. Locate the item in the list, select the item, and click Update. The selected item is now activated for this page.
Step 3: Insert the Items
Once you have selected the item you wish to add, click on the Page tab above. You will be taken back to the initial Edit Page screen with the "Template" section that contains the page code.
For this final step, we need to insert the code for the item we are adding. To look up the code that corresponds with each item you are adding, view the Online Help Topic "User Interface Items, and the Entities They Contain."
Below is the code for the item we are inserting in this example, the Navigation Bar...
Navigation Bar: <mvt:item name="navbar" />
You want to make sure that the code for the item is inserted in the correct location for where you wish it to display. For example, the Navigation Bar usually goes at the top of a page, so you would stick the item code towards the top of the page template code.
For our example, we inserted the Navigation bar code into the top of the page template, right below the <body> tag. This will ensure it is displayed at the top of the page, above the page content.
Here is a "Before and After" shot of the 'Contact Us' page.
So, that's all there is to adding new items to your store pages. There are a lot more advanced things you can do, and we will start covering those in the future, with detailed template code samples to recreate the pages on your own.
