Editing Your HTML Templates
Editing HTML can be intimidating even for those who are familiar with the language, but it can lead to great results in getting your page to look exactly how you envision. Before you start, there are some important things you should know.
Make Backups!
Before making a change of any kind, make a backup of your raw, unedited templates. Save these to your desktop as a precaution in case something doesn’t behave as you intend. Do not attempt to save time by skipping this step. Without a backup, you may find yourself needing to start over completely if you make a serious error, which will cost you more time and effort in the long run.
Your backup process will depend on how you plan to access and edit your template files. There are two separate ways to access your site’s templates. These are:
- Template Editor
- To access the built in template editor go to Settings ->Design ->Theme & Styles and click on the “Edit Template (HTML)” button found along the top right. Select the template you’d like to back up/edit and click its edit button. To make a back up, 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. Use these to connect to your store and navigate via FTP to web/assets/templates/[themefolder] where “themefolder” 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
Your theme folder will contain your site’s frame.html file as well as any images and CSS files unique to the theme itself. With FTP you can download these all at once instead of the “one by one” method available in the built-in Template Editor.
Editing Tools
Certain text editors come with features that make them ideal for editing code. Color-coded text, highlighting, and line numbers are all very helpful when editing HTML or CSS. For Windows, Notepad++ is an excellent (and free) choice. Atom is another popular free editor and works on both Windows and Macintosh. You could also try Microsoft’s Visual Studio Code which is free too and works on multiple operating systems.
Setting up a development store
To develop freely with no risk to your live website, contact Shift4Shop to set up a development store. This will provide you with an environment in which you can experiment and apply all the same edits you could make to a live store, without altering your existing site until you’re ready.
We highly recommend the use of a development store while designing, even when you keep backups, and strongly suggest you engage in deep customization only on your development site. Once everything is ready and working, it can go live— without ever presenting the risk of harming your live store’s functionality.