Shoppinggo

Theme's Documentation

Created: 04/02/2013
By: Nesia
Email: Contact us from here

Thank you for purchasing Commerce WordPress Theme! Have any questions that are beyond the scope of this help and documentation file, template bugs or future plan? Don't hesitate, feel free to email via contact form here.

Yes, Shoppinggo is robust WordPress E-commerce Theme featuring responsive layout and awesome HTML5 and CSS3 Framework for your store. It's clearly that this theme is a responsive layout with adaptive approachment for each devices such as iPhone, iPad and many popular devices out there. Tools that help us a lot while crafting this template? Of course we use WordPress as main platform, Compass (SASS) framework for stylesheet preprocessors,HTML5 Boilerplate, Font Awesome Icons for each icon and last but not least is Twitter Bootstrap framework. Yes, we build this template on top (very) rock-solid framework and that's all already inside this template, just for you!

We need this theme to be flexible for our customer through theme layout and it bring Shoppinggo theme with some interesting features combined with WordPress E-commerce and WooCommerce plugin for e-commerce functionality. Homepage with homepage builder make it easy to maintain the flow of your content (products) when visitor reach your homepage at the first time. One more to tell you, it comes with free mailchimp newsletter template inside the bundle. Yes, you're ready to deliver some message, news, new/sale product from newsletter within the newsletter template directly to your customer email. Take a look screenshot below for your browser or mobile devices. Pretty nice, huh?

Theme Preview



Mailchimp newsletter template preview

There are two ways to install Shoppinggo WordPress Themes for your site and we will explain each way in this section step-by-step and you will not going wrong or make mistakes if you follow these instruction. But you need to keep remind yourself, that we're not going more detail, just step to install because it's a general common approachment by using WordPress platform. Before you install please make sure you are using the latest version of WordPress and make sure that your hosting is running the latest version of PHP and MySQL.

  1. Install via WordPress Dashboard (recommended)
  2. Install through FTP client (you need FTP software/apps)

B1. Install via WordPress Dashboard (recommended)

Following this instruction is easy, all you can do just login to your WordPress Dashboard. Make sure that you have level Administrator or similar to have an access to install theme or plugins. If you're allready login through your dashboard, please follow these step below.

  1. Navigate to your WordPress menu on the left and choose Appearence, then Themes section. Theme installation page will be open.
  2. Click Install Theme tab on top of section page.
  3. Select or click link Upload and browse theme in zip file from folder "Theme" inside Package that you're download from us.
  4. Ready to upload? Click Install now, then Activate theme. Please see screenshot below if you're getting confused.

If these steps are done, you will see our theme name on the left menu.

B2. Install through FTP client

Before you continue within these steps below, please make sure that you already have FTP client, which is software or apps to communicate with your server and your computer to upload files or our theme into server. If you ready, please take a look steps below.

  1. Open up your FTP client, such as Cyberduck, Forklift, Filezilla etc.
  2. Login to your server, input your server username, password, port then make sure that you're login to your server.
  3. Navigate to your wordpress site folder and find your wp-content folder.
  4. Go to Themes folder and extract our theme-name.zip. Note: find our theme-name.zip inside Theme folder from the package.
  5. Login to your WordPress Dashboard.

If you're succes install our theme through two method above, please continue to next section below to install your e-commerce plugin as an engine for your wordpress platform.

By default this theme support two awesome e-commerce plugins, Woocommerce and WP Ecommerce for your e-commerce platform under WordPress. Step(s) below will explain on how to install those two plugin into your site system.

  1. Installing WooCommerce plugin
  2. Installing WP e-Commerce plugin

C1. Installing WooCommerce plugin

  1. Go to your plugin page on the dashboard through Plugins link on the left menu and then click Add New under Plugins menu.
  2. In the search field type WooCommerce and click Search Plugins
  3. Click Install now
  4. After clicking that link you will be asked if you’re sure you want to install the plugin. Click yes and WordPress will automatically complete the installation
  5. Last, Activate your Woocommerce plugin. You are ready!

C2. Installing WP e-Commerce plugin

  1. Go to your plugin page on the dashboard through Plugins link on the left menu and then click Add New under Plugins menu.
  2. In the search field type e-commerce and click Search Plugins
  3. Click Install now

  4. After clicking that link you will be asked if you’re sure you want to install the plugin. Click yes and WordPress will automatically complete the installation
  5. Last, Activate your WP e-Commerce plugin. You are ready!

