Website Content Guide - Part 2 | Shift4Shop External

Website Content Guide - Part 2

This guide will show you how to manage content on your online store. Content can be created and customized on your home page, category pages, checkout pages, contact pages, and any webpage you develop. This guide will give you a basic overview of the tools to make these customizations and how to manage your content.

This is Part 2 of the Content Design Guide and we will mention more advanced ways of editing your store's Content Pages.

Click here to Access Part 1 of the Content Design Guide, which will cover more basic content editing topics.

Please Note: The information in this guide is provided solely as a courtesy and to offer basic instructions on making very simple changes to your store's HTML templates.

Please understand that - regardless of how simple the changes may be - HTML changes and troubleshooting fall outside the scope of our support department. The Shift4Shop support team is neither trained, qualified, nor allowed to make these changes for you. The boundary of our scope in this matter is limited to providing these instructions and helping you reset the template if the changes don’t work as you wanted.

If you are uncomfortable with making changes to your site’s HTML, please contact your sales representative and inquire about our HTML and design services which can make these changes for you.

Thank you for your understanding

Editing your HTML Templates
Every page of your Shift4Shop Store has its own respective HTML template page that controls the basic structure of the page. The following information is intended to provide some guidelines for editing your site's HTML templates.

Template Editor
Using the built-in template editor will let you review and back up each HTML template individually. This is typically a good solution if you plan on only updating a small number of templates at one time.
- To access the built-in template editor:
  1. Go to Settings > Design > Themes & Styles.
  2. Then, click on the Open Template Editor button located within the Edit Template section of the page.
    
    This will display the templates that are unique to your store's chosen design theme. Typically, this will show only your frame.html template, but any template that is unique to your store will be listed here.
    
    Along the top right of the template list, you'll see a drop-down menu labeled "Go to Folder:" which will let you view every template available to the store.
  3. Click on the Go to Folder drop-down menu and select the "templates/common-core" folder (*See note below).
  4. Select the template you'd like to back up/edit and click its Edit button.
  To make a backup of the individual template, CTRL-A (select all) in the box where all the coding is, CTRL-C (copy) it and CTRL-V (paste) it into a text editor like your computer's notepad program. Be sure to save the file with the same name as it has listed in the template editor. This helps minimize confusion later on when finding your file(s).
