Tutorial Video
Installing Template
Extract your download package, you will find a folder with name SpotCommerce-template-xml. Access this folder
And then open the file spotcommerce-v-*-*-*.xml with Notepad (or any text editor, recommend Notepad++, download here: https://notepad-plus-plus.org/download/)
Right click and choose Select All
Right click again and choose Copy
Log in to your Blogger dashboard and choose drop down menu of the blog you want to install the template for. In drop down menu, choose Template
In template page, click Edit HTML button to open template editor.
In template editor, click on the code and right click to choose Select All
Right click again and choose Paste, then click Save Template button to finish installing the template
Mobile Template Settings
To change mobile template to SpotCommerce template, access Template page and then click gear button under mobile preview window
Then opt in “No. Show desktop template on mobile devices” and click Save button
Uploading Logo
Access your Layout page and click Edit link on Header widget
Click Choose File and select your blog logo from your computer. We included a logo for demo in your download package at path: SpotCommerce-testing-dataimagesspot-commerce-logo.png
After upload, click Save button to apply.
Working with Menu
Access your Layout, click Edit link on Main Menu widget.
In Configure Link List window, with each menu item that you want to add, you must input the menu item name and link into New Site Name and New Site URL field and then click Add Link button. After added, click Save to apply. You can also click arrow (up or down) on each menu item to move it up and down to make your own order.
A sub menu will start with a “_” (underscore) symbol, a sub menu of sub menu will start with 2 underscore symbols “__” and so on. In above example, we had three menu items and the template will display them as below:
Adding Slider Background
Access Layout, click Edit link on Header Image Background widget.
In Configure Image window, click Choose File to upload your background image for slider section. We included a sample image in your download package at path: SpotCommerce-testing-dataimagesslider-background.jpg
After uploaded, click Save to apply.
Working with Slider
Access your blog Layout, in slider section, you will see that we placed already 5 Image widget. So you just need click Edit link on an Image widget to edit or you can also add new Image widgets or delete them from this section to make the slider as you want.
In Configure Image window, just input the Title, Caption, Link and click Choose File to upload an image for your Image widget. We also included testing image in your download package at path: SpotCommerce-testing-dataimagesslider
After upload image, just click Save to apply.
Below image show the relation between the title format and the real display.
In Slider section, you can also drag and drop Image widgets to rearrange them. After have a nice order, click Save arrangement to save.
Adding Horizon Section Background
Access your Layout, and click Edit link on Horizon Image Background widget. Do the same steps with when you upload background for slider. We included a sample image for this in your download package at path: SpotCommerce-testing-dataimageshorizon-background.jpg
Text widget in Horizon Section
Access your Layout, click Edit link on DIRECTLY widget.
In Configure Text window, change the title as you want, and input text in Content field. You can insert icon into your text with format ##icon-code##. You can find the icon codes from: https://fortawesome.github.io/Font-Awesome/icons/
Example, with home icon, you will see its code is fa-home, so the text that you will input to content is ##home##
After input everything, click Save to apply.
Enable Subscribe Form
Access your Layout, and click Edit link on GET UPDATES widget.
Change the Title and the FeedBurner URL as you want then click Save. This is important step, you must do it to allow your visitors can subscribe your blog feed and get updates from their emails.
Add Social Icons
Access your blog Layout, click Edit link on Social Links widget.
Input the social icon code into New Site Name field and your social link into New Site URL field, then click Add Link. Do the same steps for each social link that you want to add. You can find social codes at: https://fortawesome.github.io/Font-Awesome/icons/#brand
Example, facebook icon code is fa-facebook, so you need to input facebook to New Site Name field.
After finished, click Save to apply
Adding Static Pages
Access Pages, and click New Page button.
Input page Title and Content and click Publish.
Return back your blog Layout and click Edit link on Page widget.
In Configure Page List window, opt in the page you want to show, you can also drag and drop page item on List Order to make your own order. After finished, click Save to apply.
Enable Search Preferences
Access Settings / Search Preferences and click Edit link on Meta Tags / Description option.
Opt in Yes radio and input your site description then click Save changes.
Adding New Products
Below figure showing the relation between your posts content and what will show on the template.
Below figure showing relation between the label you input for your posts and what will show on template.
- Input labels: _39, -40 mean you want to make this product has current price is 39 (USD or other depend on your currency setting) and the old price is 40. This product will show as On Sale on template.
- Input label: _55 only, mean you want to make this product has current price is 55.
- Input label: !0 mean you want to make this product is Out of stock.
Importing Testing Data
This step is for testing blog only, not for your main site.
Access Settings / Other and click Import Blog link on Blog tools option.
In pop out window, click Choose File to upload your blog data. We included one example data in your download package at path: SpotCommerce-testing-datablog-08-12-2014.xml
After uploaded, just input the captcha number and opt in the option “Automatically publish all imported posts and pages” then click Import Blog to finish.
Blog Widget Settings
Access blog Layout, and click Edit link Blog Posts widget.
In Configure Blog Posts window, input Number of posts on main page value by 8 and click Save button to apply.
Change Fonts, Color, Background
Access Template / Customize
If you want to change body background image, select Background, and upload your image.
If you want to change fonts, colors, background colors or add custom CSS, you must select Advanced.
After all changes, click Apply to Blog button to finish. If you don’t click this button, all changes will not be applied.
Translating
Access your blog Layout and click Edit link on TRANSLATOR widget.
In Configure Link List window, input the text you want to translate (original text) into New Site URL field and the translated text (the text will show up) into New Site Name field.
In this example, I want to translate “Add to cart” to “Them vao gio hang”, I will input “Add to cart” into New Site URL and “Them vao gio hang” in to New Site Name, then click Add Link button. After add all translated texts, just click Save to apply.
You can translate any text of site. But in some cases, you must notices that some texts are not in one string. Example with add to cart button in product page, you will see this button has the number of order between texts. So the texts in this case will be split into 2 parts. Phrase 1 is “Add” and Phrase 2 is “items to cart”. That’s why you must translate them separately. All texts are case sensitive.
Setting Variables
Access your blog Layout, click Edit link on VARIABLES widget.
In Configure Link List window, input variable name into New Site Name and value of it into New Site URL, and click Add Link. When finish, click Save to apply.
Below is the list of variable names and their associated value format:
- COUPON: input your list of coupon codes. Example, if you want to off 25% for any body who has coupon XMAS25, you must input value for this variable is: XMAS25:25%. If you want off 25% for XMAS25 and $5 for NEWY, you must input: XMAS25:25%/NEWY:5. Remember, not include currency symbol in coupon list.
- CURRENCY_CODE: your country currency code, usually come with 3 letters. You can input any code you want, but if the code is not in below list, just make sure you also set CURRENCY_SIGN for your currency symbol. Below is the list of some valid currency codes:
- AUD: Australian Dollar
- CAD: Canadian Dollar
- EUR: Euro
- GBP: British Pound
- JPY: Japanese Yen
- USD: U.S. Dollar
- NZD: New Zealand Dollar ($)
- CHF: Swiss Franc
- HKD: Hong Kong Dollar ($)
- SGD: Singapore Dollar ($)
- SEK: Swedish Krona
- DKK: Danish Krone
- PLN: Polish Zloty
- NOK: Norwegian Krone
- HUF: Hungarian Forint
- CZK: Czech Koruna
- ILS: Israeli New Shekel
- MXN: Mexican Peso
- BRL: Brazilian Real
- MYR: Malaysian Ringgit
- PHP: Philippine Peso
- TWD: New Taiwan Dollar
- THB: Thai Baht
- TRY: Turkish Lira
- RUB: Russian Ruble
- VND: Vietnam Dong
- RON: Romanian Ron
- INR: Indian Rupee
- IDR: Indonesia Rupiah
- NPR: Nepalese Rupee
- NGN: Nigerian Naira
- CURRENCY_SIGN: Your currency symbol (optional, html entity allow). Default is $
- PAYPAL_EMAIL: your Paypal email that will be used to Paypal checkout method.
- SHIPPING_FEE: your shipping fee per order. The value must be number only, not include currency symbole. Right is: 20.00 and wrong is $20.00
- SHIPPING_FEE_FOR_EACH_ITEM: your shipping fee for each item in order. Format similar with SHIPPING_FEE
- STORE_NAME: your store name that will show in cheque checkout method.
- STORE_STREET: your store street address that will show in cheque checkout method.
- STORE_TOWN: your store town address that will show in cheque checkout method.
- STORE_STATE: your store state address that will show in cheque checkout method.
- STORE_COUNTRY: your store country address that will show in cheque checkout method.
- STORE_POSTCODE: your store postcode address that will show in cheque checkout method.
- BANK_ACCOUNT_NAME: your bank account name that will show in bank transfer checkout method.
- BANK_ACCOUNT_NUMBER: your bank account name that will show in bank transfer checkout method.
- BANK_ACCOUNT_BANKNAME: bank name of your bank account that will show in bank transfer checkout method.
- BANK_ACCOUNT_SORTCODE: sortcode number of your bank account that will show in bank transfer checkout method.
- BANK_ACCOUNT_IBAN: iban code of your bank account that will show in bank transfer checkout method.
- BANK_ACCOUNT_BIC_SWIFT: swift code of your bank account that will show in bank transfer checkout method.
- DAY_FORMAT: date time format, only allow dd/mm/yyyy or mm/dd/yyyy or yyyy/mm/dd/ or yyyy/dd/mm
- DEFAULT_THUMBNAIL: default thumbnail image src that will be used to show when a post has no image.
- AJAX_LOADING_IMAGE: default ajax image src that will be used to show when loading something in your site.
- NUMBER_ITEMS_FOR_COLLECTION: number items will show in collection section. Default is 3 and recommend a value that’s divisible for 3
- CART_CACHE_DURATION: number of day that the site will keep the cart and wishlist date of users. Default is 7
- SLIDER_ANIMATION_SPEED: the time in microseconds for slider animation. Default is 1000
- SLIDER_PAUSE_TIME: the time in microseconds for slider pause time. Default is 4000
- SLIDER_CONTROL: input false to hide next/prev button and true to show them. Default is true.
- SLIDER_PAUSE_WHEN_HOVER: input false and slider will continue running even mouse hover, input true to make the slider pause when mouse hover. Default is false.
- ENABLE_DIRECT_BANK_TRANSFER: input false to disable “Direct bank transfer” method and true to enable it. Default is true.
- ENABLE_CHEQUE: input false to disable “Cheque” method and true to enable it. Default is true.
- ENABLE_CASH_ON_DELIVERY: input false to disable “Cash on delivery” method and true to enable it. Default is true.
- ENABLE_PAYPAL: input false to disable “Paypal” method and true to enable it. Default is true.
- CURRENCY_POS: input after to show currency symbol after price value, and input before to show currency symbol before price value.
- SEP_LONG_PRICE: the character that will be used to separate long price value (example: 1 000 000đ). Default is a space character.
- ENABLE_FIELD_COUNTRY: input false to hide Country field in checkout form (both billing and shipping), true to show it . Default is true .
- ENABLE_FIELD_FIRST_NAME: similar above but for showing / hiding First Name field.
- ENABLE_FIELD_LAST_NAME: similar above but for showing / hiding Last name field.
- ENABLE_FIELD_COMPANY_NAME: similar above but for showing / hiding Company Name field.
- ENABLE_FIELD_ADDRESS: similar above but for showing / hiding Address field.
- ENABLE_FIELD_TOWN_CITY_STATE: similar above but for showing / hiding Town / City / State field.
- ENABLE_FIELD_POST_ZIP_CODE: similar above but for showing / hiding Post / Zip Code field.