Child Templates for Fresh Store Builder
Posted by Barbara House on 09 December 2014 08:02 PM
With the release of v5, it's time for me to update my Tips & Tricks for customizing templates and using Child Templates. I've also made this easier for you by creating default child templates for you, ready to be uploaded, activated and used.
Do you really need a Custom Template?
First things first - determine if you really *need* to have a modified template. If you are coming from an older version of FSB, there are new features that may make modifying the template an unneeded step now. So ask yourself what kinds of things are you modifying?
If you modified layout_default.tpl to add special tracking codes - put this into the header and footer scripts fields we provided in the Tools => Change Parameters => Custom CSs & Scripts section. Don't change the template for this. Or put these in a custom sidebox.
If you did custom css changes, use the custom css field in the parameters - no need to edit a template for this any longer.
Are you removing things by editing templates because there wasn't an option to hide things? For instance, did you remove "random products" from the homepage? You don't need to do that anymore because we now have the widgetized homepage system.
You can also hide things simply by using the css selector and entering this into the custom css box. Want to hide a particular section on the product detail page? Again, find the section and make a custom css entry with display:none in the parameters section.
Did you make changes to add things to the sidebar or re-arrange the order? The new sideboxes features makes this something you can do in the admin and not have to change the templates.
Okay, Barbara, that's all nice - but I *still* need to modify the template.
This is where Child Templates come into play, and we've made this easier than ever.
Now, you might have tried to play with this before and went "what the heck!" and gave up :) In order to remove this frustration for you, I've created a default custom child template for you.
This has all the appropriate configuration already entered, and imports the initial styles you need to start with. All you have to do is upload it to your store.
Note: these are .zip files. You need to upload the contents of the zip file to your /templates directory. If you are using your cPanel file manager, simply upload the zip file and the extract. If you are using FTP, you will need to download the zip to your computer, unzip it, and then upload the entire directory and all the files to your /templates directory.
Fluid Child Template
Flexistore Child Template
Smoothstore Child Template
Evolution Child Template
Impact Child Template
Serenity Child Template
Prosper Child Template
Activating your new Child Template
Go into Fresh Admin and go to your templates (Templates => Change Templates). You should now see your new Child Theme.
You might have to Refresh the template options for it to appear: Tools => Refresh Options => Force Refresh All Templates
Activate your new Child Theme.
So What Just Happened Here & How Do I Use This?
You now have your own child theme, and you can make changes as you need to by copying the template file from the parent theme, putting it in the same location in the child theme, and making changes.
***** CAUTION ********
The important thing here is that you ONLY override JUST the files you need. Don't add anything you aren't changing - leave that in the parent files.
The key here is that as we continue to support and update the templates, you will get these updates and fixes, including CSS changes, automatically from the parent.
Child templates do NOT have their files changes with FSB releases. So you want to do the least amount of changes as possible to customize your store, as these files that you put in your child template are shown instead of the parent. For instance, if we make a change to say the main layout_default.tpl file to support a new feature, but you have a custom version of that same file in your child template - you will NOT get the update and you'll have to do it manually, which becomes very difficult to track and sort.
I'm Determined - So What are the Next Steps?
Okay, let's say that you just absolutely need to change the layout_default.tpl file and you cant find any other way to customize what you need. You would go to the parent template folder and copy layout_default.tpl, and the paste it into the same location in your child theme.
Or maybe you really want to change the meta information in the header, and figure out you need to modify /elements/general/metainformation.tpl Again, you would copy and past into the exact same location in your child theme. Create the folders you need so it is identical.
More Questions & Answers...
Q: I can't find the file in the parent template, where is it?
A. Remember that many of the templates like Flexi, Moderna, Impact, etc are technically child themes of Base. So, they are doing this same process - and might not have all the files in each directory - because they aren't changed from the files in /base.
Fluid, new to v5, does not inherit from /base so all the files will be in fsb-fluid.
If you cant find the file in your template, look up a level in the base folder.
Q: What happens on the next update of the parent template?
That will depend on what you changed. Ideally, you only have a very few files in your new custom template. You will have to compare them to the files in the new version of the parent template, and make any changes manually to your child template.
This is why you should always look for a way to do this without changing the files first.
Q: I want to make a child template of a skin - can I do that?
This is only a tiny bit more complicated, but can easily be done. Basically you need to pull in two css files - the one from the original template and the one from the skin.
Start by following the exact same process as above. Then, open up the /styles/style.css file in your child template.
Find the section for the import command, and you will add a second line to import the skin styles. Here's an example for importing the Fluid Forest skin:
Make sure you add this second line AFTER the existing line in your style.css.
Boom - now you have the main styles and the skin, all in your child template - and you'll get the benefits of any changes and fixes added with new template updates automatically.
Q: Any more advice?