Ecwid Tutorial – Local Delivery

Local Delivery

Step 1 – Define local delivery zones

Ecwid as a very developed system for defining zones. Zones can be defined by Region, Country, State or Zip Code. In your Ecwid dashboard, just navigate to “System Settings” –> “Zones”. In my store, I had a very well defined set of zip codes to which we deliver. In fact, we actually broke it down even further to 3 sub zones, depending on the distance to the store.

Here’s a screenshot of what my Zones look like in Ecwid:

Ecwid-ZonesAs you can see, I’ve broken down the zones by store and sub-zones. The number represents the store and the letter represents the sub-zone. So, for example, Zone 1A presents “store 1, sub-zone A”. You can name these zones anything you want. The customer will not see your zone names, so you can be as descriptive as you like.

To create your new zones, just click the “New Zone” button. Name it to whatever you like and decide how you’d like to define these zones. Region? Country? State? Or Zip/Postal Code? Just remember that that options are “inclusive” rather than “exclusive”. Or in other words, it’s “both/and” rather than narrowing down to a specific location. For example, if you select United States as your country, all of the US will be included no matter what specific State or zip you might also include. So, for our case, because we only wanted local delivery to specific zip codes, I only entered in the zip codes and left the Countries and States empty.

Here’s an example of why you might need to use multiple options: Let’s say your brick and mortar store delivers to all of Connecticut, but only few specific areas in New York. In this case you would select Connecticut as the State and then list out the specific zips you also deliver to in New York.

Step 2 – Set up your shipping method

Once you have your shipping zones set up, the next step is to set up your Shipping Method. The “Shipping” tab is located right next to the “Zones” tab.

Go ahead and click the “New Shipping Method”. You are presented a popup window to help you customize this shipping method.

Ecwid-NewShippingMethod

1. “Select shipping region.” Use the drop down to select the Zone that you just created in step 1.

2. “Select how you calculate shipping?” Select “Flat rate”. Then click the blue button that says, “Shipping rate and delivery speed”.

3. “Set a shipping rate.” On this screen, select how much you’d like to charge for delivering to this zone. As mentioned above, I have 3 sub-zones setup for each brick and mortar location. So I created a new shipping method for each of the sub-zones that I have created. Here’s how are sub-zones are broken down:

  • Sub-zone A (close-range): $10
  • Sub-zone B (medium-range): $15
  • Sub-zone C (far-range): $20

4. “Set delivery speed.” Set the approximate amount of time it will take to deliver this product. Only a number or a range (e.g. “1-2″) is allowed here. It is possible to leave this field blank if you prefer. Click the blue “Name shipping method”.

5. “Name shipping method.” Remember, this name is for the customer. It will be shown on checkout. Here’s how I’ve named mine:

  • Local Delivery – Zone 1A
  • Local Delivery – Zone 1B
  • Local Delivery – Zone 1C
  • Local Delivery – Zone 2A, etc…

Repeat this for each of the zones you’ve created.

That’s it! You’ve just created local zones! Now, when customers enter in a zip code, they will only see the shipping option(s) for that particular shipping zone.

Here’s a screenshot of my store with different zip codes corresponding to the correct price.

Ecwid-Method Example

Have questions, ask below!

Heroes of Change

We’ve recently gone through some changes in our church. Changes that I’m quite excited about. Changes that I think are necessary to the sustainability of the church. And changes that better orient the willing workers with the needs of the people.

Change is always always hard. Few people like iOS 7. Petitions about Facebook changing its interface are rampant (ironically on Facebook itself). Restructuring at work is hard. And on and on.

Change in church is no different. In fact, it’s almost sacrilegious to change something about church. Dropping a ministry or a service, to some, is akin to giving in to the liberal theology/philosophy of the day. There’s a reason the sarcastic phrase, “We ain’t never done it that way before!” hits home for so many in the church – because there are always those who will resist change out of the simple fact that that’s the way we’ve always done it.

To be sure, an evaluation needs to be made as to whether the old system is indeed working. But what happens when it isn’t working well? What happens when the congregation no longer connects with a certain ministry? Should we redouble our efforts and pulpit-bully them into participation? Should we secretly judge them for lack of involvement? Should we throw up our hands and say the Pastor isn’t giving enough time, energy, and passion?

I struggle with this. I remember as a kid in the backseat of the family car on the way to Sunday evening church looking out the window of the car and seeing people going about their lives – even Christians! – and wondering why they were so callous to God that they would not go to church on a Sunday evening like I did. I’d probably even heard that kind of talk from the pulpit when the pastor was frustrated only 1/4 of the people showed up for the service. Maybe not so bluntly, but it was there.

