Glossary Item Box

Squirrelcart v6.1.0

v5.0.0

Overview

This page has been written as a guide to aid you in upgrading your site to v5.0.0 and after. Please read this page in its entirety before attempting to upgrade.

Lighthouse Development (the makers of Squirrelcart) offer upgrade services. Please see this page for more information:

http://www.squirrelcart.com/upgrade-service

 

Our standard upgrade service does not include updating custom theme templates. If you are interested in pricing to update your custom theme for version 5 please contact us:

http://www.squirrelcart.com/contact

Slideshow Module

As of Squirrelcart version 5.0, the slideshow module is deprectated because the free script it relies upon is not responsive. This module is no longer part of Squirrelcart Pro.

We have updated the Slideshow to work with version 5. It will work as it did in prior versions but is not responsive.

If you were using the slideshow module prior to your upgrade to version 5, you will need to install the slideshow module separately. You can do this as follows:

  1. Download the Slideshow module from our website
  2. Unzip the file
  3. Upload the slideshow folder to your Squirrelcart 5 squirrelcart/modules folder

In future versions, this module is going to be replaced by built-in features that provide similar functionality. Version 5 has a built-in homepage slideshow that you can use for the homepage, which does not require the slideshow module.

After upgrading, if you want your website to be responsive (mobile friendly) we recommend deleting any slideshows you created using this module.

PayPal Payments Pro Changes

As of Squirrelcart version 5.0.0, we no longer support communicating with PayPal Payments Pro using an API certificate file. If the API Signature field on your PayPal Payments Pro payment gateway record in the control panel is set to a filename like paypal_cert_key.pem, you will need to update your PayPal settings to use an API signature instead. See the setup instructions for PayPal Payments Pro for more info.

Category Image of Name Field Removed

The purpose of the Image of Name field on category records was to be able to use an image that represented the actual text of a category name. This was intended to give a way of making the text look a little nicer as compared to browser rendered text, so you could use your own fonts, shadows, etc...

Since that feature was added long ago, HTML and CSS has come a long way making it no longer necessary to use an image to make text look unique. Through the use of web fonts and CSS drop shadows, you can make text look more custom. This approach has a benefit of making the text readable by search engines. Using images in place of text has a negative impact in terms of SEO because search engines can't read text inside images.

With that in mind, the category "Image_of_Name" feature has been removed in version 5.0.0. You can still show images for each category (and for subcategories) using the other image fields on your category records.

If you want the name of the category to appear differently, you can tweak your CSS to change the colors of the category titles, to add a background image, etc...

 

 

New Search Nav Block

Version 5 now includes responsive options to make your store look great on all devices. This includes a mobile menu that displays your nav blocks via a scrolling nav that appears when a menu icon is clicked on smaller screen devices.

 

We've added a new Search navigation block which appears as the first nav block in this nav for new installs. See this page for instructions on adding this nav block to your store.

 

Checkout Progress Indicator Changes

We recommend making the labels in the checkout progress indicator blank. That can be done on the Visual Settings page of the control panel:

Theme and Template Changes

If you are using a custom version of any of the below template files, make the changes outlined for the custom version of that file inside your custom theme folder (Example: squirrelcart/themes/YOURTHEMENAME). If you are not using a custom version of that file you do not need to make any changes. This section is a guide only. If a v5.0.0 template file has a lot of changes, you are probably better off reverting to the default version by removing your custom version of the same file. 

How to revert a template

If you have a custom version of a template listed below and do not wish to update it, you can revert it. Reverting a template causes the master version of that template to be used. To revert a template that is in your custom theme folder, rename or delete it. Template changes begin below:

 

