“I want to customize, or change the design layout of my store’s Items list, Item detail view, cross-selling layout, and/or Category table. In other words, I want to modify the catalog to look a certa

Would you like to...

Print this page

Email this page

Post a comment

User Opinions

50% 50% (2 votes)

---

How would you rate this answer?

Helpful

Not helpful

Thank you for rating this answer.

Short Answer:

Layout:
Use our templating system when the basic settings do not give you enough control. 
Another alternative is to create your own product/category pages.  Please see related article before attempting this latter approach.

Styles/colors only:
  You may also choose to overwrite our styles with your own (when our built in stylesheet and basic catalog/cart settings are insufficient).

Detailed Explanation:

If you are just looking to override our stylesheets with your own, then that information can be found near the end of this article.

About our Basic Settings:
For example, let’s say you wanted a certain layout for all of your products  in your items list.  In the manager, there are some settings which let  you determine basic layout.  Under SETTINGS: Catalog Settings, cart, and  checkout Settings, as well as Stylesheet Settings.   When this is  insufficient, please consider using our template system.

Template system: How to Use it:

When the basic settings in the Veracart manager do not give you  enough layout control, you can actually insert your own HTML code into our templates,  which are then automatically applied to each Item/Category in the store.  For  a very simple example, using the Items list, you want it to display:

1.  The Item thumbnail image
  2.  center the image
  3.  have a brown, 1 pixel border around it
  4.  then underneath it, you want the product name to be displayed in red
  5.  which is a hyperlink to the Item Detailed View
  6.  but you don’t want to show the price
  7.  You want to display 4 of these items per row

I have highlighted to two things (#3, #6) that just can’t be accomplished  using regular settings on the settings page in the Veracart manager.  Let  us rephrase:

3.  there is no catalog setting to create a stylized brown border around  the images. 
  6.  you want to hide the price only on the list view—there is no  setting for that either.

So, in the SETTINGS >Catalog Settings, you could enter this into the “Item  List - Cell Template.”  You may want to improve on this since this  is fairly generic.

<table><tr><td>
  <center>
  <span style="border: solid 1px #996600;">
  [IMAGE_SM]</span>
  <BR>
  <font color=”red”>[NAME_LINK]</font>
  </center>
  </td></tr></table>

So the tag [IMAGE_SM] actually gets replaced by the small image you have uploaded  for that product, for every product in your store, etc...
  The tags in this example such as [ITEM_NAME] are ones we provide to you (the  link next to the template field “[CODE REPLACEMENTS].”  We  have a fairly complete list of tags.  You can of course reference your  own stylesheets as well, instead of using inline styles as we did in this example;  more about stylesheets later on.

IMPORTANT:  Please see the related article about our default templates,  otherwise, it can cause problems if you do not know which CODE REPLACEMENTS are required.

Number of Items per Row in Item List View:

Using this example, you might ask, “how do I adjust how many Items per  row, or per page to show up in the store?  Or create a divider between  rows?  There are settings within the manager that let you specify how  many Items per row should be displayed.  

“Item List – Column Count” 
  “Paging - Max Items Displayed Per Page.”   
  “Item List - Row Separator”
  Etc…

Which Templates We Offer:

  Advantages to the Template System:
     
The advantage to this approach is that now when the store/business owner creates  a new product in her store, it automatically applies this design—in other words, it is very easy to update/maintain your entire store design very quickly. 

In this example, we use the Items list, but we also offer a template for the Item    detail view page, the Category table (this displays    a table of all your categories), the cross selling list,    etc…  You can even create different template for different categories;    meaning, in the case that you need one Category to use one particular design,    and another Category to use another design.  To do that, go to the Category    you want to customize, and under Advanced Settings, you will find the same    template fields.

Limitations to the Template System:

The disadvantage is that this template system cannot do everything in the  world, especially when your Items list for example is not consistent for each  Item; or in the case where you want to display multiple categories on a single  page in some unique layout, or you want to have the design change per product.  These  examples are not common, and can often but in these cases, you would need to  hardcode the hyperlinks, or perhaps create your own product pages and add our  hyperlinks to your “Add to Cart” buttons. 
                   

StyleSheets : Using Your Own Stylesheets

Yes, you can even reference your own stylesheets!  Using our built-in  stylesheets however will allow you to control those respective elements from  within the Veracart manager.  To simply use your own stylesheets,  to override ours, just make sure your styles come after the shopping cart Header  code.  You can view the generated output source of the page to get our  current list of styles that your cart is using (or click “File > Save  As” in your browser).

Header/footer :  Changing the Site Design for Each Category

As you know, this template system all occurs within the content area (meaning,  the content that changes as you browse the site, like the Items list and Item  Detail View pages).  Some people then intuitively ask if they can change  their site design for the header and footer, or the area outside the content  area, per Category.  The answer is yes.