Sidebar

startup_tutorial_and_checklist:feature_configuration:addons:storefront:storefront_templates

Storefront Templates

One of the features of the storefront gives each client the more control over the look of their individual storefront. That is done by giving each client who has a storefront their own copy of storefront body templates to control as they wish.

Storefront Page Template

You as the site owner still control the "surrounding" page template their "storefront sits in" but each storefront owner has more control of the "body of the pages" in their storefront through their storefront admin tool. By default the following page template is assigned to be used in all storefronts:

/main_page/storefront_default_template.tpl

The software only includes one of these "storefront page" templates within the system. But note that you can create several of these page templates with slightly different designs and allow your clients a choice between them. More on doing that in another page of this section. These "storefront page templates" are all within your custom template set and you can make changes to them anytime you like through the following admin tool:

DESIGN > MANAGER

And any changes you make to a specific storefront page template will have immediate affect within all storefront templates that use that storefront template.

The default storefront templates includes the overall html design that shapes the page as well as a few storefront specific elements that appear in every storefront:

  • {$storefront_logo} - this where the storefront owners uploaded storefront logo appears in their individual storefront.
  • Smarty code to display the storefront owners listing categories
  • HTML and Smarty code to display their "storefront newsletter signup" form
  • {$storefront_welcome_note} - this displays their "welcome note" within their storefront

Individual Storefront User Pages

There are 3 pages created for each storefront owner when they first create their storefront. They are the home, about us and contact us pages. Those pages are created from the 3 default storefront page templates within the storefront addon features addon templates. To be specific there are no "individual storefront page templates" within the system. What happens is that the contents of those templates are copied to database page records for each of those pages. So once a storefront is created those pages for that storefront are created and from then on the only copy of those storefront pages only exist in that storefront and can only be edited within that storefronts admin tool.

The storefront owner can create as many new pages for their store as they like. Each new page they create will essentially be an "empty page" they place content into using the storefront admin tool.

Individual Storefront Home Page Google Map

When a storefront is created the default storefront home page template has google maps code added to it. The address data within that google map is pulled from that storefront owners. That link is placed using the following code in this template:

/addons/storefront/default_pages/home.tpl

using this code:

<iframe style="width: 90%; height: 20.3125em; margin: 0 auto;" frameborder="0" scrolling="no" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;q={$locationForMap}&amp;output=embed"></iframe>

If you would like to leave this code in their storefront so the Google Map will be displayed automatically we urge you collect all the address information you can within their user details at registration. If you are outside the US collecting the country would be important.

If that address is incorrect when their storefront is created that address can always be edited directly within their storefront admin tool by editing the home page. It would require a bit of code editing within their home page of their storefront admin tool. You can always get the url from maps.google.com when you are looking at the address they want to display and pasting it directly into their storefront home page.

You can completely remove the Google Maps feature from all storefront (not created yet) by changing the default home page template.

Changes to Storefront Pages/Templates

To affect the overall storefront page template you only need to make changes to the "storefront page template" described above and those changes will take immediate affect across all storefront pages on your site using that specific storefront template.

But any storefront pages the client has created are within their storefront only. So to make changes to a specific storefronts pages you must be logged into the client side as that user and then go to their storefront to make changes to their pages. Within the storefront pages admin tool the client can make any html changes they wish.

If an individual storefront owner wants to "start over" with their storefront pages they only need to go into their storefront page admin tool and delete all pages. They'll then see a "recreate pages" link (once all store pages are removed) they click to recreate their storefront pages from the current default templates.

Changing the Starting Pages A Storefront Starts With

You can do this by making changes to the default page templates every storefront starts with. Those templates will be within the default template set here:

/geo_templates/default/storefront/default_pages/

By the following names:

about.tpl
contact_us.tpl
home.tpl

But to customize them you MUST copy them to your custom template set following the addon templates customization guidelines explained here.

Note that any changes to the default storefront page templates will only affect storefronts created after the changes. If you wish to apply those default storefront pages to current storefronts in the system you have two choices:

  1. Remove all current storefront pages within a user's storefront and recreate them as described in the next section of this support wiki page
  2. Log in as that user and manually apply the changes you made in the default storefront page templates to each user's storefront individually.

Resetting Storefront Design

When a storefront is created the default storefront page designs are used at that time to create pages for that user's storefront. The default designs are copied to that user's storefront. So if you make changes to the default storefront designs at a later time they will not reflect in the sellers storefront pages. This is done to make sure the changes the seller makes to their own storefront are saved and not overwritten every time you make changes to the storefront design. But the side effect is that if you make changes to the text and design for the default storefront pages those changes are not reflected in current storefronts until the storefront owner deletes and recreates their storefront pages. To do that the client will need to delete the current storefront pages they have and recreate new ones. To reset those pages go to client side admin tool for a storefront to reset the pages for and click the Categories & Pages admin tool like so:

Within that admin tool you'll see the "delete" button next to each storefront page. Click each of those links. Once all the pages are deleted you'll see the Restore Default Pages button as shown below:

Click that button and the storefront pages will be recreated from the current default pages.

Storefront Template Choices For Client

You have the ability to give your storefront clients extra storefront templates to choose from for their storefront. Our suggestion is to base your storefront template off the default storefront template (storefront_default_template.tpl) found within the default template set to create your own. By default (starting with v16) we have included several storefront template options within the storefront addon here in the file system. They are:

Storefront_Templates/Default.tpl
Storefront_Templates/Canopy_Black.tpl
Storefront_Templates/Canopy_Blue.tpl
Storefront_Templates/Canopy_Gray.tpl
Storefront_Templates/Canopy_Green.tpl
Storefront_Templates/Canopy_Lite_Blue.tpl
Storefront_Templates/Canopy_Red.tpl
Storefront_Templates/Skyline.tpl

To make those options within your custom template set (the template set used on your client side) go to the following admin tool:

DESIGN > TEMPLATE SETS

make sure you are in "advanced mode" with the button at the top right of that admin tool. Make sure that says:

Design Mode: Advanced

Once in "advanced mode" click the "admin editing" checkboxes next to the "default" AND your custom template set. Click the "save settings" button at the bottom of that admin tool. Now go to the following admin tool:

ADDONS > STOREFRONT > EDIT PAGES > USER STOREFRONT PAGES

The current storefront template choices for your client will be listed in the "template choice" section at the bottom of that page.

Any storefront template choices in that directory will appear as choices to the client on the client side. If you have no choices that should be empty. To add choices click the dropdown box next to the "green plus" icon. Within that dropdown you should see the choices above. Select one you wish to add and then click the "save" button below. That choice should then be added to your "storefront template choices" and appear in the admin tool you are currently in. Using the same steps add each storefront template choice you wish for your clients there. Afterwards your choices should appear like:

Once setup the choices appear here in the "customize" storefront admin tool on the client side for each client:

startup_tutorial_and_checklist/feature_configuration/addons/storefront/storefront_templates.txt · Last modified: 2016/03/07 22:34 by geojames