Sj Entry

SJ Entry - Responsive Hitech/Digital Store Joomla 5 Template

System Requirements – Joomla version 5.x

System Requirements: here

Component Requirements

SP Page Builder Component

Joomshopping Component

DOWNLOAD

Download Packages from our store: here

Helix ultimate - Framework

This template uses Helix ultimate - Framework . You can refer to the Helix ultimate function: here

Layout Position

Position Layout

Install with Quickstart Package

By using this package, you will see your website exactly as our Demo with sample data. This is applied when you need a fresh Joomla with our template

The following steps will guide to install a quickstart package of SmartAddons Joomla Template (refer sj basic4 quickstart): Click here

Install with Template and Extensions

In case your website is powered by Joomla 5 and you want to install an additional template, here are the steps that you need to follow.

1. Install sj template and set default

For the needs of this tutorial, we presume you've already have downloaded your new template on your computer.

  • Log in to the Joomla admin panel with your ID and your password.
  • Click on System in the left menu.
  • Click on Extensions in the Install panel.
  • Click on the green button Browse for file to select the template .ZIP archive on your computer.
  • Few seconds later, your new Joomla 5 template is successfully installed.

To make your new Joomla 5 template default for all of the pages of your website, follow these steps

  • Extract the template .ZIP archive to get the options.json file.
  • Click on System in the left menu.
  • Click on Site Template Styles in the Templates panel.
  • Then, click on the star icon to make sj template as default for all the pages of your website.
  • Click edit this template >> Template Options to import the options.json file, then click the button save.

2. Install extensions and enable

For the needs of this tutorial, we presume you've already have downloaded the extension .ZIP archive on your computer.

  • Extract the extensions .ZIP archive to get all our module use for this template.
  • Click on System in the left menu.
  • Click on Extensions in the Install panel.
  • Click on the green button Browse for file to select the each extension .ZIP archive on your computer.
  • Few seconds later, all our module are successfully installed.
  • Enable our Modules and Plugins: Go to System >> Manage >> Plugins >> search with the keys "sj" and "ytshortcode", "System - Helix Ultimate Framework".

Header, Footer, Pages

Header Configuration

1. Top1

Frontend

Please go to System/Manage/Site Modules => Click New button to create a new module => Select Custom module.

Backend Settings: Module

Copy & Paste the code into your editor:

<p>Black Friday Shopping and Small Business Saturday Deals!!!</p>

2. Top2

Frontend

2.1. Please go to System/Manage/Site Modules =>Click New button to create a new module => Select Login module.

Backend Settings: Module

2.2. Please go to System/Manage/Site Modules =>Click New button to create a new module => Select Language Switcher module.

Backend Settings: Module

2.3. Please go to System/Manage/Site Modules =>Click New button to create a new module => Select Jshopping Currencies module.

Backend Settings: Module

3. Logo

Frontend

Please go to System/Templates/Site Template Styles/sj-entry => Templates Options/Basic tab => Logo

Backend Settings: Logo

4. Search

Frontend

4.1. Please go to System/Manage/Site Modules => Click New button to create a new module => Select Custom module.

Backend Settings: Module / Advanced

Copy & Paste the code into your editor:

<div class="telephone"><img src="images/icon/headphone.png">
<div class="header-contact-text"><span class="email"><a href="entry@example.com">entry@example.com</a></span> <span class="phone"><a href="tel:88823456789">(84) 943 446 000</a></span></div>
</div>

4.1. Please go to System/Manage/Site Modules =>Click New button to create a new module => Select Jshopping Search module.

Backend Settings: Module

5. User1

Frontend

5.1. Please go to System/Manage/Site Modules =>Click New button to create a new module => Select Jshopping Wishlist module.

Backend Settings: Module

5.2. Please go to System/Manage/Site Modules =>Click New button to create a new module => Select Jshopping Cart module.

Backend Settings: Module

6. Menu vertical

Frontend

Please go to System/Manage/Site Modules =>Click New button to create a new module => Select SJ Mega Menu module.

Backend Settings: Module/ Sj Mega Menu Options/ Advanced

7. Menu

Frontend

Please go to System/Templates/Site Template Styles/sj-entry => Templates Options/Menu tab => select your Main menu

Backend Settings: Select Menu Type

Footer Configuration

8. Bottom1

Frontend

Please go to System/Manage/Site Modules => Click New button to create a new module => Select Custom module.

Backend Settings: Module

Copy & Paste the code into your editor:

