Opencart 3 Theme Installation for Snazzy

• Introduction
• Theme Installation
• Setting image sizes
• Adding your logo
• Setting up the homepage slider
• Adding featured products
• Adding homepage banner grid
• Adding social media icons

Thank you for purchasing Snazzy Opencart 3x Theme. Select from the right menu to view the step-by-step instruction on how to install and configure this theme.

PLEASE READ:

Please not that this theme will NOT  automatically be configured with the same settings as our demo… but with Opencart’s demo products and settings. But go though the links on the right and the settings will be identical.

So don’t be alarmed if the homepage doesn’t look like our demo. You will have to add your own banner and slider images.

Follow our steps and it will. And contact us if you have any questions.

Installing your template

1. 1. Go under the “extensions” and click on  “installer”.
   2. Click “upload” next to “upload file”.
   3. Find the zip file “upload-snazzy.ocmod.zip” and choose this file for the upload.
   4. The loader will automatically appear showing installation process. Do not click away. Stay on this page till the theme files are uploaded.
   5. Now click on “extensions > modifications” and click the “refresh” button at the top of the page just under your username

Now that the files have been uploaded, you now have to switch the theme on.

1. Click on “extensions” and click “extensions” again… then under “Choose the extension type”, select “themes”.
2. Click the blue edit icon next to your store name
3. Under “theme directory” select snazzy-blue, snazzy-pink or snazzy-black
4. Click “save” at the top right of the page.

Also in this section you can select how many products per page and list description limit. And image sizes which are described below.

The theme is installed.

Image Sizes

Since your still in this section, lets get your image sizes sorted.

1. Click on “extensions” and click “extensions” again… then select “themes”
2. Click the blue edit icon next to your store name

Add the sizes below for the width. The height of the images (highlighted in red) are optional.

If you prefer to make the image height automatic, add a 1 for the height only.

Adding your logo

1. Go under the “system” and select “settings”. Now click on “edit” for your store.
2. Click on the “image” tab. Click on the first box where you see the “opencart” logo.
3. A pop up will appear. Click on the “upload” button and find your logo you just created on your hard drive. Once you do this, it will be added in the list inside the pop up box. Double click on the logo. It’s now saved and you’re done.

Create the homepage slider

Create several images exactly the same size: 1600px wide by 900px tall. It’s the center of the image which will always be visible. This is a full screen slider so the sides will be cut off on mobile.

Save the images to your hard drive

In your admin, go to Design > banners

• Click “+” (plus box) at the top right of the page
  1. Name the banner something like “Homepage Slider Banners”.
  2. Now click the “+” (plus box) to add a new banner
  3. Add the title (this will be visible) Make it something simple and snappy. No more than a short sentence (64 character max). This text will be shown in the slider.
  4. Click on the image box, click on the pencil box, click the upload icon at the top and select one of your banners you have created which are located on your hard drive
  5. Add the link you want the page to link to. You might want to come back to this if you don’t have products yet. 
  6. Once uploaded into the system, select the banner which will be visible in the display.
  7. Repeat for each banner that you have
• When you’re done adding banners, click the save icon at the top right of the page.

Now go to extensions > extensions then select “modules” from the drop down – next to “banner” click the pencil to edit (or install button if you haven’t installed it yet).

• Click on add module “+” (plus icon).
• Now add the module name. We used “Homepage slider”
• Select in the dropdown the name of your banner “Homepage Slider Banners”. Or what you have called it.
• Make the width 1600 and height 1. (adding a height of 1 will allow it to auto height)
• Save (disk icon) at the top right of the page

Now we need to set the slider to your home layout

Go to Design > Layouts – click pencil icon next to the “Home” layout.

Change the position to where you want to banners to appear. Choose “content top”. And save (disk icon at the top right of page).

 

Add featured products to home page

When you have products, you’ll want to add a few featured products to your homepage.

By default, featured products is already set to your home page. But in case that didn’t happen or you’re not starting from scratch.

You can also set special and latest or featured products. We’ll use featured images for the instructions.

• Go to extensions > extensions then select  “modules” from the drop down
• Next to featured you will see 2 buttons. If it’s not installed, and the left button is green, click install.
• Now click to the pencil button to edit.
• Add the name of the featured module. We used “Featured Products – Home Page” in our example
• Manually type in the name of the products you want to show as featured in the top input box.
• Add the limit of products (our example we have 10 products) which slides into a carousal.
• Make the image width 500px and set the height to either 1 for auto height or a ratio for your images.
• Then save (top right corner of page)

Now make sure it’s in the layout of your home page.

Go to Design > Layouts – click pencil icon next to the “Home” layout.

Now click to add module “+” button

Select featured, put it the position “content bottom”.

Creating masonry grid banners

The banner are made into a masonry effect. So when making images, make several different images to the sizes below

Create several banner images to the size of:

• Long horizontal images: 700px wide by 1400px tall
• Rectangular: 700px wide by 350px tall
• Square: 700px wide by 700px tall

In your admin, go to Design > banners

• Click “+” (plus box) at the top right of the page
  1. Name the banner something like ‘homepage grid banner”. You can put this grid on any page so you can name it accordingly.
  2. Now click the “+” (plus box) to add a new banner
  3. Add the title (this will show up as an alt tag which is important for good SEO)
  4. Click on the image box, click on the pencil box, click the upload icon at the top and select one of your banners you have created which are located on your hard drive
  5. Add the link you want the page to link to. You might want to come back to this if you don’t have products yet. 
  6. Once uploaded into the system, select the banner which will be visible in the display.
  7. Repeat for each banner that you have if you have more than 1. Make sure they are all the same size as they rotate automatically if you have more then 1 banner.
• When you’re done adding banners, click the save icon at the top right of the page.

Now go to extensions > extensions then select  “modules” from the drop down – next to “banner” click the pencil to edit (or install button if you haven’t installed it yet).

• Click on add module “+” (plus icon).
• Now add the module name. We used “Side Banner Ads”
• Select in the dropdown the name of your banner “Side Banner Ads”. Or what you have called it.
• Make the width 700 and height 1. (adding a height of 1 will allow it to auto height)
• Save (disk icon) at the top right of the page

Now we need to make sure the banner are in your homepage layout

Go to Design > Layouts – click pencil icon next to the layout you want the banner to appear. In our example we have it showing in the categories page.

Change the position to where you want to banners to appear. So if you made a landscape size banner, you can place it in the content top or bottom.

Add social media icons

Sadly Opencart doesn’t come with social media icons within the system. But you can search Opencart modules to see if you find any modules that you like and can install and skip this part. http://www.opencart.com/index.php?route=extension/extension Otherwise, you can manually install them onto this theme by following these steps. If you need help with this section, contact us on info@eshopalot.com and we’ll do this for you.

Step 1 – Social Media:

• Go into your admin and click on extensions > extensions then select  “modules” from the drop down and scroll to where you see “html content”
• Click the green install button if this module isn’t yet installed

Step 2 – Social Media:

Now click on this link:
https://themegoblin.com/socialmedia-icons.txt

• You will see a bunch of code wrapped in DELETE and END DELETE
• Lets use facebook for example

<!- DELETE facebook if you don’t have one ->
<li class=”facebook”> <a target=”_blank” href=”ADDURL”> (add your facebook url only where it says ADDURL)<span>Facebook</span></a></li> <!- END DELETE ->

We also have options for twitter, google+, pinterest, instagram and youtube. Let’s say for instance you don’t have a youtube account and want to remove that icon.

• All you have to do is delete from <!- DELETE youtube if you don’t have one -> to <!- END DELETE ->
• And do the same for the other social media icons if you don’t want them included.

For example, let’s say you only have facebook and twitter. And you have deleted the others. The file should now look like this

<div id=”social_block” class=”container”>
<ul>
<!- DELETE facebook if you don’t have one -> <li class=”facebook”> <a target=”_blank” href=”ADDURL”>  (but with your facebook url) <span>Facebook</span></a></li> <!- END DELETE ->
<!- DELETE twitter if you don’t have one -> <li class=”twitter”> <a target=”_blank” href=”ADDURL”> (but with your facebook url) <span>Twitter</span></a></li> <!- END DELETE -> </ul>
</div>

Select all the copy in the file and copy it.

Step 3 – Social Media:

1. Now go back to your Opencart admin click on extensions > extensions then select  “modules” from the drop down and scroll to where you see “html content”
2. Click the blue pencil button to edit the “html content”.
3. Click on “add module”.
4. Add the module name. In our example we used “social media”
5. LEAVE THE HEADING BLANK,
6. Click on the code view button
7. And paste the contents from the text file in here
8. Now click save (blue disc icon at the top right of your browser)

Step 4 – Social Media:

Now we need to add the html content into your store. Go to Design > Layouts

1. Click the blue pencil icon to edit each section starting with account.
2. At the bottom click on the blue “+” icon to add a new module. (the bottom + icon, not the one towards the top)
3. Now a new module has come up which automatically set it to banner. We need to change this.
4. Change it from banner to html content 1 (or 2 if you have more than one html content)
5. Set the position to content bottom
6. Now click save (blue disc icon at the top right of your browser)

You must repeat steps above 1-6 for

• Account
• Affiliate
• Category
• Checkout
• Compare
• Contact
• Default
• Home
• Information
• Manufacturer
• Product
• Search
• Sitemap