“SpotCommerce” Documentation by “Tien Nguyen” v1.0

Shared By http://www.guidepedia.info


SpotCommerce

Created: Aug 20, 2014
By: Tien Nguyen
Support: SUBMIT A TICKET
Shared By: GuidePedia

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

  1. Installing Template
  2. Mobile Template Settings
  3. Uploading Logo
  4. Working with Menu
  5. Adding Slider Background
  6. Working with Slider
  7. Adding Horizon Section Background
  8. Text widget in Horizon Section
  9. Enable Subscribe Form
  10. Add Social Icons
  11. Adding Static Pages
  12. Enable Search Preferences
  13. Adding New Products
  14. Importing Testing Data
  15. Blog Widget Settings
  16. Translating
  17. Setting Variables
  18. Verifying

1. Installing Template - top

Extract your download package, you will find a folder with name SpotCommerce-template-xml. Access this folder
document-img
 And then open the file spotcommerce-v-*-*-*.xml with Notepad (or any text editor, recommend Notepad++, download here: http://notepad-plus-plus.org/download/)
document-img
 Right click and choose Select All
document-img
 Right click again and choose Copy
document-img
 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
document-img
 In template page, click Edit HTML button to open template editor.
document-img
 In template editor, click on the code and right click to choose Select All
document-img
 Right click again and choose Paste, then click Save Template button to finish installing the template
document-img


2. Mobile Template Settings - top

To change mobile template to SpotCommerce template, access Template page and then click gear button under mobile preview window
document-img
 Then opt in "No. Show desktop template on mobile devices" and click Save button
document-img

3. Uploading Logo - top

Access your Layout page and click Edit link on Header widget
document-img
 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.
document-img


4. Working with Menu - top

Access your Layout, click Edit link on Main Menu widget.
document-img
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.
document-img
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:
document-img


5. Adding Slider Background - top

Access Layout, click Edit link on Header Image Background widget.
document-img
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.
document-img


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.
document-img
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.
document-img
 Below image show the relation between the title format and the real display.
document-img
In Slider section, you can also drag and drop Image widgets to rearrange them. After have a nice order, click Save arrangement to save.
document-img

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
document-img


8. Text widget in Horizon Section - top

Access your Layout, click Edit link on DIRECTLY widget.
document-img
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.
document-img


9. Enable Subscribe Form - top

Access your Layout, and click Edit link on GET UPDATES widget.
document-img
 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.
document-img


10. Add Social Icons - top

Access your blog Layout, click Edit link on Social Links widget.
document-img
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.
document-img
After finished, click Save to apply

11. Adding Static Pages - top

Access Pages, and click New Page button.
document-img
Input page Title and Content and click Publish.
document-img
Return back your blog Layout and click Edit link on Page widget.
document-img
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.
document-img


12. Enable Search Preferences - top

Access Settings / Search Preferences and click Edit link on Meta Tags / Description option.
document-img
 Opt in Yes radio and input your site description then click Save changes.
document-img


13. Adding New Products - top

Below figure showing the relation between your posts content and what will show on the template.
document-img
 Below figure showing relation between the label you input for your posts and what will show on template.


document-img


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.
document-img
 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

document-img

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.
document-img



15. Blog Widget Settings - top

Access blog Layout, and click Edit link Blog Posts widget.
document-img
In Configure Blog Posts window, input Number of posts on main page value by 8 and click Save button to apply.
document-img


16. Translating - top

Access your blog Layout and click Edit link on TRANSLATOR widget.
document-img
 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.
document-img
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.
document-img


17. Setting Variables - top

Access your blog Layout, click Edit link on VARIABLES widget.
document-img
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.
document-img
Below is the list of variable names and their associated value format:


18. Verifying - top

Log in to http://themeforest.net. Click to your profile drop down and choose Downloads.
document-img
In download page, click Download button and choose License ceritificate & purchase code.
document-img
After download the license file, open it and copy Item Purchase Code
document-img
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 CODE


Note 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


document-img
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.
document-img
Back to your blog Layout, and click Edit link on VERIFY CODE widget.
document-img
Paste the verify code that you just got into Content field, then click Save

document-img

LIKE THIS TEMPLATE? SHARE TO YOUR FRIENDS

Shared By http://www.guidepedia.info

Facebook Twitter More...

Go To Table of Contents