account_choice.tpl.php

  1. Find this:

    <label>Remember me:</label><input type="checkbox" name="acct_choice[login][remember]" <?php print $Remember_Checked ?> />
  2. Change to:
    <input id="acct_choice_remember" type="checkbox" class="sc_check" name="acct_choice[login][remember]" <?php print $Remember_Checked ?> /><label for="acct_choice_remember">Remember me</label>   
  3. Find this:

    <h2><a href="<?php print $Skip_Account_URL ?>">Skip Account</a></h2>
    <a href="<?php print $Skip_Account_URL ?>">Click here to continue without using an account.</a>
  4. Change to:
    <?php if ($Skip_With_Email):?>
     <h2>Skip Account</h2>
     <div class="acct_choice_skip_w_email">
      <label>To checkout as a guest, please provide your email address.</label>
      <input id="acct_choice_email" name="acct_choice[skip_email]" type="email" placeholder="Email Address" value="<?php print $Acct_Choice_Email ?>" />
      <input type="submit" class="btn btn_continue" name="acct_choice[skip_submit]" value="Continue as Guest" />
     </div>
    <?php else:?>
     <h2><a href="<?php print $Skip_Account_URL ?>">Skip Account</a></h2>
     <a href="<?php print $Skip_Account_URL ?>">Click here to continue without using an account.</a>
    <?php endif;?>   

also_ordered_products.tpl.php

  1. Find this:

    <?php foreach($Product_Rows as $Product_Row): ?>
     <div class="box_row <?php print $Product_Row['instance']?>">
      <?php foreach($Product_Row['products'] as $Product): ?>
       <div class="box_outer <?php print $Product['instance'].' '.$Product['box_width_class'] ?>">
        <div class="box_inner" style="<?php if ($Product['height_difference']) print "margin-top: $Product[height_difference]px" ?>">
         <?php print $Product['HTML'] ?>
        </div>
       </div>
      <?php endforeach; ?>
     </div>
    <?php endforeach; ?>
  2. Change to:
    <?php foreach($Product_Rows as $Product_Row): ?>
     <?php foreach($Product_Row['products'] as $Product): ?>
      <div class="box_outer <?php print $Product_Row['instance']?> <?php print $Product['instance'].' '.$Product['box_width_class'] ?>">
       <div class="box_inner">
        <?php print $Product['HTML'] ?>
       </div>
      </div>
     <?php endforeach; ?>
    <?php endforeach; ?>

breadcrumb_nav.tpl.php

  1. Find this:

    <li>
     <a class="crumb <?php print $Crumb['instance'] ?>" href="<?php print $Crumb['URL'] ?>"><?php print $Crumb['Link_Text'] ?></a>
    </li>
    <?php if ($Crumb['instance'] != 'last'): ?>
     <li class="crumb_sep"><?php print $Crumb_Separator ?></li>
    <?php endif; ?>
  2. Change to:
    <li><a class="crumb <?php print $Crumb['instance'] ?>" href="<?php print $Crumb['URL'] ?>"><?php print $Crumb['Link_Text'] ?></a></li>  

cart_options.tpl.php

  1. Find first occurrenc of this:

    <a class="btn btn_view_cart" href="<?php print $View_Cart_URL ?>">View Cart</a>
  2. Change to:
    <?php if (!$Cart_Empty):?>
     <a class="btn btn_view_cart" href="<?php print $View_Cart_URL ?>">View Cart</a>
    <?php endif;?> 
  3. Find this:

    <div class="cart_msg">Your shopping cart contains <br />the following item(s):</div>
  4. Change to:
    <div class="cart_msg">Your shopping cart contains the following:</div>
  5. Find second occurrence of this (toward end of file):

    <a class="btn btn_view_cart" href="<?php print $View_Cart_URL ?>">View Cart</a>
  6. Change to:
    <div class="form_btns">
     <a class="btn btn_view_cart" href="<?php print $View_Cart_URL ?>">View Cart</a>
    </div>

categories_all.tpl.php

  1. Delete this line:

    <h1>Product Catalog</h1>