How easy is that? Now you're good to go to the next step how to set up and more.

After installing our theme, by default you will be redirected to our theme panel to set up your theme, after you open our themepanel you should click the green button SAVE ALL CHANGES on the bottom of our themepanel page and wait until you see notification OPTIONS UPDATED, this is important. If you have save changes for the first time, now it's time to refresh your site layout (it's not refresh page on the dashboard, but your site front-end) if your site looks good using our theme, then it's done.

  1. Setting options through Theme Options
  2. Sidebar manager, what is this?
  3. Backup settings your site options using themepanel.

D1. Setting options through Theme Options

It's time to customizing your layout now using themepanel, it's not confusing your mind, our themepanel designed to be good purpose and good functionality so you will easy to maintain and keep your site under control. This is screenshot our themepanel, take a look.

The green button at the bottom, please click after you install our theme it's important. Then now please fill the form that are necessary, we recommended you fill all the form like upload your logo, upload favicon (small icon for your page title on browser tab), google analytics setting, rss url, mail subscription, contact form email, pagination style (numbering or infinite scroll via load more trigger), display breadcrumbs etc. List below are summay for each option under Theme Options menu on the left on our themepanel.

  1. General Settings
    1. Header Text — Text next to top menu, you can use this text to show your address information.
    2. Custom Favicon — Upload you favicon for header logo title on your browser tab with this option or just type the url to your favicon.
    3. Tracking Code — Paste your tracking code, such as google code or similar to track your site traffic and visitor day by day, month by month. Please write with this format: <script type="text/javascript"> ... your js code ... </script>
    4. Custom CSS — Put your custom css code here.
    5. Post/Page Comments — Selecting this will enable or disable comment form on your page or post.
    6. Post Author Box — If you enable this options, a box containing user bio will appear below the post. Not working on product page.
    7. Disable admin bar — Check this option will disable admin bar on all user.
  2. Home Settings
    1. Call to Action — Call to action is effective to drive user/customer to buy your product. It will shown on Homepage Widgetize page template.
      • Call to Action — Check this if you want to show Call to action block.
      • Call to Action Title — The that will appear inside Call to Action block.
      • Call to Action Link/URL — If you fill this field, a button with link will appear inside Call to Action block.
      • Call to Action Button — Text for Call to Action button.
  3. Single Product
    1. Products Related Number — Number of related products that will appear on single product page.
    2. Products Up Sells Number — Number of upsells products that will appear on single product page.
  4. Style Settings
    1. Logo Settings
      • Use Logo on Header — Check this if you want to use image instead of text for your site title.
      • Upload Logo Header — Upload your logo image. This option will appear if "Use Logo on Header" is checked.
      • Site Title — Change style of the site title. We provide you with dozen of font variant from Google Webfonts.
    2. Font Settings
      • Body font — Font for body text.
      • Heading font — Font for heading text such as post title.
    3. Background Style
      • Boxed layout — Check this if you want to use pattern or image for the site background.
      • Select background type — Select background type, pattern or background-image.
      • Background Image — Upload image for site background. Only work if you choose background-image as a background type.
      • Background Color — Pick color for site background. Only work if you are not upload image for site background.
      • Pattern Preset — We provide you with beatiful pattern for your site background. Can be combined with "Background Color" option.
      • Upload Pattern — If you prefer to use your own pattern, upload your pattern here.
    4. Color Settings
      • Skin Color — Change theme's skin color. Light(Light background color with dark text) - Dark(Dark background color with light text).
      • Color Scheme — This option will change the theme's link color. Combine with skin color and you will get infinite color variations.
    5. Top Bar Style
      • Top Bar Style — Select Top bar style color. If you want topbar area have dark background, please choose Dark. The text on top bar will have lighter color, so it still readeable and vice versa.
      • Top Bar Background Color — Set Top Bar background color.
    6. Header Style
      • Header Style — Select Header style color. If you want header area have dark background, please choose Dark. The text on header will have lighter color, so it still readeable and vice versa.
      • Header Background Color — Set Header background color.
    7. Primary Style
      • Primary Menu Style — Select primary menu style color. If you want primary menu area have dark background, please choose Dark. The text on primary menu will have lighter color, so it still readeable and vice versa.
      • Header Background Color — Set Primary menu background color.
    8. Main Section Style
      • Main Section Style — Select main section style color. If you want main section area have dark background, please choose Dark. The text on main section will have lighter color, so it still readeable and vice versa.
      • Main Section Background Color — Set Main section background color.
    9. Footer Style
      • Footer Style — Select Footer style color. If you want Footer area have dark background, please choose Dark. The text on Footer will have lighter color, so it still readeable and vice versa.
      • Footer Background Color — Set Footer background color.
    10. Copyrights Style
      • Copyrights Style — Select Copyrights style color. If you want Copyrights area have dark background, please choose Dark. The text on Copyrights will have lighter color, so it still readeable and vice versa.
      • Copyrights Background Color — Set Copyrights background color.
    11. Call to Action Style
      • Call To Action Style — Select Call To Action style color. If you want Call To Action block have dark background, please choose Dark. The text on Call to Action area will have lighter color, so it still readeable and vice versa.
      • Call To Action Background Color — Set Call To Action background color.
      • Call To Action Button Background — Set Call To Action button background color.
      • Call To Action Button Text Color — Set Call To Action button text color
  5. Dynamic images
    1. Notification that is free from timthumb which is maybe will causing your server. We're not using timthumb, we use native wordpress function.
    2. WP post thumbnail — Use WordPress post thumbnail to assign a post thumbnail. Will enable the Featured Image panel in your post sidebar where you can assign a post thumbnail. We recommended to enable this setting.
    3. Dynamic Image Resizing — for post thumbnail will be dynamically resized using native WP resize functionality. Please make sure PHP on your server have version 5.2+.
    4. Hard Crop — post thumbnail will be cropped to match the target aspect ratio. Before you enable this option please make sure "Dynamic Image Resizing" above is checked.
    5. Automatic Image Thumbnail — If no thumbnail is specifified then the first uploaded image in the post is used.
    6. Default Image — Choose and upload your default image, if the post has no image.
    7. Add thumbnail to RSS feed — Add the the image uploaded via your Custom Settings panel to your RSS feed.
  6. Footer Customization
    1. Use Logo on Footer — Use image as logo on footer.
    2. Upload logo footer — Upload image for use as logo on footer.
    3. Site title — If option "Use Logo on Footer" disabled, site title will appear on footer. You can change style of that site title here.
    4. Custom Text Footer — Add custom text on footer. Usually used as copyrights text.
  7. Subscribe & Connect
    1. Contact Settings
      • Contact Form E-Mail — Contact form will send email to this address.
      • Prefix Subject E-Mail — Add prefix text on mail subject.
      • Address — This address will shown on page template contact. Used as address for google maps.
      • Address Latitude — f you need more accurate location for your address, you can input your latitude here.
      • Address Longitude — f you need more accurate location for your address, you can input your longitude here.
    2. Subscribe Settings
      • Subscribe By E-mail ID (Feedburner) — Feedburner ID for e-mail subscription.
      • Subscribe By E-mail to Mailchimp — If you have a MailChimp account you can enter the MailChimp List Subscribe URL to allow your users to subscribe to a MailChimp List.
      • Newsletter Text — This text will appear on widget Nesia - Subscribe/Connect.
      • RSS URL — Enter your preferred RSS URL. (Feedburner or other).
    3. Social Network
      • Twitter Account — Enter your Twitter username.
      • Facebook URL — Enter your Facebook URL. Such as http://www.facebook.com/nesia
      • Facebook Fanpage ID — Enter facebook fanpage ID. e.g. nesiame
      • Youtube URL — Enter your Youtube URL.
      • Flick URL — Enter your Flickr URL
  8. Ads management
    1. Ads Top - Shop Page (870x290) - big image on top of your shop page.
    2. Ads Bottom #1 (260x125) - small image ads on bottom of your blog post single page.
    3. Ads Bottom #1 (260x125) - small image ads on bottom of your blog post single page. Same as above but for second slot.

