Magento2 Electronics Theme

$29.95

Responsive Electronics is a Theme for Magento with a clean and technical design. This Template for Magento is perfect for Electronic products but also any other kind of store.
Tested for Magento version 2.0 - 2.1 - 2.2.1

Description

Description

LIKE TO BUY THIS THEME?

No monthly costs
Unlimited free updates
30 days money back guaranty
Also on Magento.com

THEME INFORMATION

DEMO

For Magento Version
2.0 - 2.1 - 2.2.1
Check/Test all pages
Ask me anything

ELECTRONICS THEME TOP SECTION

You will definitely impress your customers due to our big focus on usability and clear structures. The theme is highly customizable. All blocks in Header, Footer and Homepage can be managed in the Magento backend CMS. Pagayo has been active ON MAGENTO.COM from 2007. We have 18.000+ downloads and 50+ reviews. You can read about us ON MAGENTO.COM by clicking here.

ELECTRONICS THEME MIDDLE SECTION

ELECTRONICS THEME BOTTOM SECTION

MAGENTO2 THEME

Responsive Electronics is a Theme for Magento with a clean and technical design. This Template for Magento is perfect for Electronic products but also any other kind of store. You will definitely impress your customers due to our big focus on usability and clear structures. The theme is highly customizable. All blocks in Header, Footer and Homepage can be managed in the Magento backend CMS. Pagayo has been active ON MAGENTO.COM from 2007. We have 18.000+ downloads and 50+ reviews. You can read about us ON MAGENTO.COM by clicking here.

OVERALL DEVELOPER SUPPORT 4.4/5 OVERALL THEME RATING 4.2/5

PAGAYO ON MAGENTO E-COMMERCE

Disclosure: This page contains external affiliate links that may result in us receiving a commission if you choose to purchase mentioned product. The opinions on this page are our own and we don’t receive additional bonus for positive reviews.

PREPARE MAGENTO 2

  1. Login to your Magento 2 backend
  2. Disable cacheSystem > Cache Management
  3. Create a backup if you are not 100% sure of what you are doing
A good idea would be to backup your Magento. If you have a hosting company like SiteGround (we recommend SiteGround strongly), you can do this simple clicking backup in your user interface.

INSTALLATION

    1. Download the theme from your account at pagayo.com. To your download page.
    2. Unzip the .zip file you downloaded
    3. Upload the files that are in the .zip to your server and add them to the Magento root folder
    4. In your Magento backend go toContent > Themes
    5. If you see the Pagayo theme, you have done the upload correct

    1. Go toStores > Configuration > General > Design > Design Theme
    2. Select the Pagayo Theme
    3. Click Safe Config

INSTALLATION

    1. Download the theme from your account at pagayo.com. To your download page.
    2. Unzip the .zip file you downloaded
    3. Upload the files that are in the .zip to your server and add them to the Magento root folder
    4. In your Magento backend go toContent > Themes
    5. If you see the Pagayo theme, you have done the upload correct

    1. Go toStores > Configuration > General > Design > Design Theme
    2. Select the Pagayo Theme
    3. Click Safe Config

