One of the most frequently asked questions we receive goes something like this:
"How do I fit Squirrelcart into my existing design?"
Because every site design varies, it's not possible to provide step by step instructions for making Squirrelcart fit into your design. This page explains a few approaches you can take.
 |
Before continuing, Squirrelcart should be fully installed and working. You should then read the entire Customizing section of the documentation before beginning your customization. This is extremely important! |
The level of customization you can achieve is going to be directly proportionate to your experience with HTML and
CSS. If you want to make major changes yourself to the appearance of your storefront and do not know HTML and CSS, we recommend that you get a good book on both subjects.
We will explain 3 approaches, which vary based on your goals and skill level:
Approach |
Recommended When |
Basic |
you don't know HTML, or have very limited knowledge of it |
Advanced - Link to Storefront |
you are familiar with HTML but prefer to not make many changes to your existing homepage |
Advanced - Shop From Homepage |
you are familiar with HTML and would like customers to shop right from your homepage |
The examples below all assume that you have an existing homepage named
index.htm or
index.html. We will refer to that page as your homepage. We will refer to Squirrelcart's main page as the
storefront page.
 |
Don't want to make design changes yourself? We sell themes for Squirrelcart that can be used to dramatically change the appearance of your store. See our website for details. |
This approach will explain how to link to Squirrelcart's storefront page from your homepage, and change some basic aspects of the appearance of the storefront.
- Open your homepage in an HTML editor
- Locate the area where you wish to place the link to your storefront page
- Add the following code at that location, replacing the word "Shop" with the text you wish the customer to click on:
<a href="store.php">Shop</a>
- Save the file
- Test the link. Clicking on the link should take you to Squirrelcart's storefront page.
Squirrelcart comes with an example store logo at the top of the page. The logo is there for example purposes only. We recommend you change it to your own logo.

To replace this image with your own logo image, do the following:
- Click the themes menu link in your control panel:
- Look at the selected values inside the Default Theme box at the top of the table. This is the theme your store is using by default. Every user that has not changed their theme setting on their account page will see your store using this theme. You must be using a custom theme (any theme other than the default squirrelcart master theme) in order to change your logo. If Default Theme is set to Squirrelcart, you will need to change it to a custom theme by changing the Theme field inside the Default Theme box. If no custom theme choices are available, create a new custom theme and then select it as the default theme by changing the Theme field, and clicking the Save button. For the examples below, let's assume you are using a custom theme called YOUR_THEME.
- You will need an image file on your computer that you want to use as your logo. The filename will need to end in .png, .gif, or .jpg.
- Rename your logo file to store_logo.* , keeping the file extension the same. For example, if your logo image on your computer is named my-logo.jpg, rename it to store_logo.jpg.
- You will need to upload this file to the theme's image folder. If you are familiar with FTP, you can just upload the file to squirrelcart/themes/YOUR_THEME/images/ and it will automatically appear in your storefront. Alternatively, you can upload the image using the control panel using the steps below.
- Move your mouse over the link titled Images:

If the tooltip that appears reads Images for 'Squirrelcart' theme, you need to change your theme. You can't modify images for the master Squirrelcart theme. If it reads Images for 'YOUR_THEME'..., click the link.
- Locate the image named store_logo in the record table. You might need to click through the page links to locate it.
- Click the
icon to the left of the record row for the store_logo image to open that record. You can also click anywhere on the record's row to open it.
- Click the Browse... button and locate the image file on your computer
- Click
to upload your image
 |
Your web server must have permission to write to the squirrelcart/themes/YOUR_THEME/images folder in order to upload an image. If you receive a permission error, you may need to set permissions on that folder so PHP on your server can write to it. Permissions are set using an FTP client. For some web servers, permissions of 755 or 775 are sufficient. On most web servers, permissions of 777 are required. If you are unsure of how to set permissions so that your server can write to this folder, contact your web host for assistance. If you need assistance from us, you can find more information on obtaining support on our support page. |
 |
