“SpotCommerce” Documentation by “Tien Nguyen” v1.0
Shared By http://www.guidepedia.info
SpotCommerce
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to submit a ticket via my user page contact form here. Thanks so much!
Table of Contents
-
Installing Template
-
Mobile Template Settings
-
Uploading Logo
-
Working with Menu
-
Adding Slider Background
-
Working with Slider
-
Adding Horizon Section Background
-
Text widget in Horizon Section
-
Enable Subscribe Form
-
Add Social Icons
-
Adding Static Pages
-
Enable Search Preferences
-
Adding New Products
-
Importing Testing Data
-
Blog Widget Settings
-
Translating
-
Setting Variables
-
Verifying
1.
Installing Template - top
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:
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
2.
Mobile Template Settings - top
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
3.
Uploading Logo - top
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-data\images\spot-commerce-logo.png
After upload, click
Save button to apply.
4.
Working with Menu - top
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:
5.
Adding Slider Background - top
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-data\images\slider-background.jpg
After uploaded, click
Save to apply.
6.
Working with Slider - top
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-data\images\slider\
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.
7.
Adding Horizon Section Background - top
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-data\images\horizon-background.jpg
8.
Text widget in Horizon Section - top
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:
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.
9.
Enable Subscribe Form - top
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.
10.
Add Social Icons - top
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:
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.
After finished, click Save to apply
11.
Adding Static Pages - top
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.
12.
Enable Search Preferences - top
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.
13.
Adding New Products - top
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.
14.
Importing Testing Data - top
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-data\blog-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.
15.
Blog Widget Settings - top
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.
16.
Translating - top
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.
17.
Setting Variables - top
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:
- CURRENCY_CODE : your country currency code, check the below list for valid values
- AUD
- CAD
- EUR
- GBP
- JPY
- USD
- NZD
- CHF
- HKD
- SGD
- SEK
- DKK
- PLN
- NOK
- HUF
- CZK
- ILS
- MXN
- BRL
- MYR
- PHP
- TWD
- THB
- TRY
- RUB
- VND
- 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.
18.
Verifying - top
In download page, click
Download button and choose
License ceritificate & purchase code.
After download the license file, open it and copy
Item Purchase Code
Access
Online Documentation Version, and
scroll down to the bottom to find the verify form similar with below figure and paste your Purchase Code into
Template Purchase Code field and your blog URL into
Your Blog Domain field, then click
GET VERIFY CODENote by GuidePedia: We kow you can not verify code here by going on this site. :)
So you have to get code for verification on GuidePedia. Get Code Here
If the purchase code is the right code, the window "Your verify code is:" will show and now you can copy the verify code for your site.
Back to your blog
Layout, and click
Edit link on
VERIFY CODE widget.
Paste the verify code that you just got into
Content field, then click
Save
LIKE THIS TEMPLATE? SHARE TO YOUR FRIENDS
Shared By http://www.guidepedia.info
Go To Table of Contents