HOME

    1. Go toContent > Pages
    2. Select the page with URL key home. If it is not there, click “Add New Page”
    3. Add your page title
    4. The URL key has to be “home”
    5. Select your store view (almost always “All Store Views”)
    6. Click “Content”
    7. Make sure you select “Hide Editor”
    8. Add content
      <div class="container home">
      <div class="usp">
      <div class="well">
      <div class="row">
      <div class="col-md-4"><em class="fa fa-truck ups-brown"></em>
      <h5>FREE SHIPPING &amp; RETURN</h5>
      <p>Free shipping on orders over $99.</p>
      </div>
      <div class="col-md-4"><em class="fa fa-money dollar-green"></em>
      <h5>MONEY BACK GUARANTEE</h5>
      <p>100% money back guarantee.</p>
      </div>
      <div class="col-md-4-last"><em class="fa fa-comment skype-blue"></em>
      <h5>ONLINE SUPPORT 24/7</h5>
      <p>We are there to help you</p>
      </div>
      </div>
      </div>
      </div>
      <div class="row row-home-one">
      <div class="col-md-8">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators">
      <li class="active" data-target="#carousel-example-generic" data-slide-to="0"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol><!-- Wrapper for slides -->
      <div class="carousel-inner">
      <div class="item active"><img src="{{media url="wysiwyg/pt205/home-slide-1.jpg"}}" alt="" />
      <div class="carousel-caption">
      <h3>The New iPhone 6</h3>
      <p>Come and Get it</p>
      </div>
      </div>
      <div class="item"><img src="{{media url="wysiwyg/pt205/home-slide-2.jpg"}}" alt="" />
      <div class="carousel-caption">
      <h3>Windows 10</h3>
      <p>We Love It</p>
      </div>
      </div>
      <div class="item"><img src="{{media url="wysiwyg/pt205/home-slide-3.jpg"}}" alt="" />
      <div class="carousel-caption">
      <h3>Samsung</h3>
      <p>It doesn't take a genius!</p>
      </div>
      </div>
      </div>
      <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="sr-only">Next</span> </a></div>
      </div>
      <div class="col-md-4"><img src="{{media url="wysiwyg/pt205/home-adobe.jpg"}}" alt="" /></div>
      </div>
      <hr class="style-two" />
      <div class="row row-home-two">
      <div class="col-md-4"><img src="{{media url="wysiwyg/pt205/pt004-home-box1.jpg"}}" alt="" /></div>
      <div class="col-md-4"><img src="{{media url="wysiwyg/pt205/pt004-home-box2.jpg"}}" alt="" /></div>
      <div class="col-md-4"><img src="{{media url="wysiwyg/pt205/pt004-home-box3.jpg"}}" alt="" /></div>
      </div>
      <hr class="style-two" />
      <div class="newgrid">insertwidget</div>
      <hr class="style-two" />
      <div class="row">
      <div class="col-md-3 free-gift">
      <h5>This month only!!</h5>
      <p>Get a free gift on every order over $150.00</p>
      <em class="fa fa-gift"></em></div>
      <div class="col-md-3 usp-blocks"><em class="fa fa-users"></em>
      <h6>DEDICATED SERVICE</h6>
      <p>Consult our specialists for help with an order, customization, or design advice.</p>
      <p><a href="#">Get in Touch &gt;</a></p>
      </div>
      <div class="col-md-3 usp-blocks"><em class="fa fa-thumbs-up"></em>
      <h6>DEDICATED SERVICE</h6>
      <p>Consult our specialists for help with an order, customization, or design advice.</p>
      <p><a href="#">Get in Touch &gt;</a></p>
      </div>
      <div class="col-md-3 usp-blocks"><em class="fa fa-globe"></em>
      <h6>DEDICATED SERVICE</h6>
      <p>Consult our specialists for help with an order, customization, or design advice.</p>
      <p><a href="#">Get in Touch &gt;</a></p>
      </div>
      </div>
      <div class="jumbotron">
      <h1>Theme example</h1>
      <p>Sed varius congue cursus. Praesent id finibus sem, a scelerisque libero. Fusce euismod, ex vel dapibus ullamcorper, felis purus posuere nisi, ac venenatis odio tellus vitae ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ante augue, bibendum at mattis in, lobortis eget ex. Nulla laoreet non est eu euismod. Proin sed dictum leo. Maecenas fringilla enim in pretium gravida. Pellentesque cursus leo eu velit semper condimentum. Quisque ante ante, placerat a finibus non, sagittis id turpis. Morbi ut quam nec felis ultrices malesuada ac eu justo. Nullam quam ante, tempus vitae convallis vitae, rutrum sit amet lectus. Phasellus eu porta elit. Pellentesque venenatis felis at urna congue, id lobortis lorem vestibulum. Pellentesque dui massa, blandit a ipsum imperdiet, blandit imperdiet mi. Nam sed sem non sapien laoreet suscipit ultricies nec mi.</p>
      </div>
      </div>
    9. Click “Save and Continue Edit”
    10. Click “Show / Hide Editor”
    11. Scroll down to “insertwidget”

    1. Dubble click “insertwidget” to select it
    2. Click the “Inster Widget” icon. It is the one with the Magento logo

  1. Select Widget Type “Catalog New Products List”
  2. Number of Products to Display add “5”
  3. Template Select “New Products Grid Template”
  4. Click “Insert Widget”
  5. Click “Save Page”