<div class="infos-footer">
<div class="logo-footer"><a href="#"><img src="images/logo.png" alt="logo"></a></div>
<ul>
<li class="address">5611 Wellington Road, Suite 115, Gainesville</li>
<li class="phone"><a href="tel:(84)943446000">(84) 943 446 000</a></li>
<li class="email"><a href="entry@support.com">entry@support.com</a></li>
</ul>
</div>

9. Bottom2

Frontend

Please go to System/Manage/Site Modules => Click New button to create a new module => Select Menu module.

Backend Settings: Module

10. Bottom3

Frontend

Please go to System/Manage/Site Modules => Click New button to create a new module => Select Menu module.

Backend Settings: Module

11. Bottom4

Frontend

Please go to System/Manage/Site Modules => Click New button to create a new module => Select Menu module.

Backend Settings: Module

12. Bottom5

Frontend

Please go to System/Manage/Site Modules => Click New button to create a new module => Select Custom module.

Backend Settings: Module

Copy & Paste the code into your editor:

<div class="block-newsletter">
<div class="title-block">
<h3 class="sp-module-title">Join our newsletter and get $50 discount for your first order</h3>
</div>
<div class="block_content"><form class="form-inline newsletter" action="#" method="post">
<div class="form-group">
<div class="input-box"><input id="txtemail" class="form-control input-large" name="txtemail" size="55" type="email" value="" placeholder="Your email address"></div>
<div class="subcribe"><button class="btn btn-primary btn-default" type="submit"> Subscribe </button></div>
</div>
</form></div>
</div>
<ul class="list-social">
<li class="twitter"><a class="_blank" href="https://twitter.com/smartaddons" target="_blank" rel="noopener"><em class="fa fa-twitter">Twitter</em></a></li>
<li class="instagram"><a class="_blank" href="https://www.instagram.com/smartaddons13/" target="_blank" rel="noopener"><em class="fa fa fa-instagram">Instagram</em></a></li>
<li class="facebook"><a class="_blank" href="https://www.facebook.com/SmartAddons.page/" target="_blank" rel="noopener"><em class="fa fa-facebook">Facebook</em></a></li>
<li class="pinterest"><a class="_blank" href="https://www.pinterest.com/smartaddons/" target="_blank" rel="noopener"><em class="fa fa-pinterest">Pinterest</em></a></li>
<li class="linkedin"><a class="_blank" href="#" target="_blank" rel="noopener"><em class="fa fa-linkedin">linkedin</em></a></li>
</ul>

13. Copyright

Frontend

Please go to System/Templates/Site Template Styles/sj-entry => Templates Options/Basic tab => Footer

Backend Settings: Footer

14. Footer1

Frontend

Please go to System/Manage/Site Modules => Click New button to create a new module => Select Custom module.

Backend Settings: Module

Copy & Paste the code into your editor:

<div class="payment">
<div class="payment-content"><a href="#"><img class="lazyautosizes lazyloaded" src="images/banners/payment.png" alt="payment" data-sizes="auto" data-src="images/banners/payment.png"></a></div>
</div>

Home page

Refer our modules use for this page. Please create the module for the each position below:

15. Slider

Frontend

Please go to System/Manage/Site Modules => Click "New" button to create a new module >> Select "Custom" module.

Backend Settings: Module / Options

Copy & Paste the code into your editor:

<div id="slider">[yt_content_slider style="default" margin="0" items_column0="1" items_column1="1" items_column2="1" items_column3="1" items_column4="1" type_change="fade" transitionin="fadeIn" transitionout="fadeOut" arrows="yes" arrow_position="arrow-default" pagination="yes" autoplay="yes" autoheight="no" hoverpause="yes" lazyload="no" loop="yes" speed="5" delay="10" ] [yt_content_slider_item src="images/slideshow/slider-1.jpg" caption="yes" link="#" ]
<div class="container">
<div class="des-warp sl-style1 align-left">
<div class="subtitle-slider">Sofas &amp; Couches</div>
<h3 class="title-slider">Best Living Room <br>Furniture Collections</h3>
<div class="des-slider">Make your living room more luxurious</div>
<div class="slide-button"><a class="button" href="#">Shop Now</a></div>
</div>
</div>
[/yt_content_slider_item] [yt_content_slider_item src="images/slideshow/slider-2.jpg" caption="yes" link="#" ]
<div class="container">
<div class="des-warp sl-style2 align-left">
<div class="subtitle-slider">Sale Up To 30% Off</div>
<h3 class="title-slider">Men's Designer <br>Sunglasses</h3>
<div class="des-slider">Maximum discount up to 30% on <br>Burberry men's sunglasses</div>
<div class="slide-button"><a class="button" href="#">Shop Now</a></div>
</div>
</div>
[/yt_content_slider_item] [yt_content_slider_item src="images/slideshow/slider-3.jpg" caption="yes" link="#" ]
<div class="container">
<div class="des-warp sl-style3 align-left">
<div class="subtitle-slider">New Arrivals</div>
<h3 class="title-slider">Women's Sterling <br>Silver Jewelry</h3>
<div class="des-slider">Three-piece women's jewelry set <br>made entirely from pure silver</div>
<div class="slide-button"><a class="button" href="#">Shop Now</a></div>
</div>
</div>
[/yt_content_slider_item][/yt_content_slider]</div>

