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

1. 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. 1. Go toStores > Configuration > General > Design > Design Theme
   2. Select the Pagayo Theme
   3. Click Safe Config

1. 1. Go toStores > Configuration > General > Design > Header
   2. Click Choose file
   3. Add the width and the height of your logo
   4. Click Safe Config

1. 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. 1. Go toStores > Configuration > General > Design > Design Theme
   2. Select the Pagayo Theme
   3. Click Safe Config

SOCIAL FOOTER

1. 1. Go toContent > Blocksand add new block

1. Add Block Title “Social Footer
2. Add Identifier social-footer
3. Select your store view (almost always “All Store Views”)
4. Make sure you select “Hide Editor”
5. Add Content
   <div class="row">
<div class="footer1">
<div class="col-md-8 newsletter">
<p class="newsletter_title">NEWSLETTER</p>
{{block class="Magento\Framework\View\Element\Template" name="subscribe" template="Magento_Newsletter::html/subscribe.phtml"}}</div>
<div class="col-md-4 social">
<p class="social_title">FOLLOW US</p>
<a href="#"><em class="fa fa-facebook-square"></em></a> <a href="#"><em class="fa fa-pinterest-square"></em></a> <em class="fa fa-twitter-square"></em></a> <a href="#"><em class="fa fa-google-plus-square"></em></a> <a href="#"><em class="fa fa-instagram"></em></a> <a href="#"><em class="fa fa-youtube-square"></em></a></div>
</div>
</div>
6. Click Save Block

MAIN FOOTER

1. 1. Go toContent > Blocksand add new block

1. Add Block Title “Main Footer
2. Add Identifier main-footer
3. Select your store view (almost always “All Store Views”)
4. Make sure you select “Hide Editor”
5. Add Content
   <div class="row footer2">
<div class="col-md-3"><span>My Account</span>
<div class="block-content">
<ul class="links">
<li><em class="fa fa-caret-right"></em><a title="About us" href="#">About us</a></li>
<li><em class="fa fa-caret-right"></em><a title="Contact us" href="#">Contact us</a></li>
<li><em class="fa fa-caret-right"></em><a title="My account" href="#">My account</a></li>
<li><em class="fa fa-caret-right"></em><a title="Orders history" href="#">Orders history</a></li>
<li><em class="fa fa-caret-right"></em><a title="Advanced search" href="#">Advanced search</a></li>
</ul>
<p class="block1"><span>Pagayo Customer Review</span>
</br></br>
Amazing theme and amazing support. We have had a few questions and custom changes we wanted to make and the team at Pagayo were so fast to respond and help us. Would definitely recommend this theme and this company!</br></br></p>
</div>
</div>
<div class="col-md-3"><span>Contact Information</span>
<div class="block-content">
<ul class="contact-info">
<li><em class="fa fa-map-marker"></em>
<p><strong>Address:</strong><br />123 Street Name, City, England</p>
</li>
<li><em class="fa fa-phone"></em>
<p><strong>Phone:</strong><br />(123) 456-7890</p>
</li>
<li><em class="fa fa-envelope-o"></em>
<p><strong>Email:</strong><br /><a href="mailto:mail@example.com">mail@example.com</a></p>
</li>
<li><em class="fa fa-clock-o"></em>
<p><strong>Working Days/Hours:</strong><br />Mon - Sun / 9:00AM - 8:00PM</p>
</li>
</ul>
</div>
{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="all_products" products_count="5" template="product/widget/column/new_names_list.phtml"}}
</div>
<div class="col-md-3"><span>Main Features</span>
<div class="block-content">
<ul class="features">
<li><em class="fa fa-thumbs-o-up"></em><a href="#">Super Fast Magento Theme</a></li>
<li><em class="fa fa-thumbs-o-up"></em><a href="#">1st Fully working Ajax Theme</a></li>
<li><em class="fa fa-thumbs-o-up"></em><a href="#">10 Unique Homepage Layouts</a></li>
<li><em class="fa fa-thumbs-o-up"></em><a href="#">Powerful Admin Panel</a></li>
<li><em class="fa fa-thumbs-o-up"></em><a href="#">Mobile &amp; Retina Optimized</a></li>
</ul>
</div>
<img src="{{media url="wysiwyg/pt205/pt205-agent.png"}}" alt="" class="img-circle" />
</div>
<div class="col-md-3 returns">
{{widget type="Magento\Sales\Block\Widget\Guest\Form" template="widget/guest/form.phtml"}}
</div>
</div>

