Upgrading a v4 Store Design to v5 Theme

Last Updated: Feb 03, 2015 04:13PM EST
The design and layout of ProductCart 5.0 has been completely revamped in order to allow for full CSS3, HTML5 and responsive design support.  This means that your existing designs will need careful attention in order to upgrade correctly. We'll take you through the process step by step. Let's get started!
ProductCart v5.0 comes with a theme that is identical to v4.7. So if you are using the default v4.7 design there is no need to complete this guide. This guide is only for those that have fully customized their ProductCart store design.
In order to upgrade your existing design you will need some basic experience with FTP Software and HTML Editors (e.g. Notepad or Dreamweaver). If any of the terms and steps in this guide sound like a foreign language... or are overwhelming... then we recommend contacting the person that created your design OR taking advantage of our upgrade service.

Copy your site’s assets (CSS + Images) over to v5store/pc/theme/v47_upgrade

ProductCart v5 has a new feature called Themes, which gives designers added flexibility over the Look & Feel of the storefront. All of the available themes are located in a new directory located at v5store/pc/theme/{theme-name}. To make upgrading your design easier we created an empty theme for you. This theme is located at v5store/pc/theme/v47_upgrade. The first task in migrating your design is to copy all your design assets, such as your images, JavaScripts, and CSS styles, into the appropriate locations within the new theme folder. We'll update the links in the HTML later. For now, just copy them over to their new folder.

 
We recommend that you find and separate out any changes you might have made to pcHeaderFooter.css, pcStorefront.css and additional minor stylesheets and move them into the file theme/v47_upgrade/css/theme.css  If you already developed your previous designs by adding a separate stylesheet and left those ProductCart stylesheets alone, then you only need to move your custom stylesheet.
 

Copy your Header and Footer HTML

  • Download pc/header.asp from your v47 store and open with an HTML editor. Locate the <body> tag and copy everything below it. Next, Paste the HTML you just copied into the file theme/v47_upgrade/header.asp. Note: You no longer need the <head> section of header.asp so do not worry about copying that over. Save the file and continue.
  • Download pc/footer.asp from your v47 store and open with an HTML editor. Locate the closing </body> tag and copy all the content above it. Paste the HTML into the file theme/v47_upgrade/footer.asp. Do not copy the snippet <!--#include file="inc_footer.asp" -->. Only the HTML needs to be copied. Save the file and continue.

Now that the HTML is copied over let's make sure it is all compatible with v5:
 
  • Look through the header and footer for any ASP code that may connect with the database.  Specially, you are looking for code that begins and ends with the tags <% and %>. If you have any such code snippets then you'll need to add the following snippet to the very top of the file.

    Here is the snippet needed for advanced features...
    <!--#include file="../../inc_theme_common.asp"-->

    This is what the header.asp will look like with the snippet added...

     
  • Now lets look through the file for any code snippets we can upgrade to v5.  Below is a list with the old code snippet and the new one you should replace it with.

    The old v4.7 snippet for Small Shopping Cart
    <!--#include file="SmallShoppingCartSmall.asp"-->

    should be replaced with the new v5 snippet as follows...
    <!--#include file="../../SmallCart.asp"-->

    The old v4.7 snippet for Category Menu
    <!--#include file="inc_catsmenu.asp"-->

    should be replaced with the new v5 snippet as follows...
    <!--#include file="../../inc_catsmenu.asp"-->

    The old v4.7 snippet for Category Search Fields
    <!--#include file="CategorySearchFields.asp"-->

    should be replaced with the new v5 snippet as follows...
    <!--#include file="../../CategorySearchFields.asp"-->

    The old v4.7 snippet for Recent Products
    <!--#include file="smallRecentProducts.asp"-->

    should be replaced with the new v5 snippet as follows...
    <!--#include file="../../SmallRecentProducts.asp"-->

    The old v4.7 snippet for Small Search Box
    <!--#include file="SmallSearchBox08.asp"-->

    should be replaced with the new v5 snippet as follows...
    <!--#include file="../../smallSearchBox08.asp"-->
     

    New Code Snippets (Optional)

    In v5 we have some additional code snippets that you can incorporate into your header or footer.  Take a look at the chart below for a list of available snippets:
     
    Social Icons <!--#include file="../../smallSocialLinks.asp"-->
    Payment Icons <!--#include file="../../smallPaymentOptions.asp"-->
    Useful Links <!--#include file="../../smallUsefulLinks.asp"-->
    Quick Cart <!--#include file="../../smallQuickCart.asp"-->
    Bootstrap Cart <!--#include file="../../SmallQuickCart_Bootstrap.asp"-->
    Order Preview <!--#include file="../../opc_orderpreview.asp"-->
    Slide Show <%
    call opendb()
    Session("HideSlideShow") = "1"
    pcs_ShowSlideShow()
    call closedb()
    %>
     

    Updating CSS Images Paths

    The final step is to update your CSS paths so that images point to their new directory.

    Here is the typical CSS style for an image...
    background-image:url(images/pcv4_h1_back.jpg);

    the CSS above would now look as follows...
    background-image:url(../images/pcv4_h1_back.jpg);

    Notice that all we did was add ../ to link the image to its new location.
     

    Name your Theme

    Congratulations! You created your first custom theme. It is only appropriate that you name it. Use your FTP Software to rename the folder v47_upgrade to any name of your choice.
    Your theme will not be available on the theme menu unless you give it a name. Please do not skip this step.
    Try to keep the name simple and avoid spaces and special characters. Use an underscore or dash instead of spaces.
    That's pretty much all there is to upgrading your design.  To recap, you essentially just moved files from one place to another and then updated the paths to connect everything. 

    Next, head back to the Upgrade Guide and pick up where you left off at Step 10.
647e99095133bd6d1ae916f97dc7f92f@productcart.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete