Locating ALL files related to a Template

[bodyflight]

I've spent time copying template files one by one, only to find I need another. Where is the "quick list" that tells me what files are needed by which templates... and maybe even, their purpose?

I'd like a quicker way to get to them and edit them than the backroom seems to offer... so far anyway.. still just poking around

[ShopSite Lauren]

Each template within ShopSite uses different files. Some templates have most of the code built in, whereas some templates use many include files rather than putting all the code in one file. The way that the templates are setup are determined by the designer who created the template, and there are many different designers for the ShopSite templates. That said, if you have a specific template that you are trying to modify, you can typically copy that template, then go to Merchandising > Custom Templates > Includes, and copy the include files which start with the same name. For example, if you are making a copy of the Modern template, then you would go to Includes > Copy ShopSite Include, and make a copy of the include files which start with 'Modern'.

The reason that there are include files used is because often times the include files are used in more than 1 place. For example, the Modern.css include file is used both in the Modern Page template and in the Modern-MoreInfoPage template. Since they both use the same include file, you can make changes to that one include file and have those changes take effect in all templates that use that file.

In general, if an include file name ends in .CSS or has the word 'style' in it, it contains the CSS/style sheet for that template. If an include file name contains the word 'vars' then the include file contains custom tags which were created specifically for that template. If an include name contains the word 'include' then it is most likely the extra code for the fields on the page. This is the include file that you will want to copy.

Many of the product templates for different themes all share the same include files. For example the include file called Product-Name is used in at least 3 product templates (probably more).

There is no quick guide for which files are needed for which templates. However, as you go through a template if you find an include file you can determine if that is the code that you need to change or not. If you do not need to change it then I would skip that include file (leave it in the template) and move on down the template until you come to another include file that you may or may not need to edit.

-Lauren

[bodyflight]

So... when you choose "Lefty" or say "Top Notch" and even "Plain" where do you find the template for those? They are not in the list.

Am I seriously supposed to just guess which template it's using?

[ShopSite Lauren]

The only ShopSite templates that you can copy are the templates found when you go to Merchandising > Custom Templates > (open any of the 4 sections) > Copy ShopSite Template. Many of the templates are listed there and are available to you. However, some of the templates, the original templates, are written in complied C code and cannot be changed or modified. Because of this you would not be able to copy those templates. The ones that you listed below, Plain, Lefty, and Top Notch are all written in C so you are unable to copy those templates.

-Lauren

[bodyflight]

Hi,
Thanks for your replies.

I seem to be missing something extremely simple here.
If I want to change the regular text color in my store using say the theme "sidebar" exactly which file/document would I edit?

Or if that didn't make sense...
The page text on the sidebar template is currently black.
If I wanted to change it to a pink(w/the hex value), which file do I edit to reflect that?

[ShopSite Lauren]

If you would just like to change the text color you should be able to go to Pages > Edit Page Layout, and change the text color there. The text color does not need to be changed in the template.

-Lauren

[bodyflight]

If you would just like to change the text color you should be able to go to Pages > Edit Page Layout, and change the text color there. The text color does not need to be changed in the template.

-Lauren

I want to make several global changes that apply to both the storefront, categories(pages) and more info pages, I hope that I don't have to visit each and every page to customize those things. That was just an example so I could possibly find the document that holds it all.

Here's what I need to do:
Change the Link Color, Hover, Visited
Page Text Color
I need to change the background color to a static graphic
Insert a header of some sort & then modify the buttons (which are the only things I can locate easily)


This code is completely unfamiliar to me.
I see INCLUDE Sidebar-Colors PROCESS and I assume that this document then finds that file, and then does what it says.
When I look at Sidebar-Colors it's full of

Code: Select all

[-- VAR.BackgroundColor PAGE.BackgroundColor --]
[-- VAR.TextColor PAGE.TextColor --]
[-- VAR.LinkColor PAGE.LinkColor --]
[-- VAR.VisitedLinkColor PAGE.VisitedLinkColor --]
[-- VAR.ActiveLinkColor PAGE.ActiveLinkColor --]