category_as_table.tpl.php

  1. Find this:

    <?php if ($Image_of_Name): ?>
     <a href="<?php print $URL ?>">
      <img src="<?php print $Image_of_Name['dyn'] ?>" width="<?php print $Image_of_Name['width'] ?>" height="<?php print $Image_of_Name['height'] ?>" alt="<?php print $Image_of_Name['alt'] ?>" />
     </a>
     <?php print $Admin_Link ?>
    <?php else: ?>
     <h2>
      <a href="<?php print $URL?>"><?php print $Content_Name ?></a> <?php print $Admin_Link ?>
     </h2>
    <?php endif; ?>
  2. Change to:
    <h1>
     <a href="<?php print $URL?>"><?php print $Content_Name ?></a> <?php print $Admin_Link ?>
    </h1>
  3. Find this:

    <div class="valign_middle req_missing_instructions">
     <?php print $SC['settings']['Required_Field_Indicator'] ?><span> indicates a required field.</span>
     <?php print $SC['settings']['Missing_Field_Indicator'] ?><span> indicates a missing field.</span>
    </div>
        
    <table class="cat_products_table order_info_table" cellspacing="0">
  4. Change to:
    <table class="cat_products_table order_info_table">  
  5. Find this:

    <?php if ($multi_add): ?>
  6. Add this before it:
    <div class="valign_middle req_missing_instructions req">
     required field
    </div>
  7. Find this:

    <button class="btn btn_multi_add btn_bigger" type="submit" id="add_to_cart_link<?php print $Form_ID ?>">Add Items to Cart</a>
  8. Change to:
    <button class="btn btn_multi_add btn_bigger" type="submit" id="add_to_cart_link<?php print $Form_ID ?>">Add Items to Cart</button>

category_preview_box.tpl.php

  1. Find this:

    <img src="<?php print $Thumbnail_Image['dyn'] ?>" width="<?php print $Thumbnail_Image['width'] ?>" height="<?php print $Thumbnail_Image['height'] ?>" alt="<?php print $Thumbnail_Image['alt'] ?>" title="" />
  2. Change to:
    <img class="<?php print $Img_Class ?>" src="<?php print $Thumbnail_Image['dyn'] ?>" width="<?php print $Thumbnail_Image['width'] ?>" height="<?php print $Thumbnail_Image['height'] ?>" alt="<?php print $Thumbnail_Image['alt'] ?>" title="" />

checkout.tpl.php

  1. Find all 4 lines similar to this (Step_1 through Step_4):

    <?php print $Step_1_Label ?><br/>
  2. Remove to:
    </br>

checkout_address_correct.tpl.php

  1. Find this:

    <?php if ($Address_Type):?>
     <h3><?php print $Address_Type?> Address</h3>
    <?php else: ?>
     <h3>Address Type Unspecified</h3>
    <?php endif;?>
  2. Change to:
    <?php if ($New_Address_Type):?>
     <?php if ($Address_Type):?>
      <h3><?php print $Address_Type?> Address</h3>
     <?php else: ?>
      <h3>Address Type Unspecified</h3>
     <?php endif;?>
    <?php endif;?>
  3. Find this:
    <li class="<?php print $Street_2_Class ?>"><?php print $Street?></li>
  4. Change to:
    <li class="<?php print $Street_2_Class ?>"><?php print $Street_2?></li>
  5. Find this:
    <h3><?php print $New_Address_Type?> Address</h3>
  6. Change to:
    <?php if ($New_Address_Type):?>
       <h3><?php print $New_Address_Type?> Address</h3>
    <?php endif;?>
  7. Find this:
    <li><?php print $New_Street?></li>
  8. Change to:
    <li><?php print $New_Street_2?></li>

