This is part 2 opencart case video shows you the process of building an online store using a template.
Extensions can be purchased at http://www.thinkplugins.com
Hey guys, this is Lawrence from buildmyecommerce.com. Sorry it took so long to release this video, but I was away and it does take a lot of time to make these videos. This is Part 2 of 3 case study video for my client jagmte.com. In this video I will focus on building the store. I changed the mock-up slightly and this is what it looks like now. And here is the original webstore that we need to change. You will be quite surprised to find that the building the store takes almost no time because we are using the theme. It’s the preparation that will take majority of your time.
Before we get started, you must have the journal theme for open cart, vqmod and couple of optional extensions installed. Also, import demo store #2 for the journal theme. If you don’t know how to do these, you can just watch my other short videos and the links are posted below for your convenience.
Here is the table of contents for this video.
1. Remove unnecessary modules
2. Revolution Slider, Banner, Product images and Logo
3. Export & Import products (CSV Product Export & Import)
4. Build the store (also show responsive design of the site, mobile.me)
I put time codes, so you guys can just jump to the sections you are interested in watching.
1. Remove unnecessary modules
So, this is what the store looks like after I have installed the journal theme over the current default layout & imported the demo store #2. We don’t need to use all the modules from the demo store #2, so I have already deactivated few modules. Since I’m using demo store #2, you can click the documentation from the Journal dashboard, click Start>Demos>Demo #2 to view all the modules used. The modules I ended up using for the final webstore are the revolution slider, headline rotator, custom sections, banners, and newsletter. Other modules that were not used, you can just turn it off. So, I’ll do one as demonstration. This module is called the “Headline Rotator”, you can turn it off by going to “Headline Rotator” > click the “Get the theme – call to action” and turn it off.
2. Revolution Slider Image & Resize product images
The revolution slider image was created with Adobe Photoshop. I’ll be doing a tutorial video on creating this slider using Pixlr, which is a free online photo editor, since not everyone has access to Adobe Photoshop, so please subscribe to my channel and you’ll be notified. Image dimension of this revolution slider is 1500px x 500px. This is what the original photo looks like and this is the result. I had to extend the background, added a vignette, text and graphics. The size for all the product images are set to 600px x 600px. I resized all the product images to fit the image box and made all the products big as possible to showcase. For the two banners, I just resized and cropped these two photos and added this graphic made by jagmte in adobe photoshop. The logo was created using Adobe Illustrator. All I did was simplify the look by using a sans-serif font. The name of this font is called Gotham.
3. CSV Product Export & Import
CSV Product Export & Import are optional extensions which allows you to update products quickly & efficiently by using the free google spreadsheet compared to the traditional method. As an example, let’s change this product image. Using the traditional method, we need to click Catalog > Products > Enter the product name > click filter > edit > go to the data tab, click browse next to the image and upload the image. Using the CSV Product Import, just copy & paste the new image file name using the google spreadsheet. And import the csv file, and that’s it. A huge time saver.
Here we have the finished file with all the product images updated. Before we import the CSV file, let’s take a look at the current store. Here you can see all the product images prior to the update with different image dimensions. Go to the backend, System > CSV Product Import, open the updated file and start the import process. Go to the storefront and hit refresh. All the product images have been updated with couple of clicks. To view the extensive tutorials and download the extensions, go to thinkplugins.com.
04. Build the store
In this part of the video, I won’t be showing you every single step to build the store, meaning which buttons I pushed, but just show you which modules were used and where they are located. So you guys can figure it out on your own. If you get stuck, you can watch my extensive tutorials and links are posted below. So the first thing we’ll do is update the logo. This can be done by going to System > Settings > Edit > Image Tab to upload the new logo. The image dimension for the logo is 300 x 100. Next, upload the revolution slider image, by going to Slider > Revolution > I created this Main Slider module and inside are the two slider images and you can also enter the link for this image here. The revolution slider also comes with an option to disable on mobile, so that it won’t show. Well, you might be asking yourself, why would I want to disable on mobile? Even though slider images look nice on big screen, they are useless in my opinion when viewing with your phone because of the small image size. We’ll take a look at an example later in this video.
I moved this headline rotator up to be prominent because it will be displaying the free shipping message. This texture was used instead of the solid color to give it a different look. You can google for metal textures to get something this, just make sure you have permission to use, and you can filter to find those images as well. This is called the custom sections module. You can pick and choose which products to display here, by using the featured module that comes with the open cart. And here you can add & delete products.
These two bottom banners are created with the advanced grid module, which combines the two separate banners into one. Here inside the advanced grid module, column 1 is the first banner and column 2 is the second banner. Let’s change the status to on and check the storefront to see the banners. That’s pretty much it for building the bulk of the store.
Now let’s test out the new store using the mobile emulator to see how it would look with an iPhone & tablet. Here is the original webstore, which was not optimized for mobile devices and here is the new store , as you can see it is easy to navigate and optimized for iPhone.
Also looks great on tablet. Let’s also take a look with the revolution slider on for mobile. Kind of hard to see because of small image size. Which is why it was turned off.
The owner now has complete control over the store, so that she can operate on her own without my help. In my next video, I’ll talk about payment gateways and seo which were not implemented in this store but still good to know.