[-- IF PAGE.LinkColor #666600 --]
  [-- VAR.SidebarColor PAGE.ActiveLinkColor --]
  [-- VAR.AccentColor1 PAGE.VisitedLinkColor --]
  [-- VAR.AccentColor2 PAGE.LinkColor --]
  [-- VAR.HoverColor PAGE.ActiveLinkColor --]
  [-- VAR.H1color PAGE.TextColor --]
  [-- VAR.PageLinkColor PAGE.VisitedLinkColor --]
  [-- VAR.PageLinkHoverColor PAGE.LinkColor --]
  [-- VAR.MiniCartColor "black" --]
  [-- VAR.MiniCartTextColor Page.VisitedLinkColor --]
  [-- VAR.MiniCartHoverColor Page.LinkColor --]
[-- ELSE_IF PAGE.LinkColor #FF0000 --]
  [-- VAR.SidebarColor PAGE.ActiveLinkColor --]
  [-- VAR.AccentColor1 PAGE.VisitedLinkColor --]
  [-- VAR.AccentColor2 PAGE.LinkColor --]
  [-- VAR.HoverColor PAGE.TextColor --]
  [-- VAR.H1color PAGE.TextColor --]
  [-- VAR.PageLinkColor PAGE.VisitedLinkColor --]
  [-- VAR.PageLinkHoverColor PAGE.LinkColor --]
  [-- VAR.MiniCartColor "black" --]
  [-- VAR.MiniCartTextColor Page.VisitedLinkColor --]
  [-- VAR.MiniCartHoverColor Page.LinkColor --]

and I still don't see where it is that I can change these values.

[ShopSite Lauren]

You can change the colors, link, visited link, active link, text color and background image or color within the Edit Page Layout screen. if you would like to edit multiple pages at once so that they are all the same you can go to Pages > highlight all of the pages > PowerEdit > select all the color fields > Global > Proceed (this global power edit is only available within ShopSite Pro). You then only need to change the colors in one other place to have all the more information pages use those same colors; you can go to Preferences > More Info Page and edit the colors there. However, if you would like to hard code the colors into the template rather than using the ShopSite interface you can do that. More information below.

The Sidebar-Colors include file that you referenced below sets the colors for all the sidebar template color options. This is why it has so many tags in it. The tags that are set are VAR tags. This means that the tags are only set for this template. These tags are created by this template for this template. For example, with the tag [-- VAR.BackgroundColor PAGE.BackgroundColor --] it means that in this template when it has [-- VAR.BackgroundColor --] it is pulling the [-- PAGE.BackgroundColor --]. This include file repeats many of the tags because it is setting the tags for all the various color schemes. However, if you are hard coding the colors in then you would not need to repeat the tags. You can simply have one set of color tags and hard code the color in rather than reference the PAGE tag. For example, you would just need to include the following tags (note that the first 5 are for most templates, the last ones all for just the Sidebar template)

[-- VAR.BackgroundColor PAGE.BackgroundColor --]
[-- VAR.TextColor PAGE.TextColor --]
[-- VAR.LinkColor PAGE.LinkColor --]
[-- VAR.VisitedLinkColor PAGE.VisitedLinkColor --]
[-- VAR.ActiveLinkColor PAGE.ActiveLinkColor --]
[-- VAR.SidebarColor PAGE.ActiveLinkColor --]
[-- VAR.AccentColor1 PAGE.VisitedLinkColor --]
[-- VAR.AccentColor2 PAGE.LinkColor --]
[-- VAR.HoverColor PAGE.ActiveLinkColor --]
[-- VAR.H1color PAGE.TextColor --]
[-- VAR.PageLinkColor PAGE.VisitedLinkColor --]
[-- VAR.PageLinkHoverColor PAGE.LinkColor --]
[-- VAR.MiniCartColor "black" --]
[-- VAR.MiniCartTextColor Page.VisitedLinkColor --]
[-- VAR.MiniCartHoverColor Page.LinkColor --]

then replace the PAGE.tag with the color you want. For example:

[-- VAR.BackgroundColor #FFFFFF --]
[-- VAR.TextColor #000000 --]
[-- VAR.LinkColor #123456 --]
[-- VAR.VisitedLinkColor #DDDDDD --]
[-- VAR.ActiveLinkColor #777777 --]
[-- VAR.SidebarColor #777777 --]
[-- VAR.AccentColor1 #DDDDDD --]
[-- VAR.AccentColor2 #123456 --]
[-- VAR.HoverColor #777777 --]
[-- VAR.H1color PAGE.TextColor --]
[-- VAR.PageLinkColor #DDDDDD --]
[-- VAR.PageLinkHoverColor #123456 --]
[-- VAR.MiniCartColor "black" --]
[-- VAR.MiniCartTextColor #DDDDDD --]
[-- VAR.MiniCartHoverColor #123456 --]

-Lauren

[bodyflight]

thank you, it's beginning to become more clear now and I have started the tweaking... several basic things are still escaping me..

I really would like to apply an image to the background but all I seem to get to show up is the background color.. I did set a background image on the page and a color since i had to...
and I am still working on that

also.. every adjustment to the includes & templates require that I make a store change of some sort to get it to publish the updates.. is there some shorter way?

I tried to force a publish by clicking that link anyway, and it told me there was nothing to generate. So I added a period on the home page, published it and then it displayed the template changes.

[ShopSite Lauren]

With the Sidebar template, the background image is used as the background image for the whole screen. However, the content within the page uses the background color. You can see this by going to Pages > Edit Page Layout, and changing the page width then publishing the page. You will see the background image on the screen, but not as the background of the content. To change this you would need to change the template.

For your second question about forcing a publish, you can force a publish by going to Utilities > Publish > Regenerate. However, when I am working on templates I go to Pages > Preview, and keep the preview window open. As I make changes to templates and save, I just refresh the preview window. This allows me to quickly see the changes but not publish until I am ready.

-Lauren

[bodyflight]

Hi Lauren,

The preview feature is definitely nice. I've been caught in a frustration struggle over some basic html tables and wondered if you could help. While I finally am starting to understand the logistics here, I am having an awful time getting the code just so.
My goal is simple (or so I think) take a look at the Work in Progress http://www.hothatsinc.com/store/

I've used two different html programs to help me and while I've learned a ton, I just can't get the last things with any ease.

I want to plug the header, page name, text 1, products displays, text 2, 3 and the footer all into the empty space on the page. But I can't seem to tweak it to make it work. I'm sure it's a table error.. any chance you'd could help? (code included last)

I also, cannot seem to paste the correct code to display the shopping cart under my navigation(links) even though it was in the original template.. here's the code I'm trying to use (have I butchered it in all my copy pastes?)

Code: Select all

            [-- IF MiniCart --]
              <script type="text/javascript" language="JavaScript">
              DisplayMiniCart("ss_cart_[-- STORE_Serial_Number --]","Summary");
              </SCRIPT>
            [-- ELSE --]
              [-- IF STORE.DisplayViewCartText --]
                [-- IF ANALYTICS_MULTI_DOMAIN --]
              <script type="text/javascript" language="JavaScript">
                document.write('<a class="viewcart" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');">[-- STORE.ViewCart --]</a>');
              </script>
              <noscript>
                <a class="viewcart" href="[-- SHOPPING_CART_URL --]">[-- STORE.ViewCart --]</a>
              </noscript>
                [-- ELSE --]
              <a class="viewcart" href="[-- SHOPPING_CART_URL --]">[-- STORE.ViewCart --]</a>
                [-- END_IF --]
              [-- ELSE --]
                [-- IF ANALYTICS_MULTI_DOMAIN --]
              <script type="text/javascript" language="JavaScript">
                document.write('<a class="viewcart" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/[-- STORE.ViewCart --]" border="0"></a>');
              </script>
              <noscript>
                <a class="viewcart" href="[-- SHOPPING_CART_URL --]"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/[-- STORE.ViewCart --]" border="0"></a>
              </noscript>
                [-- ELSE --]
              <a class="viewcart" href="[-- SHOPPING_CART_URL --]"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/[-- STORE.ViewCart --]" border="0"></a>
                [-- END_IF --]
              [-- END_IF --]
            [-- END_IF --]

that's the cart code I found in my original template.. or so I thought.. but no matter how I plug it in.. it just doesn't show up. so for now I've put in the code for the mini cart .

Here's the current guts of my template... what in the world am I doing wrong???

Code: Select all

<table border="0" width="100%">
  <tr>
    <td width="20%" valign="top" align="center"><img border="0" src="http://www.hothatsinc.com/store/media/logo-transparent.gif" width="175" height="158"><br>
     <img border="0" src="http://www.hothatsinc.com/store/media/swirl-smallpink.jpg" width="114" height="57"></td>
    <td width="46%" valign="top" align="left"></td>
    <td width="34%" align="center" valign="top"><img border="0" src="http://www.hothatsinc.com/store/media/swirlbutterflies-transparent.gif" width="285" height="99"><br>
    [-- MiniCart --]</td>
  </tr>  <tr>
    <td width="20%" valign="top" align="left"><b><u>Store Directory</u></b>
      [-- LOOP LINKS --]<tr>
      [-- LINK Sidebar --]</tr>
      [-- END_LOOP LINKS --]<br>
      [-- IF GiftCert --]<tr><td>
      [-- GiftCertLink --]</td></tr>
      [-- END_IF --]<br><tr><td></tr></td><tr><td></tr></td><tr><td></tr></td><tr><td>
      [-- MiniCart --]</td></tr>
      [-- IF PAGE.SearchProductField --]<tr>
    <td align="left" class="search">
      [-- INCLUDE Page-2LineSearchForm PROCESS --]</td></tr>
      [-- END_IF --]<br>
    <td width="73%" colspan="2" valign="top" align="left">
        [-- IF PAGE.DisplayPageHeader --]
            <tr>
              <td class="header">[-- HEADER --]</td>
            </tr>
        [-- END_IF --]

        [-- IF PAGE.DisplayName --]
          [-- IF PAGE.Name --]
            <tr>
              <td class="PageName"><h1>[-- PAGE.Name --]</h1></td>
            </tr>
          [-- END_IF --]
        [-- END_IF --]

        [-- IF PAGE.Text1 --]
        <tr>
          <td>[-- PAGE.Text1 --]</td>
        </tr>
        [-- END_IF --]

        [-- INCLUDE Page-Layout PROCESS --]

        [-- IF PAGE.NumProducts 0 --]
# skip this section
        [-- ELSE --]
        <tr>
          <td>
            <table class="Products" width="100%" align="center" border="[-- VAR.border --]" cellpadding="3">
              [-- LOOP PRODUCTS PAGE.Columns --]
                <td valign="top" align="[-- VAR.align --]">[-- PRODUCT --]</td>
              [-- END_LOOP PRODUCTS --]
            </table>
          </td>
        </tr>
        [-- END_IF --]

        [-- IF PAGE.Text2 --]
        <tr>
          <td>[-- PAGE.Text2 --]</td>
        </tr>
        [-- END_IF --]

        <!-- Multi-Page Links -->
        [-- IF PAGE.ProductsPerPage "0" --]
# do nothing
        [-- ELSE --]
        <tr>
          <td><div class="footer">[-- PREVNEXT --]</div></td>
        </tr>
        [-- END_IF --]

        [-- IF PAGE.DisplayPageFooter --]
          [-- IF FOOTER "" --]
# do nothing
          [-- ELSE --]
            <tr>
              <td class="footer">[-- FOOTER --]</td>
            </tr>
          [-- END_IF --]
        [-- END_IF --]

        [-- IF PAGE.Text3 --]
        <tr>
          <td>[-- PAGE.Text3 --]</td>
        </tr>
        [-- END_IF --]

      </table>
    </td> <!-- end of main cell -->
  </tr>
</table>
</BODY>
</HTML>
[-- END_DEFINE PAGE --]

if you or anyone can find anything... of course, I'll still be trying

[ShopSite Lauren]

In your code you have your first row with 3 columns, and all the rest of your rows with only 1 column (so they all line up under the first column in your first row). I have added in a few table, tr, and td tags to make the formatting correct so that the main content of your page is in the second column.

<table border="0" width="100%">
<tr>
<td width="20%" valign="top" align="center"><img border="0" src="http://www.hothatsinc.com/store/media/logo-transparent.gif" width="175" height="158"><br>
<img border="0" src="http://www.hothatsinc.com/store/media/swirl-smallpink.jpg" width="114" height="57"></td>
<td width="46%" valign="top" align="left"></td>
<td width="34%" align="center" valign="top"><img border="0" src="http://www.hothatsinc.com/store/media/swirlbutterflies-transparent.gif" width="285" height="99"><br>
[-- MiniCart --]</td>
</tr>
<tr>
<td width="20%" valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><b><u>Store Directory</u></b></td>
</tr>
[-- LOOP LINKS --]<tr>
[-- LINK Sidebar --]</tr>
[-- END_LOOP LINKS --]<br>
[-- IF GiftCert --]<tr><td>
[-- GiftCertLink --]</td></tr>
[-- END_IF --]<br><tr><td></tr></td><tr><td></tr></td><tr><td></tr></td><tr><td>
[-- MiniCart --]</td></tr>
[-- IF PAGE.SearchProductField --]<tr>
<td align="left" class="search">
[-- INCLUDE Page-2LineSearchForm PROCESS --]</td></tr>
[-- END_IF --]
</table>
</td>
<td width="73%" colspan="2" valign="top" align="left">
<table width="100%">
[-- IF PAGE.DisplayPageHeader --]
<tr>
<td class="header">[-- HEADER --]</td>
</tr>
[-- END_IF --]

[-- IF PAGE.DisplayName --]
[-- IF PAGE.Name --]
<tr>
<td class="PageName"><h1>[-- PAGE.Name --]</h1></td>
</tr>
[-- END_IF --]
[-- END_IF --]

[-- IF PAGE.Text1 --]
<tr>
<td>[-- PAGE.Text1 --]</td>
</tr>
[-- END_IF --]

[-- INCLUDE Page-Layout PROCESS --]

[-- IF PAGE.NumProducts 0 --]
# skip this section
[-- ELSE --]
<tr>
<td>
<table class="Products" width="100%" align="center" border="[-- VAR.border --]" cellpadding="3">
[-- LOOP PRODUCTS PAGE.Columns --]
<td valign="top" align="[-- VAR.align --]">[-- PRODUCT --]</td>
[-- END_LOOP PRODUCTS --]
</table>
</td>
</tr>
[-- END_IF --]

[-- IF PAGE.Text2 --]
<tr>
<td>[-- PAGE.Text2 --]</td>
</tr>
[-- END_IF --]

<!-- Multi-Page Links -->
[-- IF PAGE.ProductsPerPage "0" --]
# do nothing
[-- ELSE --]
<tr>
<td><div class="footer">[-- PREVNEXT --]</div></td>
</tr>
[-- END_IF --]

[-- IF PAGE.DisplayPageFooter --]
[-- IF FOOTER "" --]
# do nothing
[-- ELSE --]
<tr>
<td class="footer">[-- FOOTER --]</td>
</tr>
[-- END_IF --]
[-- END_IF --]

[-- IF PAGE.Text3 --]
<tr>
<td>[-- PAGE.Text3 --]</td>
</tr>
[-- END_IF --]

</table>
</td> <!-- end of main cell -->
<td></td>
</tr>
</table>
</BODY>
</HTML>
[-- END_DEFINE PAGE --]

-Lauren

[bodyflight]

Thank you SO much for that. I have finally been able to spend a couple of days doing other site related things.

(edited to remove previous question for which after 12 hours I figured out the solution )

[dreamday]

I need to change the color of text on the product page within the more info box on the product page. I need the more info title, the more info text, the price (generated from the Products layout), the text in the Order Options and Pull down menus all to be the same color to contrast with a background image for the more info box.

I have tried changing text colors through the Page and Products edit pages but have only been successful at changing the text within the More Info Page text box, which is controlled through an HTML editor.

Can you advise me on what I am missing?

[ShopSite Lauren]

You can set the more information page colors under Preferences > More Info Pages. If you need something more specific than that, please provide the URL to the web page you are referring to .