checkout_pay_order_summary.tpl.php

  1. Find this:

    <h3>Your grand total is below. Need to make changes? <a href="<?php print $Change_Order_URL ?>">Click here</a>.</h3>
  2. Add this below it:
    <!-- Address block section -->
    <?php if ($Show_Billing || $Show_Shipping): ?>
     <div class="address_boxes">
      <?php if ($Show_Billing): ?>
       <div class="address_box bill">
        <h4>Billing Address</h4>
        <address>
         <span class="addr_name"><?php print $Bill_First_Name ?> <?php print $Bill_Last_Name ?></span><br/>
         <?php if ($Bill_Company || $Ship_Company): ?>
          <?php print $Bill_Company ?><br/>
         <?php endif; ?>
         <?php print $Bill_Street ?><br/>
         <?php if ($Ship_Street_2 || $Bill_Street_2): ?>
          <?php print $Bill_Street_2 ?><br/>
         <?php endif; ?>
         <?php print $Bill_City ?>, <?php print $Bill_State_Abbrev ?> <?php print $Bill_Postal_Code ?><br/>
         <?php print $Bill_Country_Name ?><br/>
        </address>
        <div class="addr_footer">
         <a class="addr_edit tip" href="<?php print $Edit_Address_URL ?>" title="edit address"></a>
        </div>
       </div>
      <?php endif; ?>
      <?php if ($Show_Shipping): ?>
       <div class="address_box ship">
        <h4>Shipping Address</h4>
        <address>
         <span class="addr_name"><?php print $Ship_First_Name ?> <?php print $Ship_Last_Name ?></span><br/>
         <?php if ($Bill_Company || $Ship_Company): ?>
          <?php print $Ship_Company ?><br/>
         <?php endif; ?>
         <?php print $Ship_Street ?><br/>
         <?php if ($Ship_Street_2 || $Bill_Street_2): ?>
          <?php print $Ship_Street_2 ?><br/>
         <?php endif; ?>
         <?php print $Ship_City ?>, <?php print $Ship_State_Abbrev ?> <?php print $Ship_Postal_Code ?><br/>
         <?php print $Ship_Country_Name ?><br/>
        </address>
        <div class="addr_footer">
         <a class="addr_edit tip" href="<?php print $Edit_Address_URL ?>" title="edit address"></a>
        </div>
       </div>
      <?php endif; ?>
     </div>
    <?php endif; ?>
  3. Find this:
    <?php if (!empty($Shippable)): ?>
  4. Change to:
    <?php if (!empty($Shipping_Chosen)): ?>
  5. Find this:
    <?php if (!empty($Shippable)): ?>
     <?php print sc_price($Shipping_Total) ?><br />
    <?php endif; ?>
  6. Change to:
    <?php if (!empty($Shipping_Chosen)): ?>
     <?php if ($Shipping_TBD):?>
      <span class="tip" title="shipping cost to be determined after order completion.">TBD</span>
     <?php else:?>
      <?php print sc_price($Shipping_Total) ?><br />
     <?php endif;?>
    <?php endif; ?>

checkout_pay_redirect.tpl.php
checkout_pay_redirect_iframe.tpl.php

  1. Find this:

    <?php stylesheet('style_main.css.php') ?>
    <?php print stylesheet("style_variant1_$SC[theme_variant1].css.php") ?>
  2. Change to:
    <?php sc_stylesheet('style_main.css.php') ?>
    <?php sc_stylesheet("style_variant1_$SC[theme_variant1].css.php") ?>

checkout_ship.tpl.php

  1. Find this:

    <div class="ship_rate">
     <input style="vertical-align: middle" id="rate_<?php print $Rate['Field_Value'] ?>" class="radio" type="radio" name="ship_rate" value="<?php print $Rate['Field_Value'] ?>" /><label for="rate_<?php print $Rate['Field_Value'] ?>"><?php print $Rate['Method_Name'] ?> - <?php print sc_price($Rate['Price'],'text') ?></label>
     <?php if ($Rate['Delivery_Days']): ?>
      <div class="dlv_days">
       <?php print $Rate['Delivery_Days'] ?> day<?php if ($Rate['Delivery_Days'] != 1) print 's' ?> to delivery
       <?php if ($Rate['Delivery_Time']): ?>
        by <?php print $Rate['Delivery_Time'] ?>
       <?php endif; ?>
      </div>
     <?php endif; ?>
     <?php if ($Rate['Description']): ?>
      <div id="rate_detail_<?php print $Rate['Field_Value'] ?>" class="ship_rate_detail sc_hide">
       <div class="sr_inner">
        <?php print $Rate['Description'] ?>
       </div>
      </div>
     <?php endif; ?>
    </div> 
  2. Change to:
    <div class="ship_rate">
     <input style="vertical-align: middle" id="rate_<?php print $Rate['Field_Value'] ?>" class="sc_check" type="radio" name="ship_rate" value="<?php print $Rate['Field_Value'] ?>" />
     <label for="rate_<?php print $Rate['Field_Value'] ?>">
      <?php if ($Rate['Cost_TBD']):?>
       <?php print $Rate['Method_Name'] ?> - Price to be determined
      <?php else:?>
       <?php print $Rate['Method_Name'] ?> - <?php print sc_price($Rate['Price'],'text') ?>
      <?php endif;?>
     </label>
     <?php if ($Rate['Delivery_Days']): ?>
      <div class="dlv_days">
       <?php print $Rate['Delivery_Days'] ?> day<?php if ($Rate['Delivery_Days'] !== 1) print 's' ?> to delivery
       <?php if ($Rate['Delivery_Time']): ?>
        by <?php print $Rate['Delivery_Time'] ?>
       <?php endif; ?>
      </div>
     <?php endif; ?>
     <?php if ($Rate['Description']): ?>
      <div id="rate_detail_<?php print $Rate['Field_Value'] ?>" class="ship_rate_detail sc_hide">
       <div class="sr_inner">
        <?php print $Rate['Description'] ?>
       </div>
      </div>
     <?php endif; ?>
    </div> 

