Electra - Opencart Theme Installation Documentation

Electra - Opencart Theme Documentation

Thank You For purchasing Opencart Theme from Codezeel.

If you have any questions, please feel free to contact us via our support form support@codezeel.com. Thanks again for your purchase.

Step 1 : Installation and Image Size Settings Back to Top

Please, read the whole section, before attempting to install the theme.
IT IS RECOMMEND TO ALWAYS BACKUP YOUR SYSTEM BEFORE MAKING ANY UPGRADES OR CHANGES!

1.1) File upload

To install OpenCart template you need to upload it’s files to your hosting server.
For install theme using FTP login to your server via cuteFTP or Filezilla with your server login detail.
Extract the downloaded zip file and Upload all files and folders from the “Opencart Files” to your opencart root directory,
e.g Your copy path will be
admin (Overwrite this folder)
catalog (Overwrite this folder)
image (Overwrite this folder)

1.2) Theme Activation

Now we have to activate our Template from Admin panel
Under Admin Panel > Extensions > Themes
Now click on Edit button of Your Store.
Select Electra into Theme Directory field,
Status Enabled and Click on Save button at top right corner.

1.3) Image Size Setting

Image Size setting

870 X 200

475 X 475

1000 X 1000

280 X 280

475 X 475

280 X 280

75 X 75

60 X 60

75 X 75

Save

Step 2 : Logo settings Back to Top

For Logo setting , Under admin panel go to System > Setting > Edit > Images,
From Store Logo you can upload your logo image.

Step 3 : Language Settings Back to Top

If you want to add new languages then download it from this site http://www.opencart.com .
Download language from given url and paste it to your opencart installation language directory respectivly.
Language directory root : "admin/language" and "catalog/language".

To Enable Languages login to your store admin panel and do following settings.

For Example To add Spanish Language :
Go to System > Localisation > Languages,
Click on Add New button to add new Language.
Language Name : Spanish
Code : es-es
Status : Enable,
Sort Order : as you like.
Click on Save button.

Same way you can do the settings for other Languages.

Step 4 : Banner Settings Back to Top

4.1 : Main Banner

For adding Main Banners, under admin panel go to Design > Banners.
(disable HP Products by clicking edit button)
Edit Home Page Slideshow banner to add new banner.
Banner Name: Home Page Slideshow,
From status select Enabled,
and click on Add Banner button.
Give title of your banner and click on image to upload your banner.
Again click on Add Banner button and upload another banners.
Now click on Save button.

Now to activate your Main Banners go to Extensions > Modules > Slideshow click on Edit link
Give Module name: Mainbanner Slideshow - Home Page,
From Banner select Home Page Slideshow,
Give Width & Height (770 X 500) (your banner Width and Height),
From status select Enabled,
Now click on Save button.

4.2 : Left Banner

For adding Left Banner, under admin panel go to Design > Banners.
Click on Add New button to add new banner.
Give Banner Name: Left banner,
From status select Enabled,
and click on Add Banner button.
Give title of your banner and click on image to upload your banner.
Now click on Save button.

Now to activate your LeftBanner go to Extensions > Modules > Banner click on Edit link
Give Module name: Left Banner - Sidebar,
From Banner select Left Banner,
Give Width & Height (275 X 340) (your banner Width and Height),
From status select Enabled,
Now click on Save button.

4.3 : Carousel Banner

For adding carousel banners, under admin panel go to Design > Banners.
Edit Manufacturers tab to add new banner.
Give Banner Name: Manufacturers,
From status select Enabled,
and click on Add Banner button.
Give title of your banner and click on image to upload your banner.
Now click on Save button.

Now to activate your Carousel Banner go to Extensions > Modules > Carousel click on Edit link
Give Module Name: Manufacturers - Home Page,
From banner select Manufacturers,
Give Width & Height (200 X 70) (your banner Width and Height),
From status select Enabled,
Now click on Save button.

Step 5 : HTML Content Back to Top

Go to Extensions > Modules > HTML Content > Install(After install click on "Edit" link),

Now, we create some HTML cms block as listed below.

5.1 : Footer Top CMS

For Footer Top CMS, Click on Add New button to add new cms block.
Give Module Name: Footer Top CMS
Now click on Code View button in text editor block as display in screen shot and paste below HTML code for 'Footer Top CMS' and close code view button.
From status select Enabled.
Now click on Save button.

HTML code for 'Footer Top CMS'

<div id="footerlogo">
<div class="footerdiv">
<div class="footerlogo"><img src="image/catalog/footer-logo.png"></div>
<div class="footerdesc">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</div>
<div class="social-block">
<ul>
<li class="facebook">
<a class="_blank" href="http://www.facebook.com" target="_blank">
<span>Facebook</span>
</a>
</li>
<li class="twitter">
<a class="_blank" href="http://www.twitter.com" target="_blank">
<span>Twitter</span>
</a>
</li>
<li class="rss">
<a class="_blank" href="http://www.rss.com/" target="_blank">
<span>RSS</span>
</a>
</li>
<li class="google-plus">
<a class="_blank" href="https://www.google.com/" target="_blank">
<span>Google Plus</span>
</a>
</li>
</ul>
</div>
</div>
</div>