That's it. It doesn't seem huge data to send into database, because we take benefit from ajax when saving your data theme setting. After input all these form, then refresh your homepage, you're good to go. Next, we take you to see Sidebar manager. What is this? Let's continue read next section.

D2. Sidebar manager, what is this?

We build these options and commands for being useful customization via our themepanel. Useful in this case means you can create more widget area that are different from another page you have. So each of your page can be use different sidebar to display to your visitor's eyes, it's useful if you have many data to display and promote through your sidebar. Then how to use this feature and functionality into our theme? Let's take step-by-step below.

  1. Navigate through Sidebar Manager option on the left menu on your WordPress Dashboard.
  2. Choose what page to be have different widget sidebar (sidebar or footer), click section on the left. Let say, Contact page.
  3. After you choose page on the left, give it a name for your new widget area. By example, name it as contact.
  4. Choose one widget area sidebar to replace, for example choose sidebar General will replace your General sidebar.
  5. Click Add Sidebar to confirm your new sidebar area.
  6. Once you click Add sidebar are to confirm your new sidebar area, your list of widget area will show on the bottom.
  7. You can remove, canceling or save setting after you make changes for current sidebar.
  8. Click Reset Sidebar Manager will remove all widget area, see screenshot below for more detail about this steps.

Screnshot below will help you quickly to manage, create and remove sidebar area on your site.