discounts_qty_based_price.tpl.php

  1. Find this:

    <?php print $discount['Price_Label']?>
  2. Change to:
    <?php print $Price_Label?>

email_html.tpl.php

  1. Find this:

    <?php stylesheet("style_main.css.php"); ?>
  2. Change to:
    <?php sc_stylesheet("style_main.css.php"); ?>

featured_product.tpl.php

  1. Find this:

    <div class="featured_prod_btns">
  2. Change to:
    <div class="featured_prod_btns form_btns">

forgot_password.tpl.php

  1. Find this:

    <form id="forgot_password_form" class="sc_form" accept-charset="utf-8" action="<?php print $Form_Action?>" method="post">
  2. Change to:
    <form id="forgot_password_form" class="sc_form" accept-charset="utf-8" action="<?php print $Form_Action?>" method="post" novalidate>
  3. Find this:
    <ul>
     <li>
      <label><?php print $Missing_Icon ?>Email address:</label>
      <div class="fields_box_field">
       <input class="<?php print $Error_Class?>" type="text" name="forgot_pw[Email_Address]" value="<?php print $forgot_pw['Email_Address']?>" />
      </div>
     </li>
    </ul>
  4. Change to:
    <ul class="same_line_labels">
     <li>
      <label>Email address</label>
      <div class="fields_box_field">
       <input class="<?php print $Error_Class?>" type="email" name="forgot_pw[Email_Address]" value="<?php print $forgot_pw['Email_Address']?>" />
      </div>
     </li>
    </ul>
  5. Find this:
    <?php print $reCAPTCHA_HTML ?>
  6. Change to:
    <?php print $Captcha_HTML ?>

product_catalog_nav.tpl.php

  1. Find this:

    <!-- search field -->
  2. Add this above:
    <?php if ($Show_Search):?>
  3. Find this:
    </form>
  4. Change to:
    <?php endif;?>
  5. Find this:
    <input type="text" name="search[terms]" size="9" value="Search" onfocus="this.value=''" onblur="if(this.value=='') this.value='Search' " />
  6. Change to:
    <input type="search" name="search[terms]" placeholder="Search" />

related_products_content.tpl.php

  1. Find this:

    <?php foreach($Product_Rows as $Product_Row): ?>
     <div class="box_row <?php print $Product_Row['instance']?>">
      <?php foreach($Product_Row['products'] as $Product): ?>
       <div class="box_outer <?php print $Product['instance'].' '.$Product['box_width_class'] ?>">
        <div class="box_inner" style="<?php if ($Product['height_difference']) print "margin-top: $Product[height_difference]px" ?>">
         <?php print $Product['HTML'] ?>
        </div>
       </div>
      <?php endforeach; ?>
     </div>
    <?php endforeach; ?>
  2. Change to:
    <?php foreach($Product_Rows as $Product_Row): ?>
     <?php foreach($Product_Row['products'] as $Product): ?>
      <div class="box_outer <?php print $Product_Row['instance']?> <?php print $Product['instance'].' '.$Product['box_width_class'] ?>">
       <div class="box_inner">
        <?php print $Product['HTML'] ?>
       </div>
      </div>
     <?php endforeach; ?>
    <?php endforeach; ?>