5.2 : Contact Block - Header

For Contact Block, Click on Add New button to add new cms block.
Give Module Name: Contact Block - Header
Now click on Code View button in text editor block as display in above screen shot and paste below HTML code for 'Contact Block - Header' and close code view button.
From status select Enabled.
Now click on Save button.

HTML code for 'Contact Block - Header'

5.3 : Payment Logo - Footer

For Payment Logo block, Click on Add New button to add new cms block.
Give Module Name: Payment Logo - Footer
Now click on Code View button in text editor block as display in above screen shot and paste below HTML code for 'Payment Logo - Footer' and close code view button.
From status select Enabled.
Now click on Save button.

HTML code for 'Payment Logo - Footer'

5.4 : Bottom Banner - Home page

For Bottom Banner block, Click on Add New button to add new cms block.
Give Module Name: Bottom Banner - Home page
Now click on Code View button in text editor block as display in above screen shot and paste below HTML code for 'Bottom Banner - Home page' and close code view button.
From status select Enabled.
Now click on Save button.

HTML code for 'Bottom Banner - Home page'

5.5 : Slider Bottom Banner - Home page

For Slider Bottom Banner block, Click on Add New button to add new cms block.
Give Module Name: Slider Bottom Banner - Home page
Now click on Code View button in text editor block as display in above screen shot and paste below HTML code for 'Slider Bottom Banner - Home page' and close code view button.
From status select Enabled.
Now click on Save button.

HTML code for 'Slider Bottom Banner - Home page'

5.6 : Sub Banner - Home page

For Sub Banner block, Click on Add New button to add new cms block.
Give Module Name: Sub Banner - Home page
Now click on Code View button in text editor block as display in above screen shot and paste below HTML code for 'Sub Banner - Home page' and close code view button.
From status select Enabled.
Now click on Save button.

HTML code for 'Sub Banner - Home page'

5.7 : Service CMS - Home page

For Service CMS Block, Click on Add New button to add new cms block.
Give Module Name: Service CMS - Home page
Now click on Code View button in text editor block as display in above screen shot and paste below HTML code for 'Service CMS Block' and close code view button.
From status select Enabled.
Now click on Save button.

HTML code for 'Service CMS Block'

<div id="czservicecmsblock">
<div class="service_container container">
<div class="service-area">
<div class="service-third service1">
<div class="service-icon icon1"></div>
<div class="service-content">
<div class="service-heading">24x7 Support</div>
<div class="service-description">Qui ratione voluptatem sequi nesciunt quisquam estqui dolorem ipsum</div>
</div>
</div>
<div class="service-third service2">
<div class="service-icon icon2"></div>
<div class="service-content">
<div class="service-heading">Responsive Design</div>
<div class="service-description">Qui ratione voluptatem sequi nesciunt quisquam estqui dolorem ipsum</div>
</div>
</div>
<div class="service-third service3">
<div class="service-icon icon3"></div>
<div class="service-content">
<div class="service-heading">Free Shipping</div>
<div class="service-description">Qui ratione voluptatem sequi nesciunt quisquam est qui dolorem ipsum</div>
</div>
</div>
</div>
</div>
</div>

5.8 : Testimonial Home page

For Testimonial CMS Block, Click on Add New button to add new cms block.
Give Module Name: Testimonial Home page
Now click on Code View button in text editor block as display in above screen shot and paste below HTML code for 'Testimonial CMS Block' and close code view button.
From status select Enabled.
Now click on Save button.

HTML code for 'Testimonial CMS Block'

