Patience. Most online shoppers have very little of it. If a web surfer can’t find what they are looking for in in a few seconds, they move on. Some of this has to do with your website layout but quite a bit can also be how long it takes for your webpage to appear before their eyes. Like waiting for the waiter at the restaurant…if it takes too long, I am getting upset and may leave or at least be frustrated.

Bottom line: Site speed is important. So much so, that Google will be much less likely to show your page higher in search results if you have a slow site. This makes sense because Google also wants its users to not be frustrated by slow loading pages.

We have have always monitored our website speed. The recent server upgrade at CoreCommerce has helped us dramatically. Our page load is faster and this is already being noticed by Google when analyzed in Webmaster Tools. I am sure many ecommerce companies use the ‘set it and forget it’ philosophy. Not upgrading hardware saves a company money but will cost them customers in the long run. I am glad CoreCommerce has invested in keeping up to date.

We have also signed on with CloudFlare. Although, we have only been using the CloudFlare service for a few weeks we are pleased with the service. The speed has been nice but the protection from the cyber bad guys has been very comforting. We can now see Spammers, Botnets and Zombies from US and other Countries trying to get to our site. They have all been BLOCKED and we are protected.

All in all, it is nice to know we are keeping up with the latest in technology and hardware.

Innovation is certainly not limited to one person or company. The greatest innovations happen when people work together, collaborating and sharing experiences and ideas. We at CoreCommerce strive to cultivate an idea culture in our company, plotting our future based on feedback from all departments and our customers. This often leads us to amazing features, products and services outside our own organization, helping us provide our customers with as many tools as needed to have an easy, fun and successful experience selling goods online. CloudFlare is an organization that we have recently discovered and have had a pleasure working with on a number of projects. With a number of tremendously beneficial features and such simple setup, it is very plain to see why so many are signing up for CloudFlare.

Improve Load Times
And it really does make your site faster too. All that security stuff and it is speeding up your site, not slowing it down. CloudFlare uses what they call a “next-generation” content delivery network, that “performs better than any legacy CDN you’ve tried before.” A recent customer reported on our CoreCommerce community that she had seen her time to byte decrease by half. This is no surprise given the cutting edge technology and the 14 CloudFlare data centers on 3 continents, from Los Angeles to London to Tokyo. This spreads your images, CSS, and other static site elements around the world, allowing the store pages to load faster and giving your store a global presence. Domestic and international shoppers will see the pages load faster and will be more likely to look at more stuff, increasing their chances to buy and decreasing the cart abandonment rate. The faster a page loads, the more likely a shopper is to make a purchase. Additionally, with the use of CloudFlare’s app called Rocket Loader and their JavaScript and CSS bundling, you don’t have to be savvy on the latest coding techniques to squeeze out a few more milliseconds of load time. CloudFlare takes care of that for you, multiplying the efforts of CoreCommerce to also speed up load times. If you add your own custom CSS to CoreCommerce, CloudFlare can automatically “minify” your CSS code for you too, with no work on your end. Quicker load times and a faster time to byte also assist with search engine optimization, as site load time is currently a factor in organic search rankings on all the big name search sites. When it comes to e-commerce, there is no such thing as “fast enough.”

Security Benefits
Malicious web traffic can cripple an e-commerce store, and if your site is down, you aren’t making money. This is where CloudFlare steps in. Oh, and it makes your site faster too, but we’ll get to that in a moment. The CloudFlare service is an additional layer between the shopper’s browser and the CoreCommerce server, filtering out malicious site visitors using technology that learns how hackers exploit web sites to keep your online store safe and running smoothly. This filtering provides protection against comment and product review spamming, denial of service attacks and other threats common to the online marketplace. And since CloudFlare is always learning, it’s dynamically protecting your site from the latest, greatest cyber attacks out there. It’s like insurance for your store, keeping it online and you making money.

Savings — in your pocket!
The last major benefit is the bandwidth savings. Since CloudFlare caches your static store content, much of the content is not retrieved from the CoreCommerce server, cutting down drastically on bandwidth usage. Shoppers get a large majority of data directly from the CloudFlare server closest (geographically) to him or her. We have observed customers on CloudFlare saving 81% of bandwidth usage. You reduce the chances of a bandwidth overage, if not eliminate the overages all together, keeping more money in your pocket.

Security, speed, and savings. You’re probably looking for the catch though, right? You’re wondering what the cost is and why we have taken the time to write up such praise for another service. Currently, CloudFlare is free, but if you want to secure the SSL side of your store or currently have a dedicated SSL, you will need to get their PRO plan for $20 per month. Not bad for security, potential conversion increases and lower bandwidth cost. CoreCommerce doesn’t charge anything to use it, either. So why are we on the CloudFlare bandwagon? It’s simple. We believe that offering our customers the best software and services possible is a great way to do business. And after the first couple stores were using CloudFlare and talking with the CloudFlare team, we realized they believe the same thing. We endorse their service because it helps us help you make the most of your CoreCommerce store. Additionally, it helps our systems run smoother, translating into faster stores for those who aren’t using CloudFlare. The more CoreCommerce customers that are using CloudFlare, the safer and faster it is for everyone on our platform. Everyone wins, and that’s no exaggeration. It takes a few moments to set up and their staff is super helpful. The CoreCommerce team is also familiar with CloudFlare and can help with the setup on our side, if any is even needed. Please, give them a try. I doubt you’ll be sorry if you do!

We’re excited about CloudFlare and ecstatic about what’s to come. Be sure to stay tuned!

Signup for CloudFlare Now

FedEx Label Printing with Web Services
Customers using FedEx Web Services can now print shipping labels. This will allow you to print shipping labels directly from FedEx to simplify and streamline your shipping.

Raw SKU Token
In the Product Detail Layouts, you can now use the token ##RAW_SKU## to display a product SKU number with no formatting.

Blog 2.0
We’ve updated our blog feature! Blogs now have tags, a tag widget, SEO friendly URLs, Publish and Save Draft abilities and a Read More feature.
Tags can now be used to link blog posts with common topics. The widget is used on the storefront to display those tags. They will be click-able, so a shopper can see a topic, click the tag and browse a list of blog posts related to that tag.
SEO friendly URLs are now used to maximize the SEO potential of your blog. This is much like the URLs already used for Products and Categories. Additionally, the use of "/blog" after your domain will route shoppers and search engines right to your blog. Example: http://www.mydomain.com/blog will be your new address for your blog.
Published and Draft statuses on your posts will allow you to work on a post and enable it later, keeping it from the public while still being able to save your work and post the article another time.
Enabling the Read More feature will place a "Read More" link below the blog’s teaser. This is useful to let your readers know that there is more to read and gives them an additional place to click to read your blog article.