PAYMENT FOOTER

1. 1. Go toContent > Blocksand add new block

1. Add Block Title “Payment Footer
2. Add Identifier payment-footer
3. Select your store view (almost always “All Store Views”)
4. Make sure you select “Hide Editor”
5. Add Content
   <div class="row">
<div class="col-md-8">
<div class="footer_last">
<ul class="links">
<li class="first"><a href="/about-magento-demo-store/">About Us</a></li>
<li><a href="/customer-service/">Customer Service</a></li>
<li><a href="/contacts/">Contact Us</a></li>
<li><a href="/catalogsearch/advanced/">Advanced Search</a></li>
<li><a href="/catalogsearch/term/popular/">Search Terms</a></li>
<li><a href="/catalog/seo_sitemap/category/">Sitemap</a></li>
<li><a class="link-rss" href="/rss/">RSS</a></li>
<li><a href="/sales/guest/form/">Orders and Returns</a></li>
<li class="last privacy"><a href="/privacy-policy-cookie-restriction-mode/">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="footer-payments">
<ul class="payment-icons">
<li><img src="{{media url="wysiwyg/pt205/icon-payment-paypal.png"}}" alt="payPal" /></li>
&nbsp;
<li><img src="{{media url="wysiwyg/pt205/icon-payment-visa.png"}}" alt="Visa" /></li>
&nbsp;
<li><img src="{{media url="wysiwyg/pt205/icon-payment-mastercard.png"}}" alt="MasterCard" /></li>
&nbsp;
<li><img src="{{media url="wysiwyg/pt205/icon-payment-amex.png"}}" alt="Amercian Express" /></li>
</ul>
</div>
</div>
</div>

SOCIAL FOOTER WIDGET

1. 1. Go toContent > Widgetsand add new widget
   2. Select Type “CMS Static Block”
   3. Select Design Package/Theme “Pagayo Theme”

1. 1. Click “Continue”
   2. Add Widget Title “Social Footer
   3. Select your store view (almost always “All Store Views”)
   4. Display on Select “All Pages”
   5. Container Select “Before Page Footer”

1. Click “Widget Options”
2. Click “Select Block”
3. Select the block called Social Footer

MAIN FOOTER WIDGET

1. 1. Go toContent > Widgetsand add new widget
   2. Select Type “CMS Static Block”
   3. Select Design Package/Theme “Pagayo Theme”

1. Click “Continue”
2. Add Widget Title “Main Footer”
3. Select your store view (almost always “All Store Views”)
4. Display on Select “All Pages”
5. Container Select “Page Footer Container”
6. Click “Widget Options”
7. Click “Select Block”
8. Select the block called Main Footer

PAYMENT FOOTER WIDGET

1. 1. Go toContent > Widgetsand add new widget
   2. Select Type “CMS Payment Block”
   3. Select Design Package/Theme “Pagayo Theme”

1. Click “Continue”
2. Add Widget Title “Payment Footer”
3. Select your store view (almost always “All Store Views”)
4. Display on Select “All Pages”
5. Container Select “Page Bottom”
6. Click “Widget Options”
7. Click “Select Block”
8. Select the block called Payment Footer

1. 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. 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”

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”

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

Font Awesome Icons

<em class="fa fa-money dollar-green"></em>

<em class="fa fa-automobile dollar-green"></em>

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