I don’t mean to imply that people aren’t callous to God. They are. You are. I am. We all want our own thing. We don’t want to dedicate our time to Him. We’d rather do our own thing, watch TV, play a game. But that’s not the point. The point is the attitude. In the backseat of the car, looking out the window, I didn’t have an attitude of concern for the people I saw. I had an attitude of judgement. I thought I was better than them. I still struggle. I compare my involvement in the church to those of others and think I’m better than most. Make no mistake about it, this attitude is wrong. This attitude is not the gospel. And this attitude is telling God that I’m somehow worthy of His merit. And here’s the problem, I’m not. I’m not worthy of any merit. It is by his grace that I can somehow do a good thing here or there. Certainly it makes God smile when I do submit to Him, but it does not gain me a better standing before God. I am a sinner plain and clear. And for that, I the merit I receive should be death, but for Jesus’ sacrifice and reparation for my wrongs.

For many I think people are equating the ministries they grew up with as next to godliness. They become the kid in the back seat looking out the window judging people for not following God the right way. They see the changes in ministry as an affront to the cause of Christ and judge people for not continuing on with the old ministries.

But what I’ve been most impressed with lately is the number of people in our church who are going along with the change. It may not be the most comfortable thing to do, but so many people in our church see the need for the change and are just looking to support these new ministries in whatever way they can.

Creating a Web App

Most recently I’ve been quite busy with starting a new venture. I’m excited to be working with my brothers on this particular project.

The name of the project is PaperTrade Me. The basic idea behind the project is a platform to allow for commodity traders a place to practice trading on the real market. One of the fears of going into the commodities market is the fear of uncontrollable loss of money invested. While it is true that loss is a possibility and even an expectation when trading on the commodities market, one can learn how to control the losses and eventually have more wins than losses. That is where PaperTrade Me comes in. On this platform commodity traders – novice or experienced – can come together and log their practice trades and see just how well they could do.

At this point we’re working with a designer and are starting communication with a developer.

Updates to come later.

I’m a Featured Customer for the Ecwid Shopping Cart

I was recently featured in a newsletter as a Customer Spotlight for the ever growing Ecwid eCommerce software. Ecwid, which is combination of “ecommerce” and “widget” allows you to add an online store to basically any site out there.

Having inherited a very outdated and ugly looking ecommerce software that did not integrate at all the branding of our website, I took the lead in finding a solution that would allow us to firstly vastly improve upon the aesthetic, but also scale the online business. Indeed, that’s exactly what moving to Ecwid has allowed us to do. The move and a focused effort on growing the store has increased revenue approximately 250% over the last 2 years! And this year we’re already performing another 50% percent better on average during the same period as last year.

People from Ecwid reached out to me to discuss some of the benefits I saw in the service. The attached screenshot is from the March Newsletter highlighting the ease of use.

I love Ecwid and you will, too! Click here to Sign up for free today!

Ecwid Billing Check Button Default to Off for WordPress Tutorial

How can I change to default behavior of the “My billing address is the same as shipping” check box to off?

I’ve been using Ecwid as a my shopping cart for several websites and clients. It’s such a great shipping cart that’s fully integrated with basically the whole internet. I love the flexibility of it. There are a few issues that I’ve had a problem with, however. They haven’t been major problems, but annoying just the same. One of those problems has been that the billing box is checked automatically by default.

For people who might want to sell gift items for delivery, it is important to accurately collect both the shipping and billing information. The problem is that the “My billing address is the same as shipping” checkbox is checked automatically and the vast majority of people checking out, for whatever reason, do not uncheck the box to allow for a different billing address. Perhaps they’re just not seeing it, or perhaps it’s just a bad design/workflow. Needless to say, when a user fails to uncheck this box, it can cause extra time confirming with the buyer the correct information rather than just fulfilling the order. So, what I needed to do was make it so that the shipping information was not automatically passed through to the billing address unless the user checked the box. I needed the billing information to be blank, as illustrated below.

Ecwid Default Off
Ecwid Billing Button Default Off

 

Ecwid Default On
Checking the box will auto fill the content from the shipping address.

 