SLIDER / CAROUSEL

  1. Go toContent > Pages
  2. Select the page with URL key home.
  3. If you do not see the editor. Click “Show / Hide Editor”
  4. Select and replace the images you see one by one
  5. Below the images you see the text that is shown in the images, you can update that
  6. Click “Save Page”

CUSTOMISING YOUR MAGENTO2 THEME

I would suggest you never overwrite core files and theme files. It is much better to use/create your own files. I will show you how to do that here.

  1. Use your FTP client
  2. Go to/app/design/frontend/Pagayo/pt205/Magento_Theme/layout/and opendefault_head_blocks.xml
  3. Add your own css file name. See image below. Change “yourname” in something else.
  4. Go to/app/design/frontend/Pagayo/pt205/web/css/and create/changeyourname-custom.cssChange “yourname” in the same as you did in the .xml above.
  5. Now you can make your own css changes in this new .css file. See image below.
  6. When your shop is going live you should deploy your static files again.

FONT AWESOME ICONS

Font Awesome Icons are the little images you see. Like on the homepage you see the brown truck, the green bill and the blue cloud. It is very simple to change these to any of the Font Awesome Icons shown below. If you need more information, please go to the Font Awesome Icons website.

Below you see the dollar bill example from the homepage. Replace “money” with “automobile” and you will see a car and not the dollar bill.
<em class="fa fa-money dollar-green"></em>
<em class="fa fa-automobile dollar-green"></em>
The color is not part of Font Awesome Icons. You can use it or not. Delete for example dollar-green and you will see the original font color of your site. You can also add your own color from the Magento backend by adding a span. And if you do not want to use HEX colors you can also add colors, but that will limit you a lot.
<em class="fa fa-money dollar-green"></em>
<em class="fa fa-automobile"></em>
<span style="color: #ff0000;"><em class="fa fa-certificate"></em></span>
<span style="color:blue;"><em class="fa fa-star"></em></span>
Make sure to disable the Editor by clicking “Show / Hide editor” before you change or add Font Awesome Icons
bluetooth
bluetooth-b
codiepie
credit-card-alt
edge
fort-awesome
hashtag
mixcloud
modx
pause-circle
pause-circle-o
percent
product-hunt
reddit-alien
scribd
shopping-bag
shopping-basket
stop-circle
stop-circle-o
usb
adjust
anchor
archive
area-chart
arrows
arrows-h
arrows-v
asterisk
at
automobile (alias)
balance-scale
ban
bank (alias)
bar-chart
bar-chart-o (alias)
barcode
bars
battery-0 (alias)
battery-1 (alias)
battery-2 (alias)
battery-3 (alias)
battery-4 (alias)
battery-empty
battery-full
battery-half
battery-quarter
battery-three-quarters
bed
beer
bell
bell-o
bell-slash
bell-slash-o
bicycle
binoculars
birthday-cake
bluetooth
bluetooth-b
bolt
bomb
book
bookmark
bookmark-o
briefcase
bug
building
building-o
bullhorn
bullseye
bus
cab (alias)
calculator
calendar
calendar-check-o
calendar-minus-o
calendar-o
calendar-plus-o
calendar-times-o
camera
camera-retro
car
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
cart-arrow-down
cart-plus
cc
certificate
check
check-circle
check-circle-o
check-square
check-square-o
child
circle
circle-o
circle-o-notch
circle-thin
clock-o
clone
close (alias)
cloud
cloud-download
cloud-upload
code
code-fork
coffee
cog
cogs
comment
comment-o
commenting
commenting-o
comments
comments-o
compass
creative-commons
credit-card
credit-card-alt
crop
crosshairs
cube
cubes
cutlery
dashboard (alias)
database
desktop
diamond
dot-circle-o
download
edit (alias)
ellipsis-h
ellipsis-v
envelope
envelope-o
envelope-square
eraser
exchange
exclamation
exclamation-circle
exclamation-triangle
eye
eye-slash
eyedropper
fax
feed (alias)
female
fighter-jet
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-video-o
file-word-o
file-zip-o (alias)
film
filter
fire
fire-extinguisher
flag
flag-checkered
flag-o
flash (alias)
flask
folder
folder-o
folder-open
folder-open-o
frown-o
futbol-o
gamepad
gavel
gear (alias)
gears (alias)
gift
glass
globe
graduation-cap
group (alias)
hand-grab-o (alias)
hand-lizard-o
hand-paper-o
hand-peace-o
hand-pointer-o
hand-rock-o
hand-scissors-o
hand-spock-o
hand-stop-o (alias)
hashtag
hdd-o
headphones
heart
heart-o
heartbeat
history
home
hotel (alias)
hourglass
hourglass-1 (alias)
hourglass-2 (alias)
hourglass-3 (alias)
hourglass-end
hourglass-half
hourglass-o
hourglass-start
i-cursor
image (alias)
inbox
industry
info
info-circle
institution (alias)
key
keyboard-o
language
laptop
leaf
legal (alias)
lemon-o
level-down
level-up
life-bouy (alias)
life-buoy (alias)
life-ring
life-saver (alias)
lightbulb-o
line-chart
location-arrow
lock
magic
magnet
mail-reply (alias)
mail-reply-all (alias)
male
map
map-marker
map-o
map-pin
map-signs
meh-o
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mobile
mobile-phone (alias)
money
moon-o
mortar-board (alias)
motorcycle
mouse-pointer
music
navicon (alias)
newspaper-o
object-group
object-ungroup
paint-brush
paper-plane
paper-plane-o
paw
pencil
pencil-square
pencil-square-o
percent
phone
phone-square
photo (alias)
picture-o
pie-chart
plane
plug
plus
plus-circle
plus-square
plus-square-o
power-off
print
puzzle-piece
qrcode
question
question-circle
quote-left
quote-right
random
recycle
refresh
registered
remove (alias)
reorder (alias)
reply
reply-all
retweet
road
rocket
rss
rss-square
search-minus
search-plus
send (alias)
send-o (alias)
server
shield
ship
shopping-bag
shopping-basket
shopping-cart
sign-out
signal
sitemap
sliders
smile-o
soccer-ball-o (alias)
sort
sort-alpha-asc
sort-alpha-desc
sort-amount-asc
sort-amount-desc
sort-asc
sort-desc
sort-down (alias)
sort-numeric-asc
sort-numeric-desc
sort-up (alias)
space-shuttle
spinner
spoon
square
square-o
star
star-half
star-half-empty (alias)
star-half-full (alias)
star-half-o
star-o
sticky-note
sticky-note-o
street-view
suitcase
sun-o
support (alias)
tablet
tachometer
tag
tags
tasks
taxi
television
terminal
thumb-tack
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ticket
times
times-circle
times-circle-o
tint
toggle-down (alias)
toggle-left (alias)
toggle-off
toggle-on
toggle-right (alias)
toggle-up (alias)
trademark
trash
trash-o
tree
trophy
truck
tty
tv (alias)
umbrella
university
unlock
unlock-alt
unsorted (alias)
upload
user
user-plus
user-secret
user-times
users
video-camera
volume-down
volume-off
volume-up
warning (alias)
wheelchair
wifi
wrench
hand-grab-o (alias)
hand-lizard-o
hand-o-down
hand-o-left
hand-o-right
hand-o-up
hand-paper-o
hand-peace-o
hand-pointer-o
hand-rock-o
hand-scissors-o
hand-spock-o
hand-stop-o (alias)
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ambulance
automobile (alias)
bicycle
bus
cab (alias)
car
fighter-jet
motorcycle
plane
rocket
ship
space-shuttle
subway
taxi
train
truck
wheelchair
genderless
intersex (alias)
mars
mars-double
mars-stroke
mars-stroke-h
mars-stroke-v
mercury
neuter
transgender
transgender-alt
venus
venus-double
venus-mars
file
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-o
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-text
file-text-o
file-video-o
file-word-o
file-zip-o (alias)
circle-o-notch
cog
gear (alias)
refresh
spinner
check-square
check-square-o
circle
circle-o
dot-circle-o
minus-square
minus-square-o
plus-square
plus-square-o
square
square-o
cc-amex
cc-diners-club
cc-discover
cc-jcb
cc-mastercard
cc-paypal
cc-stripe
cc-visa
credit-card
credit-card-alt
google-wallet
paypal
area-chart
bar-chart
bar-chart-o (alias)
line-chart
pie-chart
bitcoin (alias)
btc
cny (alias)
dollar (alias)
eur
euro (alias)
gbp
gg
gg-circle
ils
inr
jpy
krw
money
rmb (alias)
rouble (alias)
rub
ruble (alias)
rupee (alias)
shekel (alias)
sheqel (alias)
try
turkish-lira (alias)
usd
won (alias)
yen (alias)
align-center
align-justify
align-left
align-right
bold
chain-broken
clipboard
columns
copy (alias)
cut (alias)
dedent (alias)
eraser
file
file-o
file-text
file-text-o
files-o
floppy-o
font
header
indent
italic
list
list-alt
list-ol
list-ul
outdent
paperclip
paragraph
paste (alias)
repeat
rotate-left (alias)
rotate-right (alias)
save (alias)
scissors
strikethrough
subscript
superscript
table
text-height
text-width
th
th-large
th-list
underline
undo
unlink (alias)
angle-double-down
angle-double-left
angle-double-right
angle-double-up
angle-down
angle-left
angle-right
angle-up
arrow-circle-down
arrow-circle-left
arrow-circle-o-down
arrow-circle-o-left
arrow-circle-o-right
arrow-circle-o-up
arrow-circle-right
arrow-circle-up
arrow-down
arrow-left
arrow-right
arrow-up
arrows
arrows-alt
arrows-h
arrows-v
caret-down
caret-left
caret-right
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
caret-up
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-right
chevron-up
exchange
hand-o-down
hand-o-left
hand-o-right
hand-o-up
long-arrow-down
long-arrow-left
long-arrow-right
long-arrow-up
toggle-down (alias)
toggle-left (alias)
toggle-right (alias)
toggle-up (alias)
arrows-alt
backward
compress
eject
expand
fast-backward
fast-forward
forward
pause
pause-circle
pause-circle-o
play
play-circle
play-circle-o
random
step-backward
step-forward
stop
stop-circle
stop-circle-o
youtube-play

