|
This article 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 page, and any webpage you develop. This guide will give you a basic overview on 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 article 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 look into our Webmaster Services. For a paid fee, our specialists can assist in making design changes. We also have Experts we recommend if you want even more in-depth work done on your store with us.
Thank you for your understanding
Editing your HTML Templates
Back to top
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.
Please Note:
We really mean it when we say you need some level of HTML knowledge. While our support team can point you in the right direction (where to go, how to get there, etc), please keep in mind that support is neither available nor qualified to offer HTML support of any kind. If HTML coding is something you're not comfortable or knowledgeable with, please look into our Webmaster Services. Reach out to our Support Team for more information on them.
- Template Editor
Using the built-in template editor will let you review and backup 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:
- Go to Settings >Design >Themes & Styles
- 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.
- Click on the Go to Folder drop down menu and select the "templates/common-core" folder
(*See note below)
- Select the template you'd like to back up/edit and click its edit button.
To make a back up 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
- Connect to your store's FTP
- Navigate to to web/assets/templates/common-core to view all of the store's available HTML templates.
(*See note below)
- 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.
*Note
The name of the common folder for most users is "common-core" because it pertains to stores using the latest and most up to date Core themes. However, if you have previously installed older themes during your time with our service, you may also see folders named "common-html5" and "common" in the sections described above.
These folders pertain to older themes that were previously available on the Shift4Shop service. For example, HTML5 themes used a common folder called common-html5 while even older themes used a folder simply called common.
If your installed theme contains the word "-core" in its name, you will need to use the common-core folder.
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 which 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 is 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 elemts will look.
With CSS you can control many design elements of the site including background colors, font sizes, font colors, and many other features.
Note
when you edit your site's CSS, the store will automatically switch to using default_modified.css
- 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 serving 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, simply 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.
Note
If you use the built in template editor, clicking edit on any of the common files will automatically copy it to your theme folder.
Special Note
From time to time, Shift4Shop may update its product offering or introduce new features in to the store software. When updates are made they apply only to files in the common 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.
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 is some depth.
Note
To view and edit your particular theme's CSS file:
- Log into your Shift4Shop Online Store Manager:
- Go to Settings >Design >Themes and Styles
- Click "Edit Look/Colors (CSS) to see the individual elements that can be changed.
We include both a semi-graphical user interface for editing individual elements, as well as an advanced option to edit the raw CSS file.
So what exactly is CSS?
CSS is a design shortcut which 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:
<p><strong><font color="#FF0000">The quick brown fox jumps over the lazy dog.</font></strong></p>
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 italic. 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, add to cart, these can all be designated as their own individual CSS elements.
When editing your HTML, you would simply 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 simply reference this instruction by using the “.fox” name as the line's class.
So in your coding, the sentence may look like this:
<p class="fox">The quick brown fox jumps over the lazy dog.</p>
If you decide to change your HTML’s coloring at any point, simply 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
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] ot [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 ->
<p>The quick brown fox jumps over the lazy dog.</p>
<!--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 towards web design!
|