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​.