related_products_nav.tpl.php

  1. Find this:

    <div class="box_inner" style="<?php if ($Product['height_difference']) print "margin-top: $Product[height_difference]px" ?>">
  2. Change to:
    <div class="box_inner">

store_footer.tpl.php

  1. Find this:

    <div id="sc_footer">
     <div id="sc_footer_inner" class="<?php print $SC_Footer_Classes?>">
  2. Change to:
    <footer id="sc_footer">
     <div class="sc_inside <?php print $SC_Footer_Classes?>">
  3. Find the last closing div:
    </div>
  4. Change to:
    </footer>

store_main.tpl.php

  1. If you plan on making your custom theme responsive (see section further down this page), find this:

    <meta name="description" content="<?php print $Description ?>" />
  2. Add this after:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10" />
  3. Find this:
    <!--  left navigation -->
    <?php if (sc_nav('Primary')): ?>
     <div id="sc_col1" class="nav_col">
      <?php
       // Left Navigation section
       print sc_nav('Primary');
      ?>
     </div>
    <?php endif; ?>
         
    <!--  right navigation -->
    <?php if (sc_nav('Secondary')): ?>
     <div id="sc_col2" class="nav_col">
      <?php
       // Right Navigation section
       print sc_nav('Secondary');
      ?>  
     </div>
    <?php endif; ?>
  4. Add this above:
    <div id="sc_nav">
  5. and this below:
    </div>

subcategory.tpl.php

  1. Find this:

    <img class="subcategory_img" src="<?php print $Thumbnail_Image['dyn'] ?>" width="<?php print $Thumbnail_Image['width'] ?>" height="<?php print $Thumbnail_Image['height'] ?>" alt="<?php print $Thumbnail_Image['alt'] ?>" title="" />
  2. Change to:
    <img class="subcategory_img <?php print $Img_Class?>" src="<?php print $Thumbnail_Image['dyn'] ?>" width="<?php print $Thumbnail_Image['width'] ?>" height="<?php print $Thumbnail_Image['height'] ?>" alt="<?php print $Thumbnail_Image['alt'] ?>" title="" />


Templates you should delete

These files are no longer used. If they are present in your custom theme folder, delete them.

 

 

Templates you should revert

 

 

 

style_main.css.php

With the release of Squirrelcart version 4.0 in October of 2013, it became no longer necessary to modify style_main.css.php. We strongly discouraged modification of this file in all documentation released since that date.

The correct way to customize your CSS for Squirrelcart is by extending our built-in CSS using a file named style_custom.css.php which only contains the changes you wish to make. See this page for more info.

 

If you have a customized version of style_main.css.php:

  1. Make a copy of your custom theme so you can work on it without disturbing the default theme. See the Copying a Theme for Testing topic for instructions. After copying your custom theme using those instructions, make sure it is set as your user account's current theme.
  2. Read our documentation explaining how to extend our CSS
  3. Using those instructions, create a style_custom.css.php file inside your new custom theme folder.
  4. Rename the style_main.css.php file in your new custom theme folder to style_main.css.OLD.php to disable it.
  5. If any of these files are present in your new custom theme folder, rename them to disable them:
    style_variant2_800.css.php
    style_variant2_1024.css.php
    style_variant2_1280.css.php
    style_variant2_fluid.css.php
  6. With these files disabled, you have disabled all of your custom CSS. You should now see more options to choose from for this new theme when setting your current theme. If you would like to change the appearance to be responsive, change the Width theme setting to responsive. Change the other theme options as you wish until you have something close to what you want. Then, continue below to add your custom CSS back in.
  7. Using a comparison tool like Diff Now (free, online) or Beyond Compare, compare your style_main.css.OLD.php file with the style_main.css.php file in the squirrelcart/themes/squirrelcart/ folder from the version you are upgrading from.

    For example, if you are upgrading from v4.5.4 you will be comparing your file to the style_main.css.php file in squirrelcart/themes/squirrelcart from your file backup of v4.5.4. This will show you every line you changed as compared to the original style_main.css.php file from the version you are upgrading from.
  8. Copy only the changes that you made to the style_custom.css.php file. You'll have to have some knowledge of CSS to do this. You can view your changes in the storefront to see their effect.
  9. When done, set your new custom theme as the store's default theme

 

