Shopster's Help and Support

Edit Store Layout and Design

Users with Shopster PowerMerchant or enhanced feature functionality have the ability to edit their store template design. The Edit Layout and Edit Assets tabs provide advanced designers with access to the template code for unlimited design flexibility.

Shopster templates use string templating language, which is why you see the .st suffix attached to file names within the Edit Layouts section. Below is a short glossary to help you understand how string templating language applies to your Shopster templates.

How to use:

1. Under the Design heading click on the Edit Design link
2. Click into the template file you wish to modify and add your customizations. Remember to save your work.
3. We recommend backing up any customizations you make to your store template using the Upload/Download feature. Because your customizations are template specific, if you switch templates the changes will not carry over. A copy saved on your computer comes in handy if you ever want to revert to an older version of your store design or reapply a specific set of design attributes.

Glossary:

Template - A standard layout or ready-made format which typically includes text and graphics and contains the basic details of a web page’s dimensions.

String Template- String template is a templating language much like Java. You can recognize it when you see a .st at the end of your template file names. In the source code, look for the $ signs, they will signal the start and the end to a set of string template code. Anything else will be written in HTML.

404.st - page not found, this is the template that will be called if a page doesn’t exist for a customer to view. You can modify this message and create your own should you choose to do so.

cart.st - the shopping cart content template not including the frame.

checkoutframe.st – The template for the frame that wraps around the checkout process

Designer.xml – The most important template. Designer.xml lays out all the GUI options for editing settings and menus. It is the template that is responsible for linking your actions within Shopster to what is displayed on your Storefront for your customers to view. If Designer.xml didn’t exist, rather than being able to click a button and change the color of your template, you’d have to go into the template in question and code the change yourself.

frame.st – This is the main default frame that wraps around your store content (with exception of the checkout and any other places you’ve referenced custom frames).

page.st – The template that is applied to the pages you create. In other words when you create a page in the manage pages section of the site, this is the template that it references.

productdetails.st – The template that is applied to the product details screen

productlist.st – The template that is applied to any product lists on your storefront, your customers will see this template when browsing through your products or when search results are displayed.

productreviewer.st – The product review browsing template, this templates is responsible for displaying the next, previous and page result summary buttons that a customer can click through to view consumer feedback.

Tips & Tricks

• Be very careful if clicking into the various folders within the edit assets tabs. The delete link is very close to the file link and you don’t want to accidentally delete one of your primary folders.
  
  

• Please do not change the names of Shopster’s pre-created .st (string template) files. These names are used and linked throughout the code we use behind the scenes to make your account and storefront function. If you try to change these names, your store will not work. You can however create new .st files and reference them where appropriate within the site code.