Template shopsite

Merchants and designers can read through the Do's and Don'ts of creating a slideshow on your website home page. To quickly add the carousel feature to your custom page template, all you need to do is use an Include File.

Add the code below into your custom page template where you would like the carousel to appear. For designers who wish to have more control over the carousel feature, you can use the example code below and modify it to fit your needs. Here is the basic CSS that goes with the carousel feature above.

The new product image zoom feature works with the existing product multi image feature on the more information page. If you would like more control over the zoom feature, or even implement your own image display feature using ShopSite's image fields, you can start with the product image zoom HTML code below and modify it to fit your needs.

Much like the carousel feature, the product zoom feature uses FOR and VAR tags to loop through all extra product image fields. AsSeenInImage --] [-- Product. SavedAmount --] - will give you the difference between the product price and the sale amount. AsSeenIn --]. OopsOptions --]. To allow customers to sign into their account without leaving the page they are on you can implement the Ajax sign in feature on your store pages. ShopSite v12 has a built in wishlist feature.

Last, 3 create your own custom wish list template wish all necessary defines. The link below provides more detailed information about all three of these steps. Wishlist Enhancement tied to Customer Registration. These products will be looped in the first define and displayed on your "View Packing Slip" screen. Coupons and products will be looped in the same area, so you will likely want them formatted similarly.

If you are ready to create your custom packing slip template, go to the custom packing slip template cookbook page to view a complete list of new available and required tags. There are three main features in ShopSite Version 11 SP2 that should be added to your custom templates. Product Reviews The Product Reviews feature allows customers to place reviews for products they have purchased in your store. The product review star summary can be displayed anywhere the product is displayed, on category pages, search results screens, as a cross sell product, and in mobile.

On the product more information page customers can see the list of top reviews as well as see the link to "view all reviews. Here are step-by-step instructions on how to add the product reviews feature in your custom templates.

Real-Time Inventory Display Merchants can choose to display the actual inventory of a product or simply just "In stock" or "Out of stock," for products in their store. There are two main new features in ShopSite Version 11 SP1 that should be added to your custom templates. Other tags listed on this page are modifications to existing tags and do not need to be changed or added to custom templates. Second, if you are using custom page and product more information page templates, make sure that you have the following tags in your page template s and your product more information page template s.

Mobile Template Tags If you would like to customize the mobile pages further than what the default mobile templates allow, I would suggest copying and modifying the mobile templates.

With mobile templates, many of the regular template tags will work, but there are some new tags that are specific to the mobile configuration features. You can remove or edit this CSS, but I would wait to do so until after you have seen what the site looks like with it. Note: Lines that start with a pound sign in ShopSite are commented out.

So if you have a line in your CSS file for an id that starts with the pound sign, simply add a space in front of the pound. For example: " id" would become " id" note the space. If you have the element and id, you don't need to add a space.

For example, you would not need to add a space before "div id". You are now ready to publish. When you make changes in your ShopSite store such as add pages, edit products, or modify colors, the "Publish" button will appear to let you know there are new changes in your site that are not yet live and need to be published. However, when you edit templates, you do not see the "Publish" button. Instead, when you are ready to publish template changes, you can force a publish.

Below is what my store looked like when I published after editing the header, footer and CSS files. Notice the bag icon next to the mini cart is missing; we'll get to that in a moment. The header, footer and CSS files are all used on both secure and non-secure pages. For this reason we need to make sure that the URLs for all images and other files can change based on the security of the page a customer is on.

When on the checkout screen all images and files need to be secure, but when on regular store pages images do not need to be secure. Start by uploading all your template images and files into ShopSite. In your custom BB-Header. URL --]. Celebrate Yay! You have created a custom template for your ShopSite store! Below is the code to add to your custom page template in order to place the ShopSite search field on your ShopSite generated page.

For every page in ShopSite, merchants can choose to display the page name, add a banner graphic, and use up to 3 main text fields. Add the code shown below in place of " content goes here " in your HTML.

Most websites have top and side navigation menus that are the same on all pages. In the main content, a page may have sub pages or sub categories to help shoppers drill down to what they are interested in.

For example, if you click on "shoes", you will come to a shoes page which may list "sandals" "high heels" and "sneakers" as sub pages. Add the code below where you would like the sub pages to appear. Most often designers will put this code between the text fields 1 and 2 so that merchants can add text above the sub pages in text 1 and text below the sub page in text 2.

In addition to adding the loop tags to loop through any assigned page links, you also need to define how you want your links to be laid out within the loop. Now for the money maker section, the products. Most designers will add the tags to display the products between text fields 2 and 3 so that merchants can again add text above and below the products listed on a page.

If you've been paying attention to the code you've been copying and pasting, you would have noticed that many of the DIVs have classes or IDs assigned. This is largely so that you can style the look and layout with CSS, but these classes and IDs also help with the structure of the page.

It is suggested that you add the CSS below to the stylesheet for your page. Product Templates.