And then open the file spotcommerce-v-*-*-*.xml with Notepad (or any text editor, recommend Notepad++, download here: http://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
Then opt in "No. Show desktop template on mobile devices" and click Save button
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
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
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
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
Text widget in Horizon Section
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: http://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
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
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: http://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.
Adding Static Pages
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
Opt in Yes radio and input your site description then click Save changes.
Adding New Products
Note: to keep your image not go to slider, you can input [stay] in image alt or title.
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
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
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
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.
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.
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.
- ADMIN_EMAIL: set your email for this variable to receive order and contact emails in case Blogger email server has error. You will need to make a test checkout for the first time to receive confirmation link to active the email for this service. ** Warning **: We use free third party service so the send / receive feature may delay more than using default Blogger email system.
- 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.
- MAX_COUPON_VALUE_PER_ORDER: set a number which will be the maximum amount of money you allow to off per order. Example, no matter how many percent your COUPONS provided, the maximum off is $100, so you set this variable to 100
- 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_1_NAME: your bank account name that will show in bank transfer checkout method.
- BANK_ACCOUNT_1_NUMBER: your bank account name that will show in bank transfer checkout method.
- BANK_ACCOUNT_1_BANKNAME: bank name of your bank account that will show in bank transfer checkout method.
- BANK_ACCOUNT_1_SORTCODE: sortcode number of your bank account that will show in bank transfer checkout method.
- BANK_ACCOUNT_1_IBAN: iban code of your bank account that will show in bank transfer checkout method.
- BANK_ACCOUNT_1_BIC_SWIFT: swift code of your bank account that will show in bank transfer checkout method.
If you want to your second bank account, you can replace _1_ to _2_ from above variables. For example:
BANK_ACCOUNT_2_NAME, BANK_ACCOUNT_2_NUMBER, BANK_ACCOUNT_2_BANKNAME, BANK_ACCOUNT_2_SORTCODE, BANK_ACCOUNT_2_IBAN, BANK_ACCOUNT_2_BIC_SWIFT
then so on for 3rd, 4th, and 5th account
- 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
- MAX_ARCHIVE_ITEMS: number items will show in archive pages (like label, search, date-time pages).
- SHOW_COLLECTION_AT_END: position of collection section. Set this to "false" to move the collection section to above the horizon section. Default is "true".
- 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.
- ENABLE_FIELD_EMAIL: similar above but for showing / hiding Email field.
- ENABLE_FIELD_PHONE: similar above but for showing / hiding Phone field.
- WHATSAPP_PHONE_ORDER: set to your Whatsapp phone number and the template will show "Order via Whatsapp" button on mobile devices