Your store logo is a Theme Image. For more information on working with theme images, see this topic. |
This method requires knowledge of HTML and CSS, and is the best approach when you want to customize the appearance of your store but do not want to make many changes to your homepage. You will be linking to your storefront page, and customizing Squirrelcart to match the look of your existing pages.
- Add a link on your homepage to the storefront page (store.php by default)
- Create a custom theme as described in the Creating a Custom Theme topic
- Set that theme as the default theme for your store as described in the Changing the Default Theme topic. If your current theme differs from that theme, you should also set your current theme to default.
- If you haven't already, read the topic on Modifying Templates.
- Make changes to your stylesheet(s) if needed.
- Make changes to your storefront's main template file as needed.
- You may also want to alter the template that controls the appearance of your storefront's home page.
- After you have most of the storefront page looking the way you want, work on modifying code in other template files as needed, using the Customizing > Templates > Template Guide section of this documentation. If you are unsure of which template to modify, view the source of the page you are trying to alter. Locate the section of code you wish to alter, and look above it for a comment. All template files contain a comment at the top which will display the template name, like this example:
<!-- Template: product_detail.tpl.php -->
If you have difficulty locating the correct template, please contact our support department for assistance.
This method requires knowledge of HTML and CSS, and should be used when you wish to add Squirrelcart components directly to your existing homepage. You will be preparing your homepage to support PHP code by moving it into a Squirrelcart template file, and placing Squirrelcart's PHP code from the default storefront page template into your homepage. Once completed, you will then customize further using CSS and templates.
 |
Important: Before starting, read this page for important information on how to properly modify template files. You can't complete the steps below without first reading that page. |
In order to customize Squirrelcart's template files, you need to have a custom theme created and enabled. If you don't already have a custom theme created and enabled, follow the instructions in this section below.
- Create a custom theme
- Set that theme as your store's default theme, which is used for all users that do not have a theme chosen
- Rename your existing homepage to index_OLD.htm or similar, to disable it.
- Rename your storefront page (store.php) to index.php so it will open as your homepage.
- Update the $cart_page variable in Squirrelcart's config file (squirrelcart/config.php) so it knows you've changed your storefront page file name. See this page for instructions.
- Test your site to make sure Squirrelcart's storefront page loads when you visit your homepage without specifying a file name: http://www.example.com
- If you have any links on other pages that linked to your old homepage file name directly (index.htm or index.html), you must update those links to reflect the new file name "index.php" - OR change the URL in those links to only use your domain name without a file name after it.
Squirrelcart's main storefront template is explained in detail on this page. To make Squirrelcart's storefront page (which is now your homepage) appear as your old homepage did, follow the instructions below.
- Put a copy of your old index page (which you renamed to index_OLD.htm) inside your custom theme folder squirrelcart/themes/YOUR_THEME
- Rename that file to store_main.tpl.php. If a file with that name already exists, rename it to store_mail_OLD.tpl.php
- Load your homepage in your browser. It should now appear as it used to, with no Squirrelcart content.
- To allow Squirrelcart to function on your homepage, you'll need to add it's PHP code to your main storefront template - the file you just named store_main.tpl.php. You can view the master theme version of this file to see the PHP code you will need to add to your custom version of this template. The location of the master version of this template is squirrelcart/themes/squirrelcart/store_main.tpl.php. Each piece of code is explained in detail in the Storefront - Main Template topic. You will need to read through that topic carefully, and cut and paste the code from squirrelcart/themes/squirrelcart/store_main.tpl.php into your custom version of that theme - squirrelcart/themes/YOUR_THEME/store_main.tpl.php. When finished, your store should be functional, but may not yet meet your design needs.
- Make changes to your stylesheet(s) if needed.
- Make changes to your storefront's main template file if needed.
- You may also want to alter the template that controls the appearance of your storefront's home page.
- After you have most of the storefront page looking the way you want, work on modifying code in other template files as needed, using the Customizing > Templates > Template Guide section of this documentation. If you are unsure of which template to modify, view the source of the page you are trying to alter. Locate the section of code you wish to alter, and look above it for a comment. All template files contain a comment at the top which will display the template name, like this example:
<!-- Template: product_detail.tpl.php -->
If you have difficulty locating the correct template, please contact our support department for assistance.
© 2001-2017 Lighthouse Development. All Rights Reserved.