|
If you would like to create your own theme for your store, the best way to go about it is to base your design off of one of the pre-created themes found in your Shift4Shop store. This way you can download the theme, edit it and then upload it back to your store for your own use.
What you will need:
- Your account's FTP credentials
- An FTP client
- Your Theme's folder name
Here are the basic steps:
- Go to Settings >Design >Themes & Styles in your Shift4Shop Online Store Manager
- Install one of the pre-created themes on your store
- Connect to your store's FTP and download the theme folder from the web/assets/templates/ FTP folder
- Rename the theme folder on your desktop
- Make your changes as needed
- Re-upload the renamed and edited theme folder to the web/assets/templates/ FTP folder
- Log into your Shift4Shop Online Store Manager and go to Settings >Design >Themes & Styles
- Install and apply your edited theme
Those are the basic steps needed. For a more in-depth description of the process, keep reading below!
First let's select a theme that you'll be basing your own design off of.
- Log into your Shift4Shop Online Store Manager and - using the left hand navigation menu - go to Settings >Design >Themes & Styles.
Let's talk about the Themes & Styles section
In the Themes & Styles section, you will see all of the Themes that are available for use on your Shift4Shop store. As you browse each theme, you can hover over its thumbnail image to review its respective name. Clicking on a theme's image will show you a screenshot representing the theme's appearance. If the theme is marked as "responsive" the image will also show representations of the theme on desktop and mobile platforms.
Viewing the theme's image will also have an "Install Theme" button that will download it and add it to your store. During the installation process you will be asked if you would like to Apply the theme to the store - meaning that it would be live on the store. If you select no to this option, the theme will still be installed to your store but it won't be made live. However, you can apply it later as needed (more on that in a moment).
As you look through the themes, find one that best meets your desired layout that you would like to have on your store. For example, some themes have categories listed along the top while others have categories listed along the left hand side of the store's framing. In some cases, the themes may have a large banner across the top while others have the banner nested. Just browse and find the layout that you'd like to see for your site and install the themes as needed.
After you've installed a few themes, they will be shown in the Themes and Styles page with a small diagonal banner labeled "Installed" on it. Again, this just means that the theme is installed but not yet applied to the live store.
If you click on any of these installed themes, you can apply them outright or otherwise click on Preview to see how it would function with your products.
Once you've selected the theme that you'd like to use for your own design, make a note of its name and proceed with the following steps:
- Connect to your Shift4Shop store's FTP access
- Navigate to web/assets/templates/
The templates folder will contain all of your installed themes
- Locate the theme folder that you've chosen for your edits and download the folder (via FTP) to your desktop
(download the whole folder!)
- Once you have the theme folder on your desktop, rename it.
Tip
The name of the folder can be anything you'd like it to be. We only suggest naming it something other than its original name to prevent confusion when you upload it back to your store.
Main Theme files
Typically, the theme folder will contain a frame.html file and a CSS folder.
- The frame.html file
This is the HTML template that controls the layout of your site.
- The CSS folder
Is a folder that will contain the style sheets used by the site
These are the two main elements that control the overall look and feel of your site. The best way to view the relation between frame and CSS is to think of the frame file as the blueprint to a building. This blueprint specifies where certain rooms and areas of the building will be located. As the building is being constructed, the contractor will build the walls and doorways of the building according to blueprint. Using this analogy, the CSS can then be viewed as the interior designer of the building that determines the various look and feel of the rooms within the building. The frame and CSS work along the same lines. The frame.html dictates where elements will go and the CSS will dictate what they look like.
Additional Theme Files
All theme folders will contain the frame.html file and CSS folder mentioned above. These are the important ones to be most concerned with. However, in some cases, you may also see these additional folders/files in the theme folder you download.
- home.html (file)
This is the HTML template used for the store's home page. Typically it's the same file as found in the global "Common" folder so it is not always needed or unique to a particular theme. Therefore it isn't found in every theme folder.
- images (folder)
This folder will contain images and graphics used by the theme. For example certain buttons may be image based and these images will be found here. Keep in mind that your CSS folder may also contain its own images folder
- js (folder)
The js folder will contain any javascript that is used specifically by the theme. As with the home.html file, these are typically the same as served from the global common folder, so they might not always be present in the theme folder.
- fonts (folder)
If your theme uses special fonts or font/icon effects, they'll be located in this folder
- Screenshot files
These will be screenshots of the theme as it will be shown on the Theme selector page mentioned earlier. You can make your own for your theme if you'd like! Just preserve their name.
Once you have the theme folder downloaded and renamed on your desktop, you're now ready to edit the theme as you see fit.
How do I edit the Theme?
HTML design and editing is a pretty subjective process and is not within the scope of our support services. Therefore we cannot describe specifically how or where to make edits to the theme files. That is something that you - as a designer/developer - must determine for yourself. It would be like us telling you not only how to paint your house, but also tell you which type of paint to use, what colors to use and where to apply them. It's a creative process and you are the creator.
However we are able to provide the following tips to keep in mind when making your changes.
- Make a backup of the theme folder and store it somewhere safe on your computer!
As you make changes to the theme files, you should get into the habit of making backups of your changes just in case something doesn't work as you plan. Rather than starting over each time, you can revert to a previous back up
- Preserve Comment Tags!
The html templates contain certain blocks of coding that are used by the software to insert details into the various sections. These are usually written as comment tags and contained in blocks. You can edit the HTML as you see fit, but in order for the software to function correctly, please be sure to preserve the comment tags as they are written. The comment blocks will usually look like this in the code:
<!--START: [function name]->
html code
<!--END: [function name] ->
- Preserve bracketed items!
Similar to the comment tags, the software also uses variables that are needed to insert information form the store's database. These are always written within open and closed brackets. Again, you can edit the HTML around the variables as needed, but please preserve the variables and their brackets exactly as they are written. The bracketed variables will usually look like this:
- Refer to the design guide!
We've set up a design guide specifically as a reference for web designers/developers to see the various comment tags and variable tags that are used on the store. Click here to access it!
- Consider purchasing a developer account
As you're designing your theme, you will need a Shift4Shop store to test it on to make sure it looks the way you'd like it to. However, you might not necessarily want your live store to be the testing ground for this. Therefore, you can purchase a separate account to act as your "dev store" that can be used for the design. For example, a nano plan that you can open temporarily just for the purposes of developing the design.
After creating and saving your design, you can upload it to your Shift4Shop store for use.
- Once again, connect to your store's FTP access
- Navigate to the web/assets/templates FTP folder
- Upload the edited/renamed Theme folder from your computer to the templates folder
- Log into your Shift4Shop Online Store Manager and once again navigate to Settings >Design >Themes & Styles
- Locate the theme you just uploaded
(Hint: You can use the search bar at the to to search for it by name)
- Click on the theme and expand its view
- Click on Apply to have it made live on your store!
|