Magento v2.2.
2 Guide for Theme Implementation & Maintenance
Contents
❖ Frontend Map
❖ Installing Magento 2.2.2
➢ Open browser and follow instructions
➢ Set developer mode
➢ Add new Theme Folder
■ Theme images location
■ Theme Cascade Style Sheets location
➢ Install new Theme from admin
❖ Import database
➢ Update base_url
➢ Load database
➢ Product images location
❖ Updates: localhost → server
❖ Email Configuration - SMTP Extension
➢ Customize Email Templates
➢ Activate Email Templates
➢ Add own Store Emails
➢ Configure the Simple Mail Transfer Protocol
➢ Test new Email Configuration
❖ Setting production mode
❖ Overridden Files for Geedop Theme
➢ Lightslider sources
Go to Backend - Adding New Products Guide
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
Magento Frontend Structure
1. Download, unzip and install Magento - *server or localhost:
From: https://magento.com/tech-resources/download
❏ var
❏ www
❏ *Put unzipped folders here
2. Open browser, go to server address and follow instructions:
**Some extensions and tools may be needed, check:
http://docs.magento.com/m1/ce/user_guide/magento/system-requirements.html
for more details.
Go back to Contents.
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
Better to have in hand:
a. Username
b. Valid e-mail
c. Password
Set database name and password (for mysql):
*meaningful name *unforgettable password
3. When you see this page, set developer mode:
Go to ~path/magento_root_directory:
$ php bin/magento deploy:mode:set developer
4. Add new Theme Folder to ~path/magento_root_directory:
❏ app
❏ design
❏ frontend
❏ Geedop (Theme Folder)
❏ Theme
Go back to Contents.
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
5. Install new Theme from admin page http://youraddress/admin:
Content > Design > Configuration > Edit > Select Applied Theme > Save Configuration
Go back to Contents.
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
To see applied Theme, go to ~path/Magento_root_directory:
$ php bin/magento setup:static-content:deploy -f
$ rm -rf var/view_preprocessed/* var/cache/* var/page_cache/* pub/static/frontend/*
$ php bin/magento cache:flush
6. Import database:
$ mysql -u user -p
> use ‘databasename’;
> drop database ‘olddatabase’’;
> create database ‘newdatabase’;
> exit
$ msql -u user -p newdatabase < newdatabase.sql
7. Update base_url for new server:
$ mysql -u user -p
> USE newimporteddatabase;
> UPDATE core_config_data SET value = ‘http://serveraddress/’ WHERE path LIKE
‘web/unsecure/base_url’;
> UPDATE core_config_data SET value = ‘https://serveraddress/’ WHERE path LIKE
‘web/secure/base_url’;
> exit
8. Load database ~path/magento_root_directory:
$ composer install
$ php bin/magento setup:static-content:deploy -f
$ php bin/magento setup:di:compile
$ php bin/magento maintenance:enable
$ php bin/magento setup:upgrade --keep-generated
$ php bin/magento maintenance:disable
$ php bin/magento indexer:reindex
$ php bin/magento setup:di:compile
$ php bin/magento cache:flush
Go back to Contents.
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
9. Product images location:
❏ pub
❏ media
❏ catalog
❏ product
❏ cache
❏ image
❏ 700x560
❏ beff4985b56e3afdbeabfc89641a458
❏ E9c3970ab036de70892d86c6d221
10. Theme images location:
❏ app
❏ design
❏ frontend
❏ Geedop
❏ Theme
❏ web
❏ images
❏ hand-pointing.png
❏ logo.png
❏ logo.svg
❏ logo1.png (black & white)
11. Updates: localhost → server
Once the desired changes are visible on localhost > Upload file(s) to server and go to
~path/Magento_root_directory:
$ rm -rf var/view_preprocessed/* var/cache/* var/page_cache/* pub/static/frontend/*
$ php bin/magento cache:flush
12. SMTP Configuration - Mageplaza Extension ~path/Magento_root_directory:
$composer require mageplaza/module-smtp
$php bin/magento setup:upgrade
$php bin/magento setup:static-content:deploy
$php bin /magento setup:di:compile
Go back to Contents.
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
13. Customize Email Templates > admin page http://youraddress/admin:
Marketing > Communications > Email Templates > Add New Template > Select
Template
> Load Template
14. Fill out the Template Information > Save Template
Go back to Contents.
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
15. Activate the new email templates for your Theme and upload Logo Image
Content > Design > Configuration > Edit > Transactional Emails
16. Insert your custom store emails
Stores > Settings > Configuration > General > Store Email Addresses > Save Config
Go back to Contents.
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
17. Configure the Simple Mail Transfer Protocol
Mageplaza > SMTP > Configuration > Save Config
18. Test your new email configuration
Go back to Contents.
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
Enable production mode:
On Magento root directory, run:
$ sudo rm -rf var/cache/* generated/metadata/* generated/code/* var/view_preprocessed/*
pub/static/frontend/* pub/static/adminhtml/*
$ sudo bin/magento setup:static-content:deploy --no-less --no-css -f
$ sudo bin/magento deploy:mode:set production --skip-compilation
$ sudo php bin/magento cache:flush
$ sudo php bin/magento cache:clean
$ sudo composer install
$ sudo php bin/magento setup:di:compile
$ sudo bin/magento setup:static-content:deploy -f
$ sudo bin/magento deploy:mode:show
Expected result:
Current application mode: production. (Note: Environment variables may override this value.)
$ sudo php bin/magento cache:status
Expected Current status:
config: 0
layout: 0
block_html: 0
collections: 0
reflection: 0
db_ddl: 0
eav: 0
customer_notification: 0
config_integration: 0
config_integration_api: 0
full_page: 0
translate: 0
config_webservice: 0
If this result doesn't show up, run:
$ sudo php bin/magento cache:disable
Go back to Contents.
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
*Overridden files (gray) from app/code/Magento/ and custom files (black):
app
design
frontend
Geedop
Theme
➔ Catalog
layout
catalog_category_view.xml
catalog_product_view.xml
templates
category
description.phtml (gallery of
products on category page
description, sensible to
applied filters)
products.phtml
(subcategories displaying if
they exist, before showing
the product list)
source
carousel.phtml
(lightslider for desktop
and tablet screen)
carouselmobile.phtml
(lightslider for mobile
screen)
product
addtocart.phtml (add to
quote)
list.phtml (product list →
table responsive to “group
by” and set of attributes)
Go back to Contents.
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
listsearch.phtml (displays
categories on results page
instead of products)
➔ CatalogSearch
layout
catalogsearch_result_index.xml
(listsearch.phtml is declared in this
file)
➔ Checkout
layout
checkout_cart_index.xml (blocks
declared for every form in the
checkout page)
templates
success.phtml (“thank you for your
request” → recommended for you
block)
cart
noItems.phtml (“you quote is
empty” → recommended for
you block)
➔ Contact
templates
form.phtml (Customer Help custom
form)
➔ Email
templates
email
footer.html (custom email for
quote request)
header.html (custom header
and logo for quote request
email)
Go back to Contents.
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
web
logo_email.png
➔ view-Magento_luma
frontend
templates
navigation.phtml (filters open
by default and multiple
selection allowed. Sub-
categories side-menu for
category page and exception
for search results: filtered
categories side-menu)
➔ Payment (Shopping labels → Quoting labels)
➔ Sales
templates
email
order_new.html (Custom
email for quote requests)
➔ Search
templates
form.mini.phtml (“Search for a
product”)
➔ Theme
layout
cms_index_index.xml (mapbox css
and js are called here)
default_head_blocks.xml (css files)
default.xml (main structure > header
content > header links)
Go back to Contents.
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
templates
html
footer.phtml (footer links for
each page)
topmenu.phtml (headerlinks
on side menu for mobile
screen: Home, Customer
Help, How to Quote)
home.html (home page
blocks and two columns
layout)
breadcrumbs.phtml (home
page symbol ‘house’)
bestsellerhome.phtml (home page
‘best sellers’)
bestsellers.phtml (cms/category
pages “recommended for you” block)
categories.phtml (home page
categories grid before bestsellers
block)
mapbox.phtml (home page map,
links may need to be updated from
mapbox account)
catmenu.phtml (categories layered
navigation on left column for home
page).
subcatmenu.phtml (subcategories
layered navigation for left column on
category page when it has
subcategories).
catsearch.phtml (side-menu for
search page, displays only the
categories that have the matching
products).
helpbutton.phtml (contains
How-to-quote and Customer-help
pages links)
Go back to Contents.
Magento 2.2.2: Theme Implementation & Maintenance Guide Author: Tania Molina
Geedop, LLC. June 2018
Theme Cascade Style Sheets:
Geedop
Theme
web
css
geedstyles.css (general css)
print.css
styles-l.css (min screen width: 768px)
Styles-m.css
Lightslider sources:
img
controls.png
css
lightslider.css
js
lightslider.js
Go back to Contents.