Google +1
Enabling a +1 button on your products for Google+ is now easier than before. In the Google +1 settings, you will be able to enable the button, enable it for all products and select from various options such as language and size of the button. This can increase your exposure on the Google+ social network in addition to the currently available Twitter and Facebook buttons. See this article (http://corecommerce.com/kb/5533/how_do_i_add_a_google_1_button_to_my_site) in our knowledgebase for more information on setting up and using this feature.

Click-able Images for Personalizations can open in a new or same window
When using click-able images for personalizations, you can specify whether the link opens in the same window or a new window.

GetResponse
We are now integrated with GetResponse, an email mailing list service. This adds to the current options of MailChimp and ConstantContact, giving you the choice of 3 email newsletter services. You can enable and configure GetResponse in the Settings>Plug-In Settings section of you admin area. Be sure to sign up for the service at the GetResponse website: http://www.getresponse.com/

2 New Payment Gateways
Braintree Payment Gateway (Orange Platform) is a direct payment gateway, customers will never leave your site. This integration was done on the Orange Platform. New Braintree customers will not be able to benefit from this integration, however, existing Braintree customers on the Orange Platform will be able to take full advantage of this integration. http://www.braintreepayments.com/
PagSeguro is a our first Brazilian specific gateway. It is an indirect gateway, which takes shoppers away from your store to the PagSeguro site to pay. The settings can be found in the Settings > Payment Settings along with the other settings. Since it is specific to Brazil, use in any other country is not recommended. https://pagseguro.uol.com.br/

Google Feed secure/non-secure image toggle
The URL used for the image in the Google Product Feed export can now be secure (HTTPS) or not secure (HTTP) with the selection of a check box to toggle between the 2 settings. This setting is right beside the export button on the Product Feeds page.

Disable Customer Email Receipt
In the Settings > Store Settings > Notifications, you can now choose whether to send or not to send a customer email receipt to the customer when they have made a purchase. The email receipt is enabled by default, so customers will get the receipt email as they have been doing. This is used if you prefer to let your payment gateway send the email rather than CoreCommerce.

Hide Pricing on View Cart
The pricing, calculate shipping, calculate tax and coupon fields can all be hidden with the selection of this feature. It can be found in the View Cart section of the Checkout Settings.

Edit Customer Group Restriction directly from the Category
Changing the Customer Groups that are allowed or not allowed to see a particular category can be done directly in the category. You no longer have to go to the Customer Groups page and edit the Groups to change which categories that the group can view. You may now edit the category and choose who may view the group.

New Design Integration Interface
A new interface has been implemented for the Design Integration section. It offers a simpler layout than the previous interface, with all the features except the Design your Own Logo. Due to lack of use, this feature was thought by clients to be the same as the Text Logo feature and was more of a confusion than a tool, so it was removed. There is also a design integration wizard to assist in setting up a new theme. If you hover over the Design tab or click on it in the admin area, you will see there are new options and a new layout.

Abandoned Carts Search
In the Abandoned Carts section, you can now search by first name, last name, a combination of first and last name or the IP address. Keep in mind that if a shopper doesn’t register, then their first or last name will not be saved with the cart and, therefore, not searchable.

We still offer 24×7 monitoring of paid accounts through the emergency ticketing system and will be staffed for phone and chat support 24 hours per day Monday through Friday, 8am to 5pm on Saturdays, and closed on Sundays. This allows for better support coverage during the very busy mid-day regular business hours.

Summary:
12/24 Christmas Eve: Close @ 4p
12/25 Christmas Day: Closed all day
12/31 New Years Eve: Close @ 11p
1/1 New Years Day: Closed all day

What is an image sprite?

An image sprite is a collection of images that have been combined into a single image. Image sprites are most commonly used for images that are seen throughout a site and are generally not used for page specific images due to the amount of work it takes to create an image sprite. An example of where image sprites could be used would be for images that appear in a sites navigation or for icons that are used repeatedly on multiple pages, such as social networking icons in a sites header or footer.

Why use image sprites?

Every time an image is loaded on a web page a server request is generated and bandwidth is used. For sites that contain multiple images in repeated areas this can slow down load times, especially for users on slower connection speeds. In order to lower the number of server requests and to minimize the amount of bandwidth used on images, image sprites may be used.

Where can I see Image Sprites in use?

To see image sprites in action, visit www.bradlilley.com, where sprites have been used for all of the header and footer navigational links. In this example, there appear to be a total of 23 images or icons, 46 if you count the hover state of each link, but in reality only two images are being used; One for the header links and one for the footer links.

The header is built using only one image sprite but appears to contain a total of 4 images. (8 if you count the hover state of each image.) To see what this sprite looks like without any CSS formatting click Here .

The footer is built using only one image sprite but appears to contain a total of 19 images. (38 if you count the hover state of each image.) To see what this sprite looks like without any CSS formatting click Here .

How do I create a sprite?

Image sprites can be made using any number of image-editing programs such as Photoshop, Illustrator or Fireworks. These three are probably the best programs for sprite creation, but there are cheaper or even some free solutions available on the web.

To implement the sprites you will also need a text editing program such as Textmate or Sublime text. You have the option of using a WYSIWYG (What you see is what you get.) editor such as Dreamweaver, but it is recommended that you use a plain text editor as it will give you more control over your code and prevent frustration later on.

The following steps will walk you through the basics of creating an image sprite. There are hundreds of additional tutorials on the web that can be found by doing a simple search for “css image sprites”. In addition, we have also listed several useful resources at the end of this post to help you get started.

Step 1: Asset creation and organization.

The first step in creating image sprites is to gather and combine any pre-existing images into one file. If there are no pre-existing images for you to use you will need to create the images that will be used in your sprite. It is recommended that you use vector images if at all possible as this will allow for easier scaling of the images and will prevent image quality degeneration if the image needs to be re-sized multiple times. Using vector images will also make it easier to change or update your images in the future.

Once all of the assets have been created and gathered into one file, you will then need to lay-out the images in an organized manner, paying close attention to your alignment, padding and margins. This is especially true when working with sprites that will contain a hover state, in which case being off by even 1 pixel can affect the way your sprite behaves. You can adjust the alignment of the sprites with code once they have been implemented, but getting the alignment right in the beginning will save you time and frustration later.

Step 2: Image optimization.

After all of the images for your sprite have been created and are properly aligned you will need to optimize the images for the web and save the images in the appropriate file format. The format that you choose will be based on a number of factors such as transparencies and image quality. If you are using a Photoshop it is recommended that you use the “Save for Web & Devices..” feature and choose the format that offers the best quality with the lowest file size. In the example listed above the sprites are all in .png format because the images needed to have a transparency but required more detail than a basic .gif could offer. Choosing the right format at this phase is crucial because it would defeat the purpose of using sprites if our final image ended up being so large that it used more bandwidth to load than all of the separate yet smaller images combined. We will not cover it here, but it is worth mentioning that you may also elect to use Interlaced and/or Progressive images with sprites if needed.

How do I implement a sprite?

After you have created and optimized your sprites for use on the web, you will need to implement them using HTML and CSS. There are several techniques that can be used including the Phark or Fahrner Image Replacement techniques when working with image sprites. The basis of these techniques is to position your sprites while maintaining semantic, standards-compliant code that can still be access by search engine crawlers and individuals with disabilities. This is especially true when using sprites for any navigational elements within your site and it is never a good idea to use purely image based links, as this will prevent search engines from crawling your site and will make your site inaccessible to individuals using assisted devices such as screen readers.

To demonstrate how sprites work we will again use www.bradlilley.com’s main navigation. The HTML and CSS code below is what controls the links and their hover states.

The main navigation for www.bradlilley.com is built using a simple unordered list where each list-item has the sprite image set as its background and gets its own unique id. These id’s are what we will use to position the the sprite with css.

Each list-item, with its unique id, has an normal and hover state where the “background-position” is set according to the position of the image contained within the sprite being used. In this example each menu-link is exactly 40 pixels tall and each instance of the image sprite decreases by 45 pixel per link to offset the images contained within the sprite. The reason the offset is 45 and not 40 is because there is a 5 pixel padding between each image in the sprite itself. You will also notice that there is a 90 pixel offset between each menu-links “normal” state. This is because each image contained within the image sprite has a combined total height of 45 pixels, and the normal state repeats every other image, thus 45 + 45 = 90. This is how this particular site utilizes sprites, and is by no means the only method available. Sprites can be laid out as you see fit and are not restricted to this exact method.

Conclusion

While image sprites may take a little bit more work up front, they are definitely a viable and streamlined option for anyone looking to lower the amount of bandwidth used loading images on any their site. Using image sprites also helps clean up a sites image folder by combining multiple images into one larger image that can be updated with minimal effort.

Additional Resources

The following is a list of additional resources that you may find useful while creating your own image sprites.

W3C Schools – CSS Image Sprites
A List Apart – Image Slicing’s Kiss of Death
CSS-Tricks – CSS Sprites: What They Are, Why They’re Cool, and How To use Them

We have always been nothing but impressed with the functionality of the CoreCommerce cart, and this case was no different. We’ve had a couple people tackle the input of product attributes, so I figured it would make sense to put together a quick tutorial, and was surprised just how quickly I was able to do it and how easily everyone was able to get to work. What follows is the guide we put together:

How to add required Google Shopping feed data

Once logged in, navigate to Products>Inventory and select a product to edit:

Once at the product page, navigate to Advanced tab in the top gray navigation bar and then to the Google Products tab in the left navigation as seen below

Once in the Google Products interface, the minimally required fields to fill out are Condition, Availability, Category, Color, Size, Gender and Age Group. ISBN does not relate to us nor does expiration date, so those can be completely ignored. Our description currently pulls from the on page description, but can be formatted better by using the description field here.

When selecting product category, it is a hierarchical structure. The first category is Apparel & Accessories, once that is selected another category drop down becomes available where the next subcategory can be selected. Continue until you reach the closest match for that item.

Once you have the appropriate category, click the Setup Apparel Variant Attributes button. You will be offered your color options. Select the appropriate options.

Once color is selected, click the size drop down to select the appropriate sizing options, and then once again click Setup Apparel Variant Attributes button. You will be offered different sizing selections, choose the appropriate ones. Once complete, click Done (in the upper right hand corner of the pop up).

With your sizes selected click Done (in the upper right hand corner of the pop up) and then save your changes.

Secure/Non Secure Auto Image Toggle

We updated how some of our widgets work in the system so that if the URL you are on is a secure (https) URL, for example the one page checkout, it will pull the images it uses for the widget via HTTPS.

Conversely, if the URL you are on is NOT a secure page, i.e. the product detail page, then it will pull those same image via HTTP.

ECHO (now known as an Intuit product) Payment Gateway Integration

We now integrate with the ECHO gateway (now known as Intuit) for accepting credit cards. This is a direct payment gateway, so your customers will NOT leave the site when entering their payment info, IF you choose to use ECHO as your payment gateway.

Minimum Quantity Updates

For our minimum order quantity feature, which allows you to control at the product level if a product requires a minimum to add it to your cart, you can now control the system so that it will count a product with a specific set of options as one product minimum, or if you want the system to add all similar items, regardless of the option choices, together to check for minimum order quantity for an item.

For example, the old way (which you can still use), was setup so if you have Product “Shirt” and it comes with a color choice and a size choice, and you set the minimum order quantity for that product to 3, then let’s say for example, you try to add 1 of “Shirt” with color “Red” and size “Small”, it would require you add at least 3 “Small Red Shirts” to the cart, since the minimum quantity is “3″.

But what if you only want 1 “Small Red Shirt” and 2 “Blue Medium Shirts”. The only way would force you to have to buy 3 of each style, the new setting will allow you to add any combinations you want to the cart, for example:

• 1 “Small Red”
• 1 “Medium Blue”
• 1 “Large Green”

Then, it will wait until you checkout to check and see if you have 3 “shirts (regardless of size/color) in your cart, vs. it having to be 3 “red/small” shirts AND 3
“blue/medium” shirts.

So it becomes a more true product based minimum quantity feature with this new setting.

Add the lack of person-to-person communication and fears about unsecured processing of funds leads to other doubts for perspective customers and the result presents a challenge. Software features like the shopping cart can either enhance or hinder these concerns.

Build Trust

It’s a matter of building trust through professionalism. When a shopper finally gets brave enough to try an online transaction, the software and the shopping cart feature must be flawless. Clearly explain the buying process, the steps involved and the amount of time needed to complete a transaction on the first page and reinforce these factors throughout the checkout process.

In addition, websites giving phone numbers or electronic addresses for the purpose of answering questions or concerns need to make sure responses are provided in a timely manner, and so stated before the user request communication. If you list contact information only for a potential client to find a dead end, the clatter of clicking sounds to escape your site will vastly drown out the wanted “cha-chings” from money entering your bank account.

Mobile Friendly

Prior to arriving at the shopping cart, the entire experience should be mobile optimized. If apps and user friendly mobile sites are available for tablets and smart phones, those apps need to provide a smooth and sophisticated transition. Maybe even specific services for popular devices like iPhones and iPads should be a consideration. Expect shopping carts to be abandoned if too many options make the process complicated or slow through extra wait time to load intensive graphics and excessive finger zooming in and out. Consider a quick check out option or some type of mobile express lane for shoppers purchasing one or two items. Mobile shoppers will typically less time on your site and buy less.

Live Tracking

There is no substitute for clear and effective communication. Keep the customer informed of the process throughout. Changing a selection or back tracking to find a product should not be complicated.

Surprises are great for birthdays but not so good for customers trying to make a purchase. Give important information upfront to prevent unpleasant surprises at checkout. For example, keep inventory up to date. If a product is not available, the customer should get that message immediately when the item is checked. Live order processing after purchase ensures a confident shopper, who is much willing to refer you new business.

No surprises should show up in the shopping cart at all. Any extra charges or special conditions need to appear on the home page or cart in plain sight. More customers are likely to follow through with a transaction if the shopping cart includes an accurate list of selected items and prices listed. If your layout allows for it, a perpetual shopping cart which shows all items in your cart throughout the shopping experience can help reduce shopping cart abandonment when the checkout begins.

Even extra fees for shipping or taxes should be listed on the home page. There should be no surprises during the shopping cart phase when the shopper checks out. Surprises equal more abandoned carts. Many other factors are important to e-commerce but exhibiting mobile friendliness while maintaining a professional but friendly website with live tracking will give any business a solid start.

“I just wanted to let you know that we are now live and all traffic redirected to corecommerce. I also would like to let everyone that has helped me along the way know that I really appreciate your time and extreme willingness to help me through this transition. Every tech company should strive to have the outstanding level of service that Corecommerce provides! What a painless walk through a difficult transition! Thanks for being there with me!”

Brian Krenzin – petandkennelsupply.com

“Our average sale went up over 20% just putting our new CC site up.”

Julie Feickert – culturesforhealth.com