So, here’s the raw code for how to turn this button off by default. You’re going to want to put this code just after the Ecwid implementation code on your site. (If you have jQuery already enqueued on your site, you won’t need the 1st line.)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script>if (typeof(Ecwid) == 'object') {
  Ecwid.OnPageLoaded.add(function(page) {
    if ('CHECKOUT_PAYMENT_DETAILS' == page.type) {
$('input[type=checkbox]').prop('checked', false);
$("input[type=text]").prop('disabled', false);
$("input[type=tel]").prop('disabled', false);
$("select[name='country-list']").prop("disabled", false);
$("select[name='state-list']").prop("disabled", false);
$("select[name='state-suggest']").prop("disabled", false);
$('input[type=text]').val('');
$('input[type=tel]').val('');
$("select[name='country-list']").val('');
$("select[name='state-list']").val('');
$("select[name='state-suggest']").val('');
        }
  });
}
</script>

Unfortunately, this code will not work for you if you’re using WordPress. So I’ve packed up a file with a full explanation of how to implement this code on your WordPress site. Just click the “Download the Code!” button and you’ll receive an instant download. Please consider paying for the product if you think it will help your store. Many thanks and much appreciated!

Included in this file:

  • WordPress friendly code
  • Full explanation of where to implement this code
  • Screenshots of the code implementation
  • *Bonus: My explanation on how to clean up Ecwid code impentations

Download the Code!

Sound of Life Sliders

Using eye-catching and informative graphics with excellent content is key to any good web page design – especially for a nonprofit relying on donations.

This was exactly the goal of my latest project that I had the privilege of being a part of. The project was initiated by the Sound of Life to aid their Fall “Life-a-thon”. During these 3 days, listeners to the radio station and viewers of the website were encouraged to become monthly supporters or give a one-time gift.

Graphic Designer, Jeralyn Tiernan, created an excellent design concept for me to work with.

My goal in the project was to convert her design into a functioning webpage that could be updated as the donations came in. The sliders needed to “slide” automatically and the dollar amounts and percentages needed to also be constantly updated.

[expand title=”Click here to see the more technical elements (HTML, CSS, PHP and WordPress integration.)”]

Below is the HTML and PHP. I put this in a separate php file and included it on the page that I wanted it to show on.

      <div class="lifeathon-container">
        <div class="lifeathon-header">
        </div>

          <div class="lifeathon-contact-bar">
            <ul>
              <li class="left">To Give By Phone 800-724-8518</li>

              <li class="right">2013 Fall <strong>LIFE</strong>A<strong>THON</strong></li>
            </ul>
            <div class="clear"></div>
          </div>

        <div class="lifeathon-content-container">
          <div class="lifeathon-content">
            <div class="clickorcall"><a href="https://interland3.donorperfect.net/weblink/weblink.aspx?name=soundoflife&id=1"><img  src="lifeathon-clicktogive.png"></a></div>
            


            <ul class="lifeathon-thermometers">
              <li class="text">
                <div class="words">
                  New Partners for Life — <font color="#b51c21"></font>
                </div>
              </li>

              <li class="thermometer">
                <div class="mercury" style="width:%"></div>
              </li>
              <li class="sofar">so far: $ (%)</li>
            </ul>

            <div class="lifeathon-our-goal">
            	<strong>Our Goal:</strong><br>
				100 NEW PFL's<br>at 30+ a month. <div class="goal-amount">$</div>
            </div><br>
            

            <div class="clear"></div>

			<div class="clickorcall"><img src="lifeathon-orcall.png"></div>

            <ul class="lifeathon-thermometers">
              <li class="text">
                <div class="words">
                  Single Gifts Needed
                </div>
              </li>

              <li class="thermometer">
                <div class="mercury" style="width:%"></div>
              </li>
              <li class="sofar">so far: $ (%)</li>
            </ul>

            <div class="lifeathon-our-goal">
              <strong>Our Goal:</strong><br>
              <div class="goal-amount">$</div>
            </div>
            <div class="clear"></div>
          </div>

          <div class="lifeathon-grand-total">
            Grand Total Received/Pledged: $
          </div>

          <div class="lifeathon-footer">
            <img class="needamiracle" src="lifeathon-needamiracle.png">
            <p class="footertext">A BIG thank you to all of our partners. Our mission is “to connect people with the positive message of Jesus Christ”. You’re helping to bring <strong><em>Real Life</em></strong> and <strong><em>Real Change</em></strong> by giving to the Sound of Life! <strong><em>We can’t do it without you!</em></strong></p>
			<img class="realliferealchange" src="lifeathon-realliferealchange.png">
          </div>
        </div>
      </div>
  <div class="clear"></div>

And here is the CSS for the design.

/* Fundraising Thermometer */
/* http://www.suenovotny.com/blog/2011/03/dynamic-thermometer-with-css-and-php.php for source code */

.thermometer {
	background-color: #fff;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	height: 34px;
  }
.mercury {
	position: relative;
	background-color: #075295; 
	height:100%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 10px; 
    max-width: 100%; 
  }