WARNING!

Apparently, Adblock Plus can remove Font Awesome brand icons with their “Remove Social Media Buttons” setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you’ll need to modify the social icon class names.

500px
adn
amazon
android
angellist
apple
behance
behance-square
bitbucket
bitbucket-square
bitcoin (alias)
black-tie
bluetooth
bluetooth-b
btc
buysellads
cc-amex
cc-diners-club
cc-discover
cc-jcb
cc-mastercard
cc-paypal
cc-stripe
cc-visa
chrome
codepen
codiepie
connectdevelop
contao
css3
dashcube
delicious
deviantart
digg
dribbble
dropbox
drupal
edge
empire
expeditedssl
firefox
flickr
fonticons
fort-awesome
forumbee
foursquare
ge (alias)
get-pocket
gg
gg-circle
git
git-square
github
github-alt
github-square
gittip (alias)
google
google-plus
google-plus-square
google-wallet
gratipay
hacker-news
houzz
html5
instagram
internet-explorer
ioxhost
joomla
jsfiddle
lastfm
lastfm-square
leanpub
linkedin
linkedin-square
linux
maxcdn
meanpath
medium
mixcloud
modx
odnoklassniki
odnoklassniki-square
opencart
openid
opera
optin-monster
pagelines
paypal
pied-piper
pied-piper-alt
pinterest
pinterest-p
pinterest-square
product-hunt
qq
ra (alias)
rebel
reddit
reddit-alien
reddit-square
renren
safari
scribd
sellsy
shirtsinbulk
simplybuilt
skyatlas
skype
slack
slideshare
soundcloud
spotify
stack-exchange
stack-overflow
steam
steam-square
stumbleupon
stumbleupon-circle
tencent-weibo
trello
tripadvisor
tumblr
tumblr-square
twitch
usb
viacoin
vimeo
vimeo-square
vine
vk
wechat (alias)
weibo
weixin
whatsapp
wikipedia-w
windows
wordpress
xing
xing-square
y-combinator
y-combinator-square (alias)
yahoo
yc (alias)
yc-square (alias)
yelp
youtube
youtube-play
youtube-square
  • All brand icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
  • Brand icons should only be used to represent the company or product to which they refer.
ambulance
h-square
heart
heart-o
heartbeat
hospital-o
medkit
plus-square
stethoscope
user-md
wheelchair

Reviews (0)

Reviews

There are no reviews yet.

Be the first to review “Magento2 Electronics Theme”

You may also like…