16. Position1

Frontend

Please go to System/Manage/Site Modules => Click New button to create a new module => Select Sj Extra Slider for JoomShopping module.

  • Backend Settings: Module / Source Options / Product Options / Image Options / Effect Options / Advanced Options

    • 17. Position2

    Frontend

    Please go to System/Manage/Site Modules => Click New button to create a new module => Select SJ Listing Tabs for Joomshopping module.

  • Backend Settings: Module / Source Options / Tabs Options / Product Options / Image Options / Effect Options / Advanced Options

    • 18. Position3

    Frontend

    Please go to System/Manage/Site Modules => Click New button to create a new module => Select Custom module.

    Backend Settings: Module/ Options

    Copy & Paste the code into your editor:

    <ul class="sj-marquee">
<li><a href="#">New customers save 10% with code: Entry69</a></li>
<li><a href="#">Get 10% off on selected items</a></li>
<li><a href="#">Limited Time Offer: Fashion Sale You Can’t Resist</a></li>
<li><a href="#">Get 10% off on selected items</a></li>
<li><a href="#">Limited Time Offer: Fashion Sale You Can’t Resist</a></li>
<li><a href="#">Free Shipping and Returns</a></li>
<li><a href="#">Get 10% off on selected items</a></li>
<li><a href="#">Limited Time Offer: Fashion Sale You Can’t Resist</a></li>
</ul>

    19. Position4

    Frontend

    Please go to System/Manage/Site Modules => Click New button to create a new module => Select Sj Extra Slider for JoomShopping module.

  • Backend Settings: Module / Source Options / Product Options / Image Options / Effect Options / Advanced Options

    • 20. Position5

    Frontend

    Please go to System/Manage/Site Modules => Click New button to create a new module => Select SJ Extra Slider for Content module.

  • Backend Settings: Module / Source Options / Product Options / Image Options / Effect Options / Advanced Options

    • 21. Position6

    Frontend

    Please go to System/Manage/Site Modules => Click "New" button to create a new module >> Select "Custom" module.

    Backend Settings: Module / Options

    Copy & Paste the code into your editor:

    <div class="block-brands">
