SureDone storefront templates are built with HTML, CSS, JavaScript and Twig. If you have a template that uses PHP, it will need to be converted to Twig. SureDone has developers that can do this for you if you do not have a developer that knows Twig. Before modifying any existing templates, you'll want to download the existing template and then create a new template. This way if any mistakes happen, you can always revert back to the original storefront.
TABLE OF CONTENTS
- Getting Started:
- What are some of the template files?
- Changing a Template File
- Uploading Assets:
- Setting Logos, Favicon, Icons and CSS
- Creating Pages
- Creating Categories
- What Can I do With My Page? Twig Templating Engine (advanced documentation)
- Redirect Links
- Setting the site live
Getting Started:
First, go to Settings > Templates, then click Default or default-2019 to get into the default SureDone template. Scroll to the bottom and toggle "Copy to Library" and then save settings. This will create a new template for you. You can click on "Go Back" at the top of the page, and next to "user" you'll see the new template called "default-2019-###" where the ### is a long string of numbers.
Go ahead and click on the new template name. At the bottom of the page you'll see a link to "Download All". Click on this to download the template to your local computer for editing (after unzipping into a folder).
To select your new template as the default template, change the Site Flavor, switch Confirm to On and then click Save Settings.
To easily check your storefront, hover over Storefront and click Go To Storefront.
What are some of the template files?
| File Name | What is it? |
| home.htm | Your home page. |
| html-header.htm | Contains the header used on most pages ABOVE the <body> tag. |
| header.htm | Contains the top menu and remainder of items to appear at the top of every page. |
| footer.htm | Contains the footer used on most pages (often where you also place javascript links too). |
| product.htm | The default template for product pages. Keep in mind you can create multiple templates and then specify them on a per product basis. |
| page.htm | Default template for "pages" you create. |
| category.htm | Default template for displaying products when someone clicks on a "category" page. |
| contact.htm | Default contact page |
| cart.htm | The main cart page. Keep in mind that templates can "include" sub-templates so keep an eye out for those in these "main" templates. |
| email-*.htm | The emails that get sent out for various actions. |
| search.htm | Default search page. |
| results.htm | Default search results page. |
There are plenty of other pages too so we suggest exploring them.
Changing a Template File
The new files will OVERWRITE your old ones so make sure to keep a backup! To change a template file.
- Navigate to the template on SureDone where it shows a list of all of the template files.
- Click on the "Choose File" button at the bottom of the page. Select up to 99 files to upload from your local computer.
- Click on "Save Settings".
Uploading Assets:
Images, CSS, JavaScript and any other files can be added in Settings > Assets. This is setup as a folder structure so you can keep your assets organized. The folder that is selected by default is logos. When you upload new logos under Settings > General, this is where all of your logos get uploaded to.
First, select the folder you want to upload the assets to. Click Choose Files, select all of the files you want in the folder and then click Upload Files. This cannot handle more than 100 items at the same time. If you have 250 images that you’re uploading to the images folder, you will have to upload 100 at a time.
If you want to create a separate folder, click the Add checkbox next to the dropdown so you can add the media. After typing in the new folder, go ahead and click Choose Files that you want to add into your new folder. Once you've selected them, click Upload Files to create your new folder and upload the media.
It will give you a URL like: http://assets.suredone.com/1234... you need to add Amazon in the middle of it when referencing the file. Change the URL to be:
http://s3.amazonaws.com/assets.suredone.com/1234/...
When it's just SureDone, it's cached. When you reference Amazon, it's real time.
Setting Logos, Favicon, Icons and CSS
Go to Settings > General to set your logo, your favicon, enter your Homepage title/description, change the directory of your icons or your CSS.
Below are additional guides to go deeper into those topics.
Creating Pages
Creating Pages in your Storefront
Creating Categories
What Can I do With My Page? Twig Templating Engine (advanced documentation)
Redirect Links
If you have an existing website with a steady flow of traffic, you'll want to setup redirect links for categories and items. To do this, you'll need to download a spreadsheet of your category names and the full URL for those categories. Best thing to do would be to add another column of the new categories next to them. Once finished, send this over to our support team and we can upload your redirect links. The exact same thing needs to be done for your item URLs as well.
Setting the site live
After everything is finished, you're ready to redirect your website URL to SureDone. This is not a forward, but requires following these instructions:
https://support.suredone.com/support/solutions/articles/1000227669