Making your store responsive (mobile friendly)

Squirrelcart version 5 now mobile friendly, with a responsive theme that looks great on all devices. New installs will automatically have a responsive design.

To make your upgraded store responsive, you will first need to determine how your theme is setup.

Determining your theme configuration

  1. Open the themes table
  2. At the top of the page under Default Theme, you will see a field named Theme:


  3. Determine which of the following applies to your configuration:

Configuration A: Your settings match this if you see a field to the right of the Theme field named Layout, and it is set to anything other than "custom".

Configuration B: Your settings match this if you see a field to the right of the Theme field named Layout, and it is set to 'custom'. This theme has custom style settings.

Configuration C: Your settings match this if the Theme field is set to "Highland Avenue" or "Main Street"

Configuration D: Your settings match this if you do not see a "Layout" option to the right of your theme.

 

To make your store responsive follow the instructions below that correspond to your configuration.

 

Configuration A

  1. Change the Width field under Default Theme to responsive or responsive (wide). It is shown highlighted in yellow below:
  2. Optionally, you may want to also change the fields highlighted in green. These four settings are new to v5. They work as follows:

    Title Style        - changes the appearance of the titles seen inside nav blocks and content blocks on your store's homepage.
    Body Font       - this changes the main font for most text in the store.
    Depth             - this controls shadows and gradients.
    Form Headers  - this controls the titles seen above certain forms throughout the store.
  3. Click the Save button to save your changes. View your storefront page, and adjust accordingly until you are happy with the result.

 

If you want to make additional changes to the appearance of the store, see the "Customizing" section of this documentation.

 

Resize the width of the browser window to determine if the responsive features are working.

 

Configuration B

You may want to make a copy of your theme and make these changes to that copy so it doesn't negatively impact your live site until you are ready to make it live.

 

  1. Open your theme's record by clicking on its row
  2. Locate the Starting Point section of the form:

  3. Change the Width field to responsive or responsive (wide). It is shown highlighted in yellow above.
  4. Optionally, you may want to also change the fields highlighted in green. These four settings are new to v5. They work as follows:

    Title Style        - changes the appearance of the titles seen inside nav blocks and content blocks on your store's homepage.
    Body Font       - this changes the main font for most text in the store.
    Depth             - this controls shadows and gradients.
    Form Headers  - this controls the titles seen above certain forms throughout the store.
  5. Click the Update Starting Point button shown above (bottom right corner, inside the Starting Point fieldset).
  6. You will see a confirmation prompt. Click OK.
  7. The page will reload. Scroll to the bottom and click Save Changes.
  8. View your storefront page, and adjust accordingly until you are happy with the result.

 

If you want to make additional changes to the appearance of the store, see the "Customizing" section of this documentation When you are done, make sure to set this theme as the default theme for your store

 

Resize the width of the browser window to determine if the responsive features are working.

Configuration C - Highland Ave and Main St.

The latest versions of the Highland Ave and Main Street theme have been updated to work in version 5. They are not responsive. We plan on making them responsive in the future.

If you wish to have a responsive store, the easiest way is to create a new custom theme, and make sure the Width theme option (shown in the Default Theme image above) is set to Responsive.

When you are happy with the look of your theme, set it as your store's default theme.

 

Configuration D

This configuration is the result of copying the style_main.css.php file from the master Squirrelcart theme into your custom theme folder. We have recommend against doing this since the release of v4 in 2013.

To make your theme responsive, you'll need to change your configuration by removing the style_main.css.php file and replacing it with a style_custom.css.php file.

This process is explained above, at the bottom of the Theme and Template Changes section, under the heading style_main.css.php.

 

Need help?

Lighthouse Development (the makers of Squirrelcart) offer upgrade services. Please see this page for more information:

http://www.squirrelcart.com/upgrade-service

 

Our standard upgrade service does not include updating custom theme templates. If you are interested in pricing to update your custom theme for version 5 please contact us:

http://www.squirrelcart.com/contact

 

 


© 2001-2017 Lighthouse Development. All Rights Reserved.