LoginCreate an Account
Home
  1. Blogger
  2. Templates

Documentation for SpotCommerce – Blogger Shopping Template

We have a very detail documentation for SpotCommerce – Blogger Shopping Template with 10 sections, 18 images and 1520 words

DetailsComments (177)ReviewsDocumentationSupport

Basic Knowledge

Some basic but very important steps you must know before working with Blogger and this template

  1. Install Blogger Template
  2. IMPORTANTManage your site using Sneeit Spot
  3. Get and Import Dummy Content
  4. Enable Mobile Template
  5. Enable Search Preference for Better SEO
  6. Upload Site Logo
  7. Upload Favicon Image
  8. Work with Blogger Template Designer Tool

Activating the Theme

  1. Login to Sneeit using Envato Account
  2. Access the "Sneeit Licenses" tab in your Sneeit account to generate a license.
  3. Add Sneeit Spot into your Chrome (if did not)
  4. Access your blog dashboard, then select Sneeit Spot / Options / Keys and API and input your generated key for your site

Adding Slider Background

Access Layout, click the Edit link on the 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 uploading, click Save to apply.

Working with Slider

Access your blog Layout, in the slider section, you will see that I've already placed 5 Image widgets. So you just need to click the Edit link on an Image widget to edit or you can also add new Image widgets or delete/rearrange them from this section to make a slider as you want.

When editing any Image widgets in this section, just input the Title, Caption, and Link and click Choose File to upload an image for your Image widget. The below image shows the relation between the title format and the real display.

Horizontal Section

Access your Layout, and click the Edit link on the Horizon Image Background widget to upload a background image for this section.

You can also Edit the DIRECTLY (text) widget to input your store information. Any text which is in the format:  ##icon-code## will become an icon. You can find the icon codes at: https://fortawesome.github.io/Font-Awesome/icons/

For example, with the home icon, you will see its code is fa-map-maker, so the text that you will input to content is ##map-makert##

Here is what I input in the demo:
<b>##map-marker##BLOGGERCANDO, 01 ST, VIETNAM</b><br/><br/>
<b>##phone##+0849188039383</b><br/><br/>
<b>##paper-plane-o##[email protected]</b><br/><br/>

<br/>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

<br/><br/>
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.

Subscribe Form

Access your MailChimp account, select Audience / Sign-up Forms / Embedded forms, and select the Form Fields tab to make sure you opt-in only Email Address field, then click Continue to get the full form HTML. You will paste that code into an HTML widget called "GET UPDATES" in your Blogger blog layout.

Add Social Icons

Access your blog Layout, click the 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

For example, the Facebook icon code is fa-facebook, so you need to input facebook into New Site Name field.

After finishing, click Save to apply

Adding New Products

The below figure shows the relation between the content of your post and what will show on the template.

Note: to keep your image not going to the slider, you can input [stay] in the image alt or title.

The below figure shows the relation between the label you input for your posts and what will show on the template.

  • Input labels: _39, -40 mean you want to make this product has a current price is 39 (USD or other depending on your currency setting) and the old price is 40. This product will show as On Sale on the template.
  • Input label: _55 only, meaning you want to make this product has a current price is 55.
  • Input label: !0 means you want to make this product is Out of stock.

 

Importing Testing Data

This step is for testing the blog only, not for your main site.
Access Settings / Other and click the Import Blog link on the Blog tools option.

In pop-out window, click Choose File to upload your blog data. We included one example of data in your download package at path: SpotCommerce-testing-datablog-08-12-2014.xml

After uploading, just input the captcha number and opt in for the option "Automatically publish all imported posts and pages" then click Import Blog to finish.

 

Blog Widget Settings

Access the blog Layout, and click the Edit link Blog Posts widget.

In Configure Blog Posts window, input the Number of posts on main page value by 8 and click the Save button to apply.

Google Form Checkout

You can create a Google Form and use its prefill link as a backup in case the Blogger contact form gets errors when users check out.

Access https://docs.google.com/forms/ and create a new form by clicking the "+" button at the bottom right corner.

Create a field with the name Order (or any name you want) with the type "Paragraph" (important). Then click the ellipses menu and choose "Get pre-filled link"

In the pre-fill window, input "Order" to the answer of the Order field, click "Get Link" and then COPY LINK.

In the Sneeit Spot > Options, search Google Form and input the link you copied into Google Form Prefill URL, then Save your template.

 

Frequently Asked Questions (FAQ)

My blog is showing blur images

Please make sure you are using the latest version and that you set all your images to the original size.


Loading ...