Resources & information

Shop Maker V4 User Guide

Content and design

You can completely change that design of your shop by editing your header boxes, column boxes and footer boxes.

A header box will appear at the top of the page while a footer box will appear at the bottom. A column box will appear on either the left or the right of the shops body.

Once you have created your content boxes, you can tell the system where to display them by editing the layout. If you click on the Edit layout button, you will see that there are 10 slots for the header, footer left column and right column areas. You can select from the drop down menus, which content boxes to display in which positions.

An example would be to create a logo header box that contains your logo. To achieve this the first step would be to upload your logo image file, which can be done by clicking Uploaded files. Once your file is uploaded, you will see the Path of the file. This will be needed to insert the image into your new logo header box so highlight the Path and copy it (CTRL C) or Right Click > Copy

Then go back to header boxes and click Add a new header box. You can give this header box a title of Logo panel. You will see a content editor where you can design this new panel. To insert the image you have just uploaded, you would click on the image icon . This will display a pop-up box that you can enter your image details into.

The most important of these is the Image URL. You can paste the Path you have just copied into this field by pressing CTRL V or Right Click > Paste. If you copied the path correctly, the Image URL should be something like this: sm_uploaded_files/YOURFILENAME. You will then click the Insert button, which will put the image into your content editor.

Once you have finished editing your content, you can click the Add header button to save the header box.

To display this new header box, click the Edit layout button. You can now select to display this header box by selecting it in one of the header box slots.

Custom pages

You can also create custom pages in much the same way as a content box. The only difference is that the custom page will be displayed in your shops body. You have the option of displaying a link to each custom page in the column information links box as well as the option of displaying the page within your shops columns.

Content editor

The content editor is used throughout the Shop Maker system so it is worthwhile getting to know how this works. This editor is called TinyMCE. To find out information about the editor, click the ? icon when the editor is open.

Row scroller

Shop Maker has a row scroller, which will display your html scrolling from right to left. You can edit the colours and fonts as well as entering bespoke content using the editor. To display the row scroller, a header or footer box is required that contains the system element code ~row_scroller~.
See system elements for more information about including element code.

One good feature about the row scroller is that it remembers its position when a shopper navigates to another page. This way, it doesn�t keep starting from the beginning with each page request.

Product scroller

This feature displays your selected products scrolling in a category box from bottom to top and is perfect for featured products or special offers. You can select which products to display and which order to display them in. To display the product scroller, a column box is required that contains the system element code ~col_product_scroller~.

System elements

System elements can be embedded into your header, column, custom pages and footer boxes and will generate the Shop Maker standard elements within your own shop design.
For example, entering ~col_categorylinks~ into your design in the column box editor will generate the category links in your shop.

Will generate

Here is a list of the available system elements for you to include into your content boxes.

Element code	Description
~col_categorylinks~	This will display all of your parent categories one category per line.
~col_informationlinks~	This will display links to your custom pages.
~col_login~	This will display the column login form.
~col_search~	This will display the column search form.
~col_shoppinglist~	This will display the column shopping list box.
~col_product_scroller~	This will display the product scroller.
~row_categorylinks~	This will display all of your parent categories in a row.
~row_login~	This will display the row login form.
~row_scroller~	This will display the row scroller.
~row_search~	This will display the row search form.
~body_contactform~	This will display your contact form within a custom page.

If you click on the System elements button in your administration area, you will be able to see what elements are available to you and examples of what the codes generate.

Layout settings

You can specify your shops width, alignment and the widths of your left and right columns.
Please bear in mind that not everyone that views your site will see it the way you do. People have their monitors set to different resolutions. As a guide, the majority of people have their screen resolution set to 1024 pixels wide so a good size to have your shop would be 980px. You can specify a percentage value here instead, which will be safer. 100% will make your shop fill the users screen.

You can also change the default product and category layout settings here as well as a few other self explained settings. There is also the option to bulk change all category and product layouts here.

System images

These images are used through your shop system for things like buttons to your invoice logo. They can be changed easily by selecting a file on your computer and uploading it.

Quick edit buttons

If you are logged in and you have an administration account, the show / hide quick edit buttons link will appear at the top of the screen. When you have this set to show, links will appear above all of your content boxes, custom pages, categories and products giving you another route to your administration areas.