MM Custom (DIY) Templates - 2.93+ Responsive

We've updated our DIY templates for the new 2.93+ responsive system and they're now available for you to use.

We have premade graphic packs available in your clientarea's download area, you can preview them here or create your own with the instructions below

You can use them as is, or customize them for a look that's all your own by simply replacing only 4 -5 images. To customize these templates you will need to either purchase graphics from one of the designers that work with the MM system or make your own, name/rename the images to those specified in the table below and upload them to your /images folder.

The template images are:

pagebg.png The main background image for the page - it should be "seamless"
Left sidebar menu section headers
diyshop.png This displays above your category links in the left sidebar menu
diyinfo.png This displays above your informational page links in the left sidebar menu
diycheckout.png This displays above your "View Cart" link/image in the left sidebar menu
diyfeatured.png This image is only used in the DIY3COLUMNtemplate and shows above the listing of featured items.

Sizes:

The pagebg.png image can be any size but should be "seamless"

The diyshop.pngdiyinfo.pngdiycheckout.pngdiyfeatured.png should all be about 200px (w) X 60px (h)

Logo - normal sized logos are anywhere from 200px wide to 600px wide. If you would like to upload an image to fill the full header area you would want that to be no larger then 1200px ( w)  X 300px ( h)

Create/Rename your images:

You'll need to first create or rename your images. To create the images you can use your favorite software or if you don't have one you can try:

Paintshop Pro

Paint.NET

GIMP

or an online editor

Canva

PicMonkey

To rename existing images, open them one by one in your preferred graphics program ( see above for suggestions). Then click "Save as..." and rename it with one of the names above ( depending on which image is it ) If the image originally has a different extension ( .gif, or .jpg ) you'll also need to change the "file type" to png, most graphic programs allow you to choose the name and file type when you choose "Save as..." from the menu

Logo:

  • You can create a regular sized web logo or create an image that will fill the full header of the template
  • Your logo - unlike the template images in the table above - can be name anything you like
  • In your store admin, click "Images" under the Web Site header
  • Under the "Catalog Images" area, click the "Update" button.
  • Upload your logo or full header image to the "Logo" field
  • Scroll down and click "Update"

To upload your images:

  • In your storeadmin, click "Images" under the Web Site header
  • Under the "Image List" section, making sure "General Image Directory" is showing the drop down menu,  click the "Show Images" button.
  • Click "Browse" to find the image on your hard drive - double click it.
  • Click "Add"
  • Repeat to upload all your custom template images.

Customize the colors to match your graphics:

  • In your storeadmin, click "Fonts & Colors" under the Administration header
  • Click within any of the colored fields to change the color - here's a listing of what each field controls
  • Once all are changed that you want to change click the Update Settings button at the bottom

Activate your template:

  1. Click the "Template" link, under the Web Site header
  2. From the drop down menu choose either DIY2COLUMN or DIY3COLUMN
  3. Check the Update Link Colors box
  4. Click "Apply"

Page Groups:

The DIY template use something called "Page Groups" which allow you to control which menu the links for pages will show. For both of the 2.93+ DIY templates the page groups are:

Page Group #1 shows the links directly under the logo/header area

Page Group #2 shows the links in the left sidebar menu under the "Information" section

Page Group #3 shows the links in the footer area above the site copyright.

You can place a page link in 1 of those groups or all - depending on where you want the page's link to show. To place a page link in a page group you would go into the Web Site > Pages area of your admin, click to EDIT the page you want to work on and then scroll down to the bottom where the "Page Groupings" field is. Place a check in any of the boxes for groups 1,2 or 3 for this page and save the change. Do this for any page that you want to have a link show on the template.

Examples of the difference in looks between using a regular sized logo and full header image as the uploaded logo

FULL HEADER IMAGE UPLOADED IN THE LOGO FIELD - this header image is 1200px wide and 300px high

REGULAR SIZED IMAGE UPLOADED IN THE LOGO FIELD - this logo is 353px wide and 140px high

 

Copyright information

These templates and their coding is copyrighted to Merchantmoms and can only be used on sites hosted at MM. If you choose to leave MM you only have permission to take your own images, not the template structure ( coding and file ) or it's images.