<div id="cztestimonialcmsblock">
<div class="testimonial_container container">
<div class="testimonial_wrapper">
<div class="testimonial-area">
<div class="customNavigation"><a class="btn prev cztestimonial_prev">prev</a> <a class="btn next cztestimonial_next">next</a></div>
<ul id="testimonial-carousel" class=" products product-carousel">
<li class=" slider-item">
<div class="testimonial-item">
<div class="item cms_face">
<div class="testimonial-image"><img src="image/catalog/user1.jpg" alt="testimonial-user1" title="testimonial-user1" width="130" height="130"></div>
<div class="title">
<div class="name"><a href="#">Mack Jeckno</a></div>
<span class="subheading">Webdesigner</span></div>
</div>
<div class="product_inner_cms">
<div class="des">
<div class="quote_img"></div>
Majority have suffered alteration in aome from, by injected humor , or randomized words which dont look passenger randomized words which dont look even slightly believable.</div>
</div>
</div>
</li>
<li class=" slider-item">
<div class="testimonial-item">
<div class="item cms_face">
<div class="testimonial-image"><img src="image/catalog/user2.jpg" alt="testimonial-user2" title="testimonial-user2" width="130" height="130"></div>
<div class="title">
<div class="name"><a href="#">luies charls</a></div>
<span class="subheading">Webdesigner</span></div>
</div>
<div class="product_inner_cms">
<div class="des">
<div class="quote_img"></div>
Majority have suffered alteration in aome from, by injected humor , or randomized words which dont look passenger randomized words which dont look even slightly believable.</div>
</div>
</div>
</li>
<li class=" slider-item">
<div class="testimonial-item">
<div class="item cms_face">
<div class="testimonial-image"><img src="image/catalog/user3.jpg" alt="testimonial-user3" title="testimonial-user3" width="130" height="130"></div>
<div class="title">
<div class="name"><a href="#">jecob goeckno</a></div>
<span class="subheading">Webdesigner</span></div>
</div>
<div class="product_inner_cms">
<div class="des">
<div class="quote_img"></div>
Majority have suffered alteration in aome from, by injected humor , or randomized words which dont look passenger randomized words which dont look even slightly believable.</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

Step 6 : Information Back to Top

Go to Extensions > Modules > Information > Edit (Click on Install link if Edit link is not there),
From Status select Enable,
Click on Save button.

Step 7 : Newsletters Back to Top

Go to Extensions > Modules > Newsletters > Edit (Click on Install link if Edit link is not there),
From Status select Enable,
Click on Save button.

Step 8 : Special Products Back to Top

Go to Extensions > Modules > Special > Edit (Click on Install link if Edit link in not there),
Give Module Name = Special Products - Sidebar
Give Limit = 3,
Give Image size (80 X 80),
From Status select Enable.
Click on Save button.

Step 9 : Codezeel TabsBack to Top

Go to Extensions > Modules > Codezeeltabs > Edit (Click on Install link if Edit link in not there),
Give Module Name = Product Tab - Home page
Give Product Limit = 16,
Give Image size (280 X 280),
From Status select Enable.
Click on Save button.

Step 10 : Codezeel BlogBack to Top

Go to Extensions > Modules > Codezeel Blog > Edit (Click on Install link if Edit link in not there),
Give Module Name = Latest News - Home page,
From Status select Enable.
Give Image size (870 X 500),
Give Limit = 6,
Give Character Limit = 100,
From Allow Comments select Yes.
From Login Required select Yes.
From Automatic Approval select No.
Click on Save button.

Now click on Add Blog button to add new Blog post.
In General tab, Give Title : Add your blog title
Now click on Code View button in text editor block and write your Blog description.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Next in Data tab,
From Status select Enable.
From Image you can upload your Blog image.
From Module select Latest News - Home page.
Click on Save button.

Again click on Add Blog button for add another Blog and repeat same process.
Also you can view comments of particular Blog by click on View Comments button and you can view full list of blogs.

Step 11 : Account Back to Top

Go to Extensions > Modules > Account > Edit (Click on Install link if Edit link in not there),
From Status select Enable,
Click on Save button.

Step 12 : Affiliate Back to Top

Go to Extensions > Modules > Affiliate > Edit (Click on Install link if Edit link in not there),
From Status select Enable,
Click on Save button.

Step 13 : Filter Back to Top

Go to Extensions > Modules > Filter > Edit (Click on Install link if Edit link in not there),
From Status select Enable,
Click on Save button.

Step 14 : Layout Setting Back to Top

For Layout Setting Go to Design > Layouts ,
For Home Layout setting Click on Home layout Edit link, and set below settings.

For Account Layout setting Click on Account layout Edit link, and set below settings.

For Affiliate Layout setting Click on Affiliate layout Edit link, and set below settings.

For Category Layout setting Click on Category layout Edit link, and set below settings.

For Checkout Layout setting Click on Checkout layout Edit link, and set below settings.

For Compare Layout setting Click on Compare layout Edit link, and set below settings.

For Contact Layout setting Click on Contact layout Edit link, and set below settings.

For Default Layout setting Click on Default layout Edit link, and set below settings.

For Information Layout setting Click on Information layout Edit link, and set below settings.

For Manufacture Layout setting Click on Manufacture layout Edit link, and set below settings.

For Product Layout setting Click on Product layout Edit link, and set below settings.

For Search Layout setting Click on Search layout Edit link, and set below settings.

For Sitemap Layout setting Click on Sitemap layout Edit link, and set below settings.

For Codezeel Blog Layout setting Click on Add Newbutton to add new layout as shown below.

Now Give Layout Name: Codezeel Blog
Now click on Add Store button to select store Select Store: Default
Route: information/blogger/blogs and then set below settings as shown below.

Step 15 : Need More Help? Back to Top

Once again, thank you so much for purchasing the theme. We are happy to help you if you have any query related to this theme. You can contact us through our support link support@codezeel.com