Opencart 3 Template Installation for Aura

• 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

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. Go under the “extensions” and click on  “installer”.
2. Click “upload” next to “upload file”.
3. Find the zip file “upload-aura.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 “Aura” (one of the color options)
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. Since this is an endless scrolling theme, it works best to select around 4 products per page.

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.

Creating your home page slider

First you need to create banner images. In my example I have created them to the size of:
460px wide by 700px tall.

Create several images to the size above and save on your hard drive. Make sure they are all the same size.

In your admin, go to Design > banners

• Click “+” (plus box) at the top right of the page
  1. Name the banner something like “homepage 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 few word or less.
  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.

Go to extensions > extensions then select  “modules” from the drop down – next to slideshow click the pencil to edit

• Click on add module “+” (plus icon).
• Add the name of the module (something like “homepage slider“
• Now select from the banner group you have just created (homepage banners)
• Now add the height and width which need to mirror the size of your images.
  Our example size: 1500px wide by 600px tall.
• Set the status to enabled.

Now we need to make sure the slider is in your homepage layout

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

If this is a new install, you already have a slideshow from the demo in this area. Switch it to the slide show you have just created “homepage slider”

Make sure you attach the slideshow to content top

Click save (disc icon) at the top right of the 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 4 products)
• 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 the homepage banner grid

Create a banner images to the size of:

• 600 pixels wide x any height (if you are putting the banner in a column)
• In our example we used images to the size of 600px wide by 300px tall
• For the homepage, create a minimum of 2 images. In our demo we used 4 images.

In your admin, go to Design > banners

• Click “+” (plus box) at the top right of the page
  1. Name the banner something like “homepage banners” or “Bottom Banner Ads”. Depending on position.
  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 “Homepage Grid Banners”
• Select in the dropdown the name of your banner “homepage banners”. Or what you have called it.
• Make the width 600 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. View our example below.

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