/* End Fundraising Thermometer */

/* Lifeathon Landing Page */

span.collapseomatic {
	font-size: 1.5em;
	color: black;
	position: relative;
	top: 2px;
	font-family: "Rokkitt";
	}

.lifeathon-container {
	padding-right: 15px;
	}

.lifeathon-header {
	padding-right: 0px;
	background: url("lifeathon-header.jpg") no-repeat;
	height: 175px;
	display: block;
	overflow: hidden;
	}

.lifeathon-contact-bar {
	background-color: #035295;
	color: #fff;
	text-transform: uppercase;
	padding: 5px 14px 4px 14px;
	height: 25px;
	font-size: 1.2em;
	font-weight: 100;
	letter-spacing: 0.3em;
	}

.lifeathon-contact-bar ul {
	list-style: none;
	margin-top: 2px;
	}

.lifeathon-contact-bar li {
	margin-left: 0px;
	}

.lifeathon-contact-bar li.left {
	float: left;
	}

.lifeathon-contact-bar li.right {
	float: right;
	}


.lifeathon-content-container {
	min-height: 450px;
	background: #ddeeff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ddeeff 0%, #8da8bf 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddeeff), color-stop(100%,#8da8bf)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ddeeff 0%,#8da8bf 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ddeeff 0%,#8da8bf 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ddeeff 0%,#8da8bf 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ddeeff 0%,#8da8bf 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddeeff', endColorstr='#8da8bf',GradientType=0 ); /* IE6-9 */
	}


.lifeathon-content {
	padding: 10px;
	}

.clickorcall {
	float: left;
	padding: 20px 0px 20px 30px;
	width: 175px;
	}

ul.lifeathon-thermometers {
	list-style: none;
	float: left;
	margin-right: 30px;
	margin-top: 36px;
	}

ul.lifeathon-thermometers li {
	width: 450px;
	}

ul.lifeathon-thermometers li.text {
	background-color: #fff;
	margin-bottom: 5px;
	font-size: 1.5em;
	font-weight: 700;
	padding: 5px 0 5px 0;
	}

ul.lifeathon-thermometers li.text .words {
	padding: 2px 0px 0px 8px;
	color: black;
	}

ul.lifeathon-thermometers li.sofar {
	text-align: right;
	color: #b51c21;
	font-size: 1.2em;
	font-weight: 700;
	}

.lifeathon-our-goal {
	color: #b51c21;
	font-size: 1.2em;
	padding: 30px 20px 0 0;
	}

.lifeathon-our-goal .goal-amount {
	color: #0e3a5d;
	font-size: 1.3em;
	font-weight: 700;
	}

.lifeathon-grand-total {
	background-color: #b51c21;
	color: #fff;
	text-align: center;
	font-style: italic;
	font-size: 1.5em;
	font-weight: 100;
	padding: 15px 0px 15px 0px;
	margin: 0 0 10px 0;
	}

.lifeathon-footer {
	height: 100px;
	}

.lifeathon-footer img.needamiracle {
	padding: 5px 0 0 20px;
	float: left;
	width: 160px;
	}

.lifeathon-footer p.footertext {
	float: left;
	width: 505px;
	padding: 5px 20px 0 20px;
	text-align: justify;
	font-size: 1.2em;
	color: #0e3a5d;
	}

.lifeathon-footer img.realliferealchange {
	padding: 17px 0 0 0;
	width: 165px;
	}	

/* End Lifeathon Landing Page */

Something that I did not show here is the integration with the WordPress backend. I was able to integrate it so that an administrator can login to the WordPress backend and update the slider numbers. Below is the actual PHP showing the defined parameters according to my edits to the theme options page.


And here’s a screenshot of the theme options page with my additions. I simply added a tab to the existing Inkthemes Theme Options page.

Lifeathon Theme Options

[/expand]

Sound of Life Sliders

Mulch Calculator using jQuery

Mulch CalculatorI’ve been toying around with learning jQuery, lately. I went out and bought a book and started going through the exercises. jQuery is really a sub library of JavaScript and it’s a really popular way to add cool enhancements to a website.

According to Wikipedia:

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 31% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
http://en.wikipedia.org/wiki/JQuery

As with any language on the web (and spoken languages, too), you can do some cool stuff even without being completely fluent in it. Thought I haven’t been using jQuery very long, I’ve already completed two projects with it.

My latest project was to build a mulch calculator that would help the user to know how many yards of mulch they will need to fill a certain spot. The user needs to know 3 things:

  1. Length in Feet
  2. Width in Feet
  3. Thickness in Inches

Here’s the formula for calculating what you need:
(Length * Width * (Thickness / 12)) / 27

You’ll notice that there is a semi-complex order of operations going on here

  • First we have to convert the inches to be on the same playing field as the feet by dividing by 12.
  • Then we have multiply length, width and our converted thickness together.
  • And lastly, all of that is divided by 27.

After much trial error, here is the JSFiddle.

The actual calculator can be found here: www.adamslandscapingandsupply.com/calculators

The (not golden) Bridge

Last night I went to the Mid-Hudson Bridge to get some shots for work. We’re doing a fundraiser for an organization called Solving Kids’ Cancer.

Anna is interested in what I do at my job. Every now and then when JK brings the family to the store to shop, they’ll come up and say hi. I showed Anna my computer and tried to explain what I do. I even had her edit some pictures that I was working on. But all in all, it’s pretty boring for a 7 year old. Last night was fun because we got to go out on location.

(Picture by Anna)

The goal for this project was to take some pictures of the gold lights of the Mid-Hudson bridge so that I could post them as part of the fundraiser project. The bridge was supposed to be all gold as a tribute to pediatric cancer victims and survivors. Unfortunately, there was a mix up and the bridge wasn’t all gold.

But Anna and I had fun together throwing rocks in the water and watching the water for jumping fish.

This picture is of Anna being “surprised” by a jumping fish:
A Jumping Fish

As usual, Anna asked alot questions. Here are just a few:

  • What if our car was full of water but you could breathe in it?
  • What should we get mommy for her birthday?
  • What if everyone walked with a cane?
  • What if everything was cherry flavored?

And my favorite dialog:

Anna: (In rapid succession) I want to ride in a boat. Can we get a boat? Not just a regular small boat. I mean a boat with two levels so we can be on top and bottom. We could come down here and ride in the boat with the family.
Me: I think you’re talking about a yacht.
Anna: Yeah, can we get a yacht?
Me: That would be awesome. But they’re really expensive. Like more than house!
Anna: How much?
Me: (After looking it up on my phone) Like $2 million.
Anna: You and mommy have $2 million.
Me: No, we don’t.
Anna: Yes, you do. Each of you has $1 million in your bank accounts.
Me: No, we don’t.
Anna: Yes, you do.
Me: No. Seriously. We don’t.
Anna: (Saddened by reality) Oh.

Need some help

As I mentioned in my previous post, I’ve started a business. Jalopyhead Enterprises was born on June 11, 2013! Yay! I’m quite excited about it and excited about what’s to come!

To make a long story short, Jalopyhead Enterprises will function as the parent company of a couple or more companies. Therefore, though official paperwork will go through the parent company, the name(s) actually before the public will be different.

My first venture will be in Web Consulting. And here’s where I need your help. What name should I operate under?

Let me give a few details. Here’s what I hope to do:

  • Build Websites
  • Consult / Setup
  • Social Media
  • Online Advertising
  • Online Branding

Here are some other considerations:

  • I want to use “jalopyhead.com”. It’s my brand. Not negotiable.
  • “Jalopyhead” doesn’t mean anything.
  • I need a tagline that is descriptive.

With all of that, here are some possibilities. Let me know if you like any of them:

  • jalopyhead.com – “Make your presence known”
  • jalopyhead.com – “Be Seen Online”
  • jalopyhead.com – “Online Branding Solutions”
  • jalopyhead.com – “Improving your Online Visibility”
  • jalopyhead.com – “Let the World See You”
  • jalopyhead.com – “Web Design, Social Media & Online Marketing”

Thanks in advance. Looking forward to hearing from you.

Oh, and if you’re interested in any my services, be sure to give me a holler.

Starting a Business

Not long after arriving back to the States about 2 years ago (Wow, that was quick), I quickly got a freelance job from my first official client. (Read about it here.) It was great. I was excited to be going into business for myself. Since then, I’ve had several more clients. They’ve been relatively small sites, done for friends and family, but they’ve definitely helped me hone in my my skills.

But my dream for a long time has been to start my own business. It hasn’t necessarily been in web consulting, but I’ve wanted to start my own business. It’s such a huge undertaking. Even as I write these words, I’m overwhelmed with feelings doubt and excitement and fear and happiness all within milliseconds of each other.

So, after my most recent adventure applying for job fell through, I decided that I was just gonna go for it. I went down to the County Clerk’s office and registered my business name. It’s official, Jalopyhead Enterprises no longer exists in my head. It’s now a reality.

I’ve got some things in the works to help me launch it, including some airtime on a local radio station as well as getting a new logo and website that are already in the works.

Exciting times!