<div class="brand_slider">[yt_content_slider style="default" margin="0" items_column0="7" items_column1="6" items_column2="4" items_column3="3" items_column4="2" type_change="fade" transitionin="fadeIn" transitionout="fadeOut" arrows="yes" arrow_position="arrow-default" pagination="no" autoplay="no" autoheight="no" hoverpause="no" lazyload="yes" loop="no" speed="0.6" delay="4" ] [yt_content_slider_item src="images/brands/Brand_1.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] [yt_content_slider_item src="images/brands/Brand_2.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] [yt_content_slider_item src="images/brands/Brand_3.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] [yt_content_slider_item src="images/brands/Brand_4.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] [yt_content_slider_item src="images/brands/Brand_5.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] [yt_content_slider_item src="images/brands/Brand_6.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] [yt_content_slider_item src="images/brands/Brand_7.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] [yt_content_slider_item src="images/brands/Brand_8.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] [yt_content_slider_item src="images/brands/Brand_9.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] [yt_content_slider_item src="images/brands/Brand_10.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] [/yt_content_slider]</div>
</div>



    Then create the home page and import page. Please go to Components => SP Page builder => Click New button => Enter the Title: "Home"

    # Click Import

    # Unzip the template package (eg name: sj_entry_template_j5x_v1.0.0.zip) to get the json files: "sp-hompage.json"

    # Select the file: "sp-hompage.json" and then Save

    The next, go to Menus => Main menu => Click New button => Enter the Title: Home. Select "SP Page builder » Page: Home" and set this menu to default home.

    Contact us page

    Refer our modules use for this page:

    1. SJ Contact Ajax

    Frontend

    Please go to System/Manage/Site Modules => Click New button to create a new module => Select SJ Contact Ajax module.

  • Backend Settings: Module / Captcha Options / Map Options / Advanced Options

    • Then create the contact us page and import page. Please go to Components => SP Page builder => Click New button => Enter the Title: "Contact us"

    # Click Import

    # Unzip the template package (eg name: sj_entry_template_j5x_v1.0.0.zip) to get the json files: "sp-contactpage.json"

    # Select the file: "sp-contactpage.json" and then Save

    The next, go to Menus => Main menu => Click New button => Enter the Title: Contact Us. Select "SP Page builder » Page: Contact us"

    (to change the map, you can edit embed iframe in \templates\sj_entry\html\mod_sj_contact_ajax\default.php)

    About us page

    Refer our modules use for this page:

    1. Video

    Frontend

    Please go to System/Manage/Site Modules => Click New button to create a new module => Select SJ Contact Ajax module.

    Backend Settings: Module

    Copy & Paste the code into your editor:

    <div class="block_video"><a class="link_video" title="video" href="https://www.youtube.com/watch?v=sw3J50YE5Tw"><img class="lazyloaded" src="images/banners/bg-video-aboutus.jpg" alt="image" data-src="images/banners/bg-video-aboutus.jpg"><span class="fa fa-play">play</span></a></div>

    2. Position11

    Frontend

    Please go to System/Manage/Site Modules => Click New button to create a new module => Select SJ Contact Ajax module.

    Backend Settings: Module / Options

    Copy & Paste the code into your editor:

    					<div class="block-ourteam">[yt_content_slider style="default" margin="0" items_column0="4" items_column1="3" items_column2="2" items_column3="2" items_column4="1" type_change="fade" transitionin="fadeIn" transitionout="fadeOut" arrows="yes" arrow_position="arrow-default" pagination="no" autoplay="yes" autoheight="no" hoverpause="yes" lazyload="no" loop="yes" speed="0.6" delay="4" ] [yt_content_slider_item src="images/member/Team_1.jpg" caption="yes" link="#" ]