D3. Backup settings your site options using themepanel.

If you need to backup all your post data and all setting (both from theme options and sidebar manager) that are already inside your site, you can use this feature. Export in easy way, just choose All settings then Download Export Files under Export Settings. If you want to import, just browse your downloaded file before, then click Upload File and Import. That's all. So easy, huh?

Dummy data provides you with the data and same settings like we did on the demo, it will be useful to you () demo site, staging etc). Okay, have you find the dummy data yet? Extract the package you've downloaded from Themeforest, you'll see folder named "DUMMYDATA" there are settings, and posts.

These are those files for dummy data:

  • shoppinggo-settings.json — go through theme panel > export-import.
  • shoppinggo-content.xml — this is standard, through WordPress Importer for posts.
  • widget_data.json — to import all widget just like on the demo site. This plugin widget settings importexport could be used to import the data to each widget placement/areas, except for custom sidebar.

That's all.

Well we need this theme flexible and useful for you site layout but keep 'em still minimalist and of course we've made it. These page for templates of your page are already inside, what you have to do just use it for your page. What template pages that are available to use? Let's take a look list below and how to set it up for your site.

  1. Blog — Shown list of your published posts.
  2. Contact Fullwidth — Contact form without sidebar.
  3. Contact With Sidebar
  4. Fullwidth
  5. Homepage — Homepage template, you can arrange what block will shown in this page template using our page builder.
  6. Homepage Widgetize — Homepage template with widget position.

Then how to assign each page into our page? That is easy, relax. We'll show you how to do that.

  1. Navigate to left menu, click Pages.
  2. Then click Add New to create new page.
  3. Write your Title for your page.
  4. Write down your Detail information for its page.
  5. Select Template page on the right column, what page to display.

See screenshot below to quick understanding how to create and assign page template.

Then how to use those page template (such as one of homepage template) for your homepage? That would be easy to do, see steps below.

  1. Go to your Settings page through menu on the left on your WordPress Dashboard.
  2. Navigate to Reading menu under Settings page above.
  3. Choose A static page option, it need to be choosen from default layout (blog layout)
  4. Select your front page, from previously section that you've creating page with template Homepage applied.
  5. Select your blog page, from page that have template blog applied.
  6. Control your item to display, pinterest layout for homepage and blog layout will get affected.
  7. Click Save Changes to apply all your settings before.

See screenshot below for quick understanding how to set your homepage and blog layout.

Page builder allow you to arrange flow layout on your Homepage page template. To show the page builder, just change your page template to Homepage and you can see a list of available block. Skip to How to use Page Builder to create my Homepage

Drag block to section labeled "Active Elements for Homepage (Drag element from above)" and that block will appear on Homepage page template. Options for each block will appear after you dragged that block.

Here are the list of available block for Homepage. Each block option comes with a description below it, so i will not explain it here. The options are self-explanatory.

  1. Default Slider — Slider without fancy effect, just slider from left to right, top to bottom and fade in or fade out.
  2. Camera Slider — We are using Camera Slider here. It have many effect. Choose this if you want to show your image with a fancy transition.
  3. Products — Show a list of products form your shop. 2 layouts are available, Carousel and list.
  4. Widget — Show widgets.
  5. Text — You can enter whatever text here.
  6. Ads — Display Ads.
  7. Call to Action — Display Call to Action block. You can customize call to action color scheme form admin panel.

How to use Page Builder to create my Homepage?

