Instapages Help
last updated December 05, 2023
The Installation Guide walks you through basic setup. The instructions below give you ways to display content.
To get the most out of Instapages be sure to hover and/or click over all the for tips, and when editing content, click the icon for details.
The Basics
1. Create Content
Click the "New" link to create new content.
The two horizontal bars to the left of the block you are editing are used to drag and drop content blocks. Clicking on them also brings up a context menu.
Colors and other styles: Click the # symbol in the menu to add styles to blocks in your content. Click Here for the general CSS guide for Shadows based readythemes.
Important Visual Editor Source View Information: The <>
Visual Editor Source viewer/editor is for html/css only. Storemorph Technology (SMT) code will be corrupted. To create and edit content with SMT code, select the code editor in the SETTINGS
tab.
2. Publish Content and Drafts
Only published content will be displayed live unless you are previewing a draft. Once a draft is ready, publish the updates to make the content live. Make sure the URI is set to "LIVE" if you want to display published content via URL.
3. Display Content
Display basic Instapage content using:
&mvt:instapages:content;
This will display content loaded via URL as well as optional auto-content (see #4 below.)
See the Installation docs for more information on displaying content.
4. Use Instapages for Basic Page Content
Using Instapages to create default page content is an easy way to get more out of your store pages without having to know how all the CSS and HTML works.
Go into the Instapages settings and check the "Automatically load page content" option.
The next step is to go to the page, such as the About Us page, and create some content and assign it the same code as the page, in this case, ABUS. Click on the "Settings" tab for this.
When someone visits your About Us page the content you assigned to ABUS can be displayed using the same page item as before:
&mvt:instapages:content;
URI System
Instapages leverages the built in Miva Merchant URI system. Once you set a URI to "live" mode the content will be accessible by loading the URI.
URI Settings: For most cases, set the URI type to "NORMAL" and check the "Use as Canonical URI" option.
Loading and Displaying Content
The installation guide describes the most basic way of displaying Instapages content via URI
There are also more advanced ways to load and/or display Instapages content based on tags, codes, and a mixture of both.
When loading content into variables using the page items below, the variable name will automatically have instapages
appended to it.
For example, if content is loaded into content_items
via the into:content_items
method (described below), it will be accessed via l.settings:instapages:content_items
or &mvt:instapages:content_items;
. This way instapages data stays out of the way of other store data.
Tag Loading
Simple Load: Load a content list based on a tag. The list will be sorted by content code and order.
Use the "simple" command to load content lists when making a list of links. This method is faster and uses less resources than the load:rendered
method (described below.)
The examples below loads content using the tag "support" into the variable l.settings:instapages:content_items
- Tags must be one word when using them to load content this way.
- The
content_items
variable can be whatever you want.
<mvt:item name="instapages" param="load:simple tag:support into:content_items" />
Simple mvt:foreach
loop to display the titles and links:
<mvt:foreach iterator="item" array="instapages:content_items">
<div><a href="&mvt:item:uri;">&mvt:item:title;</a></div>
</mvt:foreach>
Rendered Load: Load a list of rendered content based on a tag. Useful if you want to display multiple content items at once.
<mvt:item name="instapages" param="load:rendered tag:support into:content_items" />
Simple mvt:foreach
loop to display the titles and content:
<mvt:foreach iterator="item" array="instapages:content_items">
<div>&mvt:item:title;</div>
<div>&mvt:item:content;</div>
</mvt:foreach
Dynamic Tag Loading: Tags may also be loaded using global or l.settings style variable names. This makes it easy to load tags based on category, product, or page codes for example. This also works for codes.
<mvt:item name="instapages" param="load:rendered tag:g.some_tag into:content_items" />
<mvt:item name="instapages" param="load:rendered tag:l.settings:category:code into:content_items" />
Tag List
Load all tags: Loads a basic tag list array into l.settings:instapages:tags
<mvt:item name="instapages" param="load:tags" />
Load specific tags: Loads a specific tag list array into l.settings:instapages:tags
<mvt:item name="instapages" param="load:tags search:tag one,tag two,tag etc" />
Tags Menu with Content:
This will give you a list of tags and their associated content. Useful for menu systems.
<mvt:item name="instapages" param="load:tags" />
<mvt:foreach iterator="tag" array="instapages:tags">
<mvt:item name="instapages" param="load:simple tag:l.settings:tag into:menu_items" />
<mvt:if expr="NOT l.settings:instapages:menu_items">
<mvt:foreachcontinue />
</mvt:if>
<h5 class="c-heading-delta" style="margin-bottom: 10px; margin-top: 10px;"></h5>
<mvt:foreach iterator="item" array="instapages:menu_items">
<div>
<a href="&mvt:item:uri;">&mvt:item:title;</a>
</div>
</mvt:foreach>
<mvt:assign name="l.settings:menu_items" value="''" />
</mvt:foreach>
Tag Group
Use a tag group to make it easier to load and/or organzie a list of tags.
<mvt:item name="instapages" param="load:tag_group group:My Tag Group" />
The tags in the group will be assigned to l.settings:instapages:tags
and can be treated exactly the same way as if you had manually loaded tags using the tag list page item described above.
Why use tag groups instead of creating a tag list? The only difference is that you can set up your tag groups in the Instapages admin and if you want to add new tags to a list you don't have to do any template editing. The end functionality is exactly the same and boils down to personal style.
Code Loading
Codes help group content. This is useful when the content is sharing a tag because the content array will be grouped via code.
For example, if you have content sharing a tag called "support" and loaded using one of the tag load page items above, all of the content sharing the "support" tag is loaded and also grouped into sections based on the codes you assigned to each content item.
Each of these "code" groups would be ordered by the "order" setting.
Example:
Let's say you have six posts that all share the tag "support". Three of the posts are about installing a product and have the code "Installation Information" and three posts are about removing a product and have the code "Removal Information."
When the "support" tag is loaded, the posts will be grouped correctly.
Basic Code Load
The easiest way to load one Instapage content item is to use a code. In this example the code for the content is instapages_demo
- on the first line the page item loads it and on the second line, the page entity displays it.
<mvt:item name="instapages" param="load:rendered code:instapages_demo into:instapages_content" />
&mvt:instapages:instapages_content;
Code Example 1 - Use Codes For List Heading
We use the code as if it were a heading in a menu. When the code changes during the loop, we output a new heading and then continue with listing the content titles.
<mvt:item name="instapages" param="load:simple tag:support into:content_items" />
<mvt:foreach iterator="contentitem" array="instapages:content_items">
<mvt:if expr="l.settings:contentitem:code NE l.code_bak">
<b>&mvt:contentitem:code;</b>
</mvt:if>
<a href="&mvt:contentitem:uri;">&mvt:contentitem:title;</a>
<mvt:assign name="l.code_bak" value="l.settings:contentitem:code" />
</mvt:foreach>
Code Example 2 - Load Tag/Code List With Non-Live URIs Becoming Headings
In this example the codes are again used to group content but instead of displaying the code for the heading, we display a content title.
To make this work we create a content item and give it 1 for the order (along with the same tag and code as other content in the group), then publish it without making the URI live.
As we loop through the list of content items we can check for non-live URIs and assume they are posts being used for headings in a menu or list. We could also check to see if it's the first item in a code group and then display the content title rather than the code.
<mvt:item name="instapages" param="load:simple tag:support into:content_items" />
<mvt:foreach iterator="contentitem" array="instapages:content_items">
<mvt:if expr="NOT l.settings:contentitem:uri_id">
<h4>&mvt:contentitem:title;<h4>
<mvt:else>
<a href="&mvt:contentitem:uri;">&mvt:contentitem:title;</a>
</mvt:if>
<div></div>
</mvt:foreach>
Code Example 3: Load content based on code.
You can also load content based on the code alone. When you do this, all content that shares the code will also be loaded into the l.settings:instapages:_code_items
array.
This will load content that uses the code SPECIAL
:
<mvt:item name="instapages" param="load:rendered code:special into:my_instapage_content" />
Display:
&mvt:instapages:my_instapage_content;
Using Instapages for Page Content
Instapages can be used to create default content for pages.
- check the "Automatically load page content if it exists." option in the module settings
- assign the Instapages page item to the page
- click the Instapages tab and give some new content the same code as the page you're on
This will automatically load the Instapages content when the page is loaded.
Display content with the ABUS code on the About Us (ABUS) page:
&mvt:instapages:_page:content;
Using Instapages for Product and Category Descriptions
Instapages is available in a tab when you're editing a product or category and can be automatically displayed if available.
Check the "Automatically load product and category content" option in the module settings and then assign the Instapages item to the Product Display (PROD) and/or the Category Display (CTGY) templates.
Instapages automatically uses the product or category code for this content.
When g.category_code
or g.product_code
are in the environment, Instapages loads the content associated with the product or category into special variables:
&mvt:instapages:_product:content;
and
&mvt:instapages:_category:content;
Products With a Content List
If more than one content item has been created for a product, a content array will be loaded into l.settings:instapages:_product_items
and sorted by order.
<section>
<mvt:foreach iterator="contentitem" array="instapages:_product_items">
<a href="&mvt:contentitem:uri;">&mvt:contentitem:title;</a>
</mvt:foreach>
</section>
Note that each content item created for a product uses the product code. Changing the product code will mean extra work to manually change the codes in Instapages.
Automatic Product/Category Descriptions
This option replaces product and category descriptions without any template work.
If you turn on the "Automatically replace product and category content if it exists." option in the module settings your Instapages content will automatically replace the default product or category content and you do not need to make any page template updates.
Content is only replaced if it exists, otherwise default product/category content will display.
Using Page Items and SMT Code
You can't use page items or SMT code such as <mvt:eval expr="l.settings:something" />
in the visual editor.
However, if you open up content for editing using the <> code editor button then you can use any valid SMT and page items in the content. The one caveat is that once you add code to your content, DO NOT switch back to the visual editor or your code will be lost and/or corrupted.
You can also switch to the code editor from the Settings tab under the content you are editing. Change the editor from VISUAL to CODE and update.
Using Page Entities
In most cases you can use page entities, such as &mvt:product:name; in your Instapages content. This is not guaranteed to work in every case so you'll need to experiment.
Scheduled Publishing
Content can be scheduled for publishing by selecting a date in the "SETTINGS" tab.
Miva Merchant Scheduled Tasks
If you use the publish scheduling features it's recommended to set up a scheduled task in Miva Merchant to do this.
- Go to your Store Settings
- Click on the "Scheduled Tasks" tab
- Click the blue "Create New Scheduled Task" button
- Description field: Enter something like "Instapages Auto-Publishing"
- Operation dropdown: Select the "Instapages: Auto Publish" option
- Schedule field: Set it to run once a day (or whatever you like)
- Click the blue "ADD" button.
- That's all!
Note that you can also manually run the scheduled publishing task by checking the option when editing content.
Content Item Data Structure
Instapages CONTENT data structure:
- content_item:id
Row ID.
- content_item:title
Content title. - content_item:code
Content code.
- content_item:content
Rendered content.
- content_item:publish
Published time_t.
- content_item:publish_formatted
MM/DD/YYYY formatted publish date.
- content_item:created
Created time_t.
- content_item:created_formatted
MM/DD/YYYY formatted created date.
- content_item:updated
Updated time_t.
- content_item:updated_formatted
MM/DD/YYYY formatted updated date.
- content_item:notes
Notes from Content Extras section.
- content_item:orderx
Order. - content_item:disp_order
Runtime sorting field.
- content_item:source_d
Source for drafts.
- content_item:source_p
Source for published material.
- content_item:content
Runtime rendered content output.
- content_item:meta:subtitle
From Content Extras section.
- content_item:meta:summary
From Content Extras section.
- content_item:meta:seotitle
From Content Extras section.
- content_item:meta:description
From Content Extras section.
- content_item:meta:keywords
From Content Extras section.
- content_item:meta:head
From Content Extras section.
- content_item:meta:image
From Content Extras section.