SureDone storefront templates are built with HTML, CSS, JavaScript and Twig. The default storefront is very basic - black and white and basic information.
- 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 comfortable with Twig.
- Before modifying any existing templates, download the existing template.
- Then create a new template.
-
If you make any mistakes, you can always revert back to the original storefront.
A sample default storefront looks like this:
Getting Started:
- Go to Settings > Templates, then
- Click Default to get into the default SureDone template.
- Scroll to the bottom.
- Click Download All.
- If you have an existing template and want to make modifications, use the same process.
- Rename your new template with some indicator that it is the newest version, such as V2.
-
If you run into problems with the html, you can easily switch back to the first version of your template or to the Default template.
Adding a New Template:
- Go back to Settings > Templates
- Enter a new template name under Add Template.
- Click on the new template name.
- Here, you can upload all of the new files (same files to start).
- The only files you can upload here are .htm files.
- Your assets (images, css, scripts) need to be added in Settings > Assets which will be covered below.
Setting a New Default Template:
- Change the Site Flavor.
- Switch Confirm to On.
-
Click Save Settings.
To check your storefront, hover over Storefront and click Go To Storefront.
Uploading Assets:
Images, CSS, JavaScript and any other files can be added in Settings > Assets. Setup this up as a folder 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 are stored.
- Select the folder which will house the assets.
- Click Choose Files.
- Select all of the files you want in the folder.
- Click Upload Files.
- This cannot handle more than 100 items at the same time.
- For example, 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 name of new folder, click Choose Files.
- Select the files that you want to add into your new folder.
-
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:
-
When it's just SureDone, it's cached. When you reference Amazon, it's live.
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. Please see 4.2 Basic Updates on your Storefront, for more information.
Below are additional guides to go deeper into those topics.
4.5 Twig Templating Engine (advanced documentation)
Redirect Links:
If you have an existing website (not on SureDone) with a steady flow of traffic, you'll want to setup redirect links for categories and items so that Google doesn't penalize you for having too many 404 Page Not Found errors.
- You'll need to create a spreadsheet of your old category names and the full URL for those categories.
- Add another column of the new categories next to them to represent the new URL on SureDone
- Send this over to our support team and we can upload your redirect links.
- You will need to follow the same procedure for your item URLs as well (i.e. if /womens-blue-shirts/rp143 should now link to /womens/shirts/blue/ralph-lauren-polo-blue-solid)
Setting the site live:
After everything is finished, you're ready to redirect your website URL to SureDone.
To learn how to point your custom domain name to the SureDone website, please review 4.11 Using Your Custom Domain With Your Storefront.