This template is mobile friendly and uses Responsive CSS to allow sharing of a single template across multiple device types. It uses PHP Mobile Detect to serve up the optimized layout based on device. It allows the designer to implement device-specific php, jquery, javascript or ajax.
- Ability to control products per row for specific devices
- New Mobile Full Width Features
Donations enable me to spend time on this project to further provide ongoing updates, features and requests.
Keep this project FREE, any size
Install
It is recommended that you always backup your Files and Database prior to installing any plugin or template.
- Go to your host cpanel and select the backup wizard.
- Click on Backup.
- Click on Full Backup.
- Click on Generate Backup.
Once the full backup of your account has been completed, you will receive an email at the address you specified.
Unzip and Prepare Package
1. You will need a File Extractor.
2. Extract the package contents using your favorite File Extractor.
- Directories
Rename the YOUR_ADMIN_FOLDER to your actual admin folders name.
Using as a standalone template
DO NOT rename the responsive_default directories.
Using as a template conversion
RENAME the zca_diy_tpl_default directories to your template override directory name.
- If you already have the above files in your template override directory, do not upload these files. Make the following file code merges to your existing files. Be sure to use a Plain Text Editor when editing these files.
Save these files.
Run the SQL Patch
- Copy the package install_sql.txt contents.
- Go to your ADMIN.
- Hover over Tools and Click (Install SQL Patches).
- Paste the Copied code in the provided text area.
- Click the Send button.
Upload Package Files
- You will need a FTP Client.
I use and will provide basic instructions using FTP with Filezilla.
- Enter the address of the server, your username, password, and port if needed into the top of the Quickconnect bar.
- Once you are connected navigate to the directory on your local machine where you unzipped the package in the right side of window and navigate to your store root directory on your web host in the left side of the window.
- Drag the includes directory and drop it in the folder above the includes folder.
Configuration / Setup
1. Go to your ADMIN.
2. Hover over Tools and Click (Template Selection). Skip this step, step 3 and 4 if using this template as a template conversion
3. Click the "Edit" button.
4. Choose Responsive Default from the select list and click update.
-
Hover over Tools and Click (Layout Boxes Controller).
-
Scroll to the bottom and Click the "reset" button.
Note: You will now see 2 new columns (Tablet Status and Mobile Status), this is where you turn these side-boxes off for specific devices.
- Hover over Configuration and Click (Layout Settings).
Note: You will now see 4 new configuration.
New Configuration(s) > Layout Settings
| Title | Value | Description |
|---|---|---|
| Responsive Left Column Width | 2 | Set Width of Left Column, Default is 2, Total columns 12. Responsive Left, Center & Right Column Width must = 12 |
| Responsive Center Column Width | 8 | Set Width of Right Column, Default is 8, Total columns 12. Responsive Left, Center & Right Column Width must = 12 |
| Responsive Right Column Width | 2 | Set Width of Right Column, Default is 2, Total columns 12. Responsive Left, Center & Right Column Width must = 12 |
| Responsive Mobile Full Site Version Width | 980px | Set Width of Responsive Mobile Full Site Version, Default is 980px, To give mobile users same experience, this width should be the same max-width for the #mainWrapper selector in your stylesheet.css file |
New Configuration(s) > Images
| Title | Value | Description |
|---|---|---|
| Product Info - Number of Additional Images per Row (Mobile) | 1 | Product Info - Enter the number of additional images to display per row on (Mobile Devices). Default = 1 |
| Product Info - Number of Additional Images per Row (Tablet) | 2 | Product Info - Enter the number of additional images to display per row on (Tablet Devices). Default = 2 |
New Configuration(s) > Product Info
| Title | Value | Description |
|---|---|---|
| Also Purchased Products Columns per Row (Mobile) | 1 | Also Purchased Products Columns per row on (Mobile Devices). Default = 1 |
| Also Purchased Products Columns per Row (Tablet) | 2 | Also Purchased Products Columns per row on (Tablet Devices). Default = 2 |
New Configuration(s) > Maximum Values
| Title | Value | Description |
|---|---|---|
| Categories To List Per Row (Mobile) | 1 | How many categories to list per row on (Mobile Devices). Default = 1 |
| Categories To List Per Row (Tablet) | 2 | How many categories to list per row on (Tablet Devices). Default = 2 |
New Configuration(s) > Index Listing
| Title | Value | Description |
|---|---|---|
| Featured Products Columns per Row (Mobile) | 1 | Featured Products Columns per row on (Mobile Devices). Default = 1 |
| Featured Products Columns per Row (Tablet) | 2 | Featured Products Columns per row on (Tablet Devices). Default = 2 |
| New Products Columns per Row (Mobile) | 1 | New Products Columns per row on (Mobile Devices). Default = 1 |
| New Products Columns per Row (Tablet) | 2 | New Products Columns per row on (Tablet Devices). Default = 2 |
| Special Products Columns per Row (Mobile) | 1 | Special Products Columns per row on (Mobile Devices). Default = 1 |
| Special Products Columns per Row (Tablet) | 2 | Special Products Columns per row on (Tablet Devices). Default = 2 |
Uninstall
1. Remove all New files from the package that you uploaded.
2. Restore any Existing or Core files in the package that you merged.
3. Copy the packages uninstall_sql.txt contents.
4. Go to your ADMIN.
5. Hover over Tools and Click (Install SQL Patches).
6. Paste the Copied code in the provided text area.
7. Click the Send button.