<div class="item-content">
<h4 class="cl-title">Michal Kors</h4>
<div class="cl-job">Tester</div>
<div class="cl-des">Lorem Ipsum is simply dummy text of theprinting and typesetting industry.</div>
<ul class="socials">
<li class="twitter"><a class="_blank" href="https://twitter.com/smartaddons" target="_blank" rel="noopener"><em class="fa fa-twitter">Twitter</em></a></li>
<li class="instagram"><a class="_blank" href="https://www.instagram.com/smartaddons13/" target="_blank" rel="noopener"><em class="fa fa fa-instagram">Instagram</em></a></li>
<li class="facebook"><a class="_blank" href="https://www.facebook.com/SmartAddons.page/" target="_blank" rel="noopener"><em class="fa fa-facebook">Facebook</em></a></li>
<li class="pinterest"><a class="_blank" href="https://www.pinterest.com/smartaddons/" target="_blank" rel="noopener"><em class="fa fa-pinterest">Pinterest</em></a></li>
</ul>
</div>
[/yt_content_slider_item] [yt_content_slider_item src="images/member/Team_2.jpg" caption="yes" link="#" ]
<div class="item-content">
<h4 class="cl-title">Mary Jane</h4>
<div class="cl-job">Founder, CEO</div>
<div class="cl-des">Lorem Ipsum is simply dummy text of theprinting and typesetting industry.</div>
<ul class="socials">
<li class="twitter"><a class="_blank" href="https://twitter.com/smartaddons" target="_blank" rel="noopener"><em class="fa fa-twitter">Twitter</em></a></li>
<li class="instagram"><a class="_blank" href="https://www.instagram.com/smartaddons13/" target="_blank" rel="noopener"><em class="fa fa fa-instagram">Instagram</em></a></li>
<li class="facebook"><a class="_blank" href="https://www.facebook.com/SmartAddons.page/" target="_blank" rel="noopener"><em class="fa fa-facebook">Facebook</em></a></li>
<li class="pinterest"><a class="_blank" href="https://www.pinterest.com/smartaddons/" target="_blank" rel="noopener"><em class="fa fa-pinterest">Pinterest</em></a></li>
</ul>
</div>
[/yt_content_slider_item] [yt_content_slider_item src="images/member/Team_3.jpg" caption="yes" link="#" ]
<div class="item-content">
<h4 class="cl-title">John Lemeo</h4>
<div class="cl-job">Art Director</div>
<div class="cl-des">Lorem Ipsum is simply dummy text of theprinting and typesetting industry.</div>
<ul class="socials">
<li class="twitter"><a class="_blank" href="https://twitter.com/smartaddons" target="_blank" rel="noopener"><em class="fa fa-twitter">Twitter</em></a></li>
<li class="instagram"><a class="_blank" href="https://www.instagram.com/smartaddons13/" target="_blank" rel="noopener"><em class="fa fa fa-instagram">Instagram</em></a></li>
<li class="facebook"><a class="_blank" href="https://www.facebook.com/SmartAddons.page/" target="_blank" rel="noopener"><em class="fa fa-facebook">Facebook</em></a></li>
<li class="pinterest"><a class="_blank" href="https://www.pinterest.com/smartaddons/" target="_blank" rel="noopener"><em class="fa fa-pinterest">Pinterest</em></a></li>
</ul>
</div>
[/yt_content_slider_item] [yt_content_slider_item src="images/member/Team_4.jpg" caption="yes" link="#" ]
<div class="item-content">
<h4 class="cl-title">Jennifer lawrence</h4>
<div class="cl-job">Dev Leader</div>
<div class="cl-des">Lorem Ipsum is simply dummy text of theprinting and typesetting industry.</div>
<ul class="socials">
<li class="twitter"><a class="_blank" href="https://twitter.com/smartaddons" target="_blank" rel="noopener"><em class="fa fa-twitter">Twitter</em></a></li>
<li class="instagram"><a class="_blank" href="https://www.instagram.com/smartaddons13/" target="_blank" rel="noopener"><em class="fa fa fa-instagram">Instagram</em></a></li>
<li class="facebook"><a class="_blank" href="https://www.facebook.com/SmartAddons.page/" target="_blank" rel="noopener"><em class="fa fa-facebook">Facebook</em></a></li>
<li class="pinterest"><a class="_blank" href="https://www.pinterest.com/smartaddons/" target="_blank" rel="noopener"><em class="fa fa-pinterest">Pinterest</em></a></li>
</ul>
</div>
[/yt_content_slider_item] [yt_content_slider_item src="images/member/Team_5.jpg" caption="yes" link="#" ]
<div class="item-content">
<h4 class="cl-title">Alice Crowheart</h4>
<div class="cl-job">Designer</div>
<div class="cl-des">Lorem Ipsum is simply dummy text of theprinting and typesetting industry.</div>
<ul class="socials">
<li class="twitter"><a class="_blank" href="https://twitter.com/smartaddons" target="_blank" rel="noopener"><em class="fa fa-twitter">Twitter</em></a></li>
<li class="instagram"><a class="_blank" href="https://www.instagram.com/smartaddons13/" target="_blank" rel="noopener"><em class="fa fa fa-instagram">Instagram</em></a></li>
<li class="facebook"><a class="_blank" href="https://www.facebook.com/SmartAddons.page/" target="_blank" rel="noopener"><em class="fa fa-facebook">Facebook</em></a></li>
<li class="pinterest"><a class="_blank" href="https://www.pinterest.com/smartaddons/" target="_blank" rel="noopener"><em class="fa fa-pinterest">Pinterest</em></a></li>
</ul>
</div>
[/yt_content_slider_item] [/yt_content_slider]</div>

    Then create the contact us page and import page. Please go to Components => SP Page builder => Click New button => Enter the Title: "About us"

    # Click Import

    # Unzip the template package (eg name: sj_entry_template_j5x_v1.0.0.zip) to get the json files: "sp-aboutpage.json"

    # Select the file: "sp-aboutpage.json" and then Save

    The next, go to Menus => Main menu => Click New button => Enter the Title: About Us. Select "SP Page builder » Page: About us"

    Gallery page

    Please go to Components => SP Page builder => Click New button => Enter the Title: "Gallery"

    # Click Import

    # Unzip the template package (eg name: sj_entry_template_j5x_v1.0.0.zip) to get the json files: "sp-gallerypage.json"

    # Select the file: "sp-gallerypage.json" and then Save

    The next, go to Menus => Main menu => Click New button => Enter the Title: Gallery. Select "SP Page builder » Page: Gallery"

    Install multilingual site in SJ Template

    Please go to System => Manage => Languages to install the language that you wanto use.

    Then go toSystem => Manage => Content Languages and click "New" button to crete the New Content Language.

    Support

    Thank you so much for purchasing this template. If you have any questions that are beyond the scope of this help file, please send us via: Submit a Ticket

    Thanks so much!