What do you want for your homepage, just the slider and banners? That's easy.

  1. Drag Default slider (or choose the camera slider, it's up to you. See my image above).
  2. Drag Ads. Below slider or above the slider.
  3. Content/images on slider — Go to Slides section on the left menu on your dashboard, create some post. That means you're creating new slider. Post = slider. You can customize the url on click or just non-clicking slider.
  4. Content/images on ads banners — Go to theme panel > ads management > homepage. Upload your images or just put the url if you already have images on the net.

That's all. Anything to ask? Make your support request

Let's dig into each widget, but remember We're not gonna explain all widget description and markup in here. Just general overview from each widget, so you can understand how to use it based on widget area structure of our layout.

Standard custom widget from our framework will be listed below:

  1. Nesia twitter — Let you pull your twitter stream into widget area, both sidebar and footer area. Just type number tweet to display.
  2. Nesia flickr — Show your photostrem on sidebar, you can define by group or by user photostream.
  3. Nesia adspace — Ads to display, put you image path and link then you're good to go.
  4. Nesia subscribe & connect — allow you to display more links about you and your popular social networks profile.
  5. Nesia posts — allow you to display post by Views, Popular, Recent and Category.
  6. Nesia Tabs — allow you to display Tabs which contains Popular posts, Latest Posts, Recent comments and a Tag cloud.

We're now about explain javascript files that are included to the template document. Including twitter, addthis and much more, here is the list.

  1. jQuery Cookie
  2. jQuery ImagesLoaded 2.0.1
  3. jQuery Placeholder polyfill 2.0.7
  4. Superfish 1.4.8
  5. CarouFredSel 6.1.0
  6. jPlayer 2.1.0
  7. FitVids 1.0
  8. CloudZoom 1.0.2
  9. jTweetsAnywhere 1.3.1
  10. jQuery Mobile Menu
  11. jQuery TouchSwipe
  12. Backstretch 2.0.0

All scripts are included on plugins.json js folder inside your template bundle.

I've used the following images, icons or other files as listed.

  1. http://iconsweets.com/,
  2. http://famfamfam.com/lab/icons/silk/,
  3. http://somerandomdude.com/work/iconic/,
  4. http://us.fotolia.com/,
  5. http://sxc.hu/,
2013-12-03 - v1.1
  • Add: Make tabs load when there is hash on URL
  • Add: Integrate Envato Wordpress Toolkit, so user can update the theme from WordPress directly
  • Fix: Move single product image above the content when on mobile
  • Fix: Shopping Cart table on Mobile phone
  • Fix: WPEC My Account Page
  • Fix: Add to cart variations when Image Zoom is disabled
  • Fix: Megamenu show error when Web Server using newest PHP version
  • Fix: SKU not changed when variation change
  • Fix: When default selections for variations is set and image zoom is active, the price won't show up
  • Fix: Product SubCategories List layout
  • Fix: Remove period after SKU
  • Fix: Pagination link on Search Result Page
  • Fix: Mega Menu
  • Fix: SKU not changed when variations changed on Quick View modalbox
2013-08-22 - v1.0.3
  • Add: Options to enable/disable image zoom on single product page
  • Add: Child Theme sample
  • Edit: Change parameters to adjust WP 3.5+
  • Fix: Quick view when general layout is selected
  • Fix: Template contact form fullwidth send form twice and add loading indicator when sending email
  • Fix: CSS and Javascript URL, now supports Child Theme
  • Fix: Update WooCommerce Recent Review Widget
  • Fix: Minor bugs on WooCommerce My Account page
  • Fix: Prevent FOUT(Flash Of Unstyled Text)
  • Fix: Select box on products ordering on Windows
  • Fix: contact form builder
  • Fix: Side Nav menu not clickable
  • Fix: Do not show fullwidth contact form when user using contact form shortcode on Contact Fullwidth Page Template
2013-07-05 v1.0.2
  • Add: Options to change main menu font
  • Add: Options to change some page layout such as contact, blog and single product
  • Fix: Shipping method
  • Fix: Quick view when user use default permalinks
  • Fix: Twitter widget API
  • Fix: PHP error notice on homepage builder
  • Fix: single product hooks
  • Fix: Link inside product tabs unclickable
  • Fix: Subscribe Widgets on Footer
  • Fix: quick preview
2013-05-24 v1.0.1
  • Fix: Nesia custom script loading
  • Fix: add to cart loading indicator
  • Fix: View cart and checkout inside cart dropdown button not clickable on mobile phone
  • Fix: Off-canvas menu overlapping
  • Fix: Javascript error when using bootstrap-dropdown 2.3.0
  • Fix: WooCommerce variations image not changing when user select variations contain different product image
  • Fix: Backstretch script
  • Fix: Product Gallery (when using image from Media Library)
  • Fix: Coupon form on checkout page
2013-04-20 v1.0
  • First release

Once again, thank you so much for purchasing this template. As I said at the beginning, we would be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist from Indonesia. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.