FTP
A better way of accessing your template files is via FTP. When you signed up with Shift4Shop, you were sent your account's FTP login credentials. These will allow you to connect to the store's FTP server and download all available templates at once time.
- Using FTP:
  1. Connect to your store's FTP.
  2. Navigate to web/assets/templates/common-core to view all of the store's available HTML templates (*See note below).
  3. Select the HTML templates you wish to back up and transfer them to your desktop.
    
    You can now edit these templates (on your desktop) as needed.
    
    After editing the templates, you will upload them (via FTP to your theme folder by navigating your FTP program to web/assets/templates/theme_folder where "theme_folder" is the theme your store is using.
    
    For example, if your site is using the default theme veniam-core, your FTP path will be web/assets/templates/veniam-core.

It is important to note that editing the HTML templates does not provide any type of WYSIWYG functionality and is instead editing raw HTML code. Therefore, it is strongly recommended to have at least some working knowledge of HTML before proceeding with edits.

Template Structure
When editing your Shift4Shop HTML template files, you should also be aware of the structure and hierarchy that comes into play.

Template Structure - frame.html
- Your site's design theme is made up of a series of images and cascading style sheet (CSS) elements that control the specific colors, look and feel of the site. The formatting and placement of those elements are controlled by your theme's frame.html file.
  
  The frame.html file basically controls the top, bottom, sides and background of your site. All of the pages that make up your store (like the home page, category pages, product listings, view cart, checkout, etc.) these are all nested in the middle of the frame. In essence, this is why we use the word "frame" in the file's name.
Template Structure – default.css
- So we've established that the frame.html controls the layout of the design's elements. It dictates where the elements will reside. The coloring and look of the theme are controlled by the Cascading Style Sheet or CSS file for short. Try to think of your site as a house; the frame.html is the builder's blueprint which dictates where the elements will be, and the CSS is the interior designer, which controls how those elements will look.
  
  With CSS, you can control many design elements of the site, including background colors, font sizes, font colors, and many other features.

Template Structure - Common Folder
- One final consideration to your site's design is the common folder which houses all of the other html templates. As mentioned previously, the Theme's frame and CSS files control the look and feel of your site. The frame also contains all of the other page templates in its middle section. These other templates are served from the site's Common folder.
  
  The common folder (web/assets/templates/common-core or web/assets/templates/common-html5 if using an older theme) is maintained and updated by Shift4Shop and therefore cannot be written to. However, if there's a common template file that you'd like to edit, download a copy of it via FTP and upload it to your site's theme folder. Your store will automatically use it instead.
  
  The file can be edited freely once it's in your theme folder.

In many cases, these updated features will rely on elements contained in the common templates. Therefore if you have a highly customized site with copies of common template files in its theme, you might not see the new features.

CSS File
Aside from the main frame.html template, another file that controls your store's basic look and feel is its cascading style sheet (CSS) file.

Generally speaking, the frame.html acts determines the layout of elements, while the CSS file acts as the color and formatting instructions for those elements. To put it another way, frame.html would be the blueprint of a structure that dictates where each "room" is physically located; CSS is the interior designer that determines the color schemes used for each "room."

Here we'll try to explain CSS in some depth.

So what exactly is CSS?

CSS is a design shortcut that allows you to control how certain elements will display on a site when its HTML is ultimately displayed by the browser.

For example, let’s take this sentence in bold red font:

The quick brown fox jumps over the lazy dog.

In basic HTML coding, this would be written as:

The quick brown fox jumps over the lazy dog.

Now of course, this is just one simple sentence. However, let’s say you want several of your sentences on the site to follow this color and format. You’d have to write this coding into each and every one of them. Most HTML editing programs will make this fairly easy (if somewhat time-consuming), but let’s say you ultimately decide you don’t like bolded red text. You’ve decided to change the font to blue and italics. Hard coding it this way would mean changing every… single… instance… of the coding on your store.

This is where something like CSS comes in handy.

A CSS file can be created which dictates all of these coloring and formatting instructions using "Styles." Each style element would have it's own unique name. For example, header price, description, and add to cart can all be designated as their own individual CSS elements.

When editing your HTML, you would reference the CSS file in the HTML's header while listing the element classes in line with their respective tags.

Here’s an example of a simple CSS instruction:

<style> .fox{ color: red; font-weight: bold;} </style>

This is a simple instruction telling your HTML that you want the text to be red and bold. The ".fox" portion of the script is the name of the element. When you write your HTML, you reference this instruction by using the “.fox” name as the line's class.

So in your coding, the sentence may look like this:

The quick brown fox jumps over the lazy dog.

If you decide to change your HTML’s coloring at any point, edit the CSS file and all of your code referencing the ".fox" element will update to reflect the new colors.

Of course this is an overly simplified example of CSS, but there are many aspects of your theme that are controlled via the CSS file. Some of these include:

Button Colors
Text coloring
Text formatting and size
background and static images
cell border weights and colors
and many more.

For more in-depth information on basic CSS, please click here to review some excellent tutorials from w3schools.com.

Design Docs
In closing, we want to leave you with these final notes on editing your HTML templates.

Dynamic Variables

When editing your template files, you'll notice certain elements listed in brackets like [productid] or [store_name] and others. These are Shift4Shop's dynamic variable tags and are used by the ASP coding of the software to insert elements. For example, [store_name] will insert whatever is listed in the Store Name field found in Settings > General > Store Settings.

Please be sure to preserve these bracketed items when editing your templates.

Comment Tags

You will also notice comment tags in several areas of the HTML code.

Comments tags are normally used by designers to notate a certain area of coding. The formatting of the comment tag prevents it from displaying on the live site's HTML.

For example the following will only display the sentence and ignore the "Start:" and "End:" portions when rendered live.

<!--START: Inserted sentence -> The quick brown fox jumps over the lazy dog. <!--END: Inserted sentence ->

With your Shift4Shop store's templates, the comment tags serve two purposes.

First, they're a good way of seeing what the specific code is in reference to:

Example: <!--START: PAYPALEXPRESS->

Secondly and perhaps more importantly, the comment tags are also used by the ASP coding to reference certain functions. Therefore, when editing your templates, please be sure to leave the comment tags unedited as well since they can also affect how certain cart functions will work.

In closing: We do our best to make customizations as easy and as painless as possible. However some changes will be better suited for HTML editing. Fortunately, the Internet is filled with many valuable resources and tutorials to help you get started.

Perhaps the most valuable are the free tutorials available at www.w3schools.com

Good luck with your edits and enjoy your new journey toward web design!