Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Created: 14/10/2016 | Updated: 28/04/2020 | By: Magenest | Email: [email protected] | Support Portal: https://servicedesk.izysync.com/servicedesk/customer/portal/52/user/login?destination=portal%2F52

Table of Contents


Introduction

...

  • Magento Community Edition version 2.2 or newer.
  • Magento Enterprise Edition version 2.2 or newer.

 

 

...

Configuration

Enable the theme

...

(plus) After saving, clear the cache of Magento, go to System > Cache Management > Flush Magento Cache.

...


 

Apply sample data

(plus) On  On the admin sidebar, go toto Store > Configuration.

(plus) On the the Configuration page, under General tab, select Web.

(plus) Expand Default Pages section, in CMS Home Page field, select a default layout type for the homepage. There are two options: Home Page Rope Theme V1 and Home Page Rope Theme V2.

 page, under Magenest tab, select Rope Sample Data.

(plus) Magenest Sample Data For Rope Theme: select Simple Data ver 1.

(plus) Click on Save Config to (plus) Click on Save Config to save the settings.

...

 

Apply sample data

...

Image Added


Set the default home page

(plus) On  On the admin sidebar, go to Store > Configuration.

 

(plus) On the Configuration page, under Magenest General tab, select Rope Sample Data.

(plus) Magenest Sample Data For Rope Theme: select Simple Data ver 1.

Web.

(plus) Expand Default Pages section, in CMS Home Page field, select a default layout type for the homepage. There are two options: Home Page Rope Theme V1 and Home Page Rope Theme V2. 

(plus) Click on Save Config to save the settings.

Image Added

Image Removed 

...

Logo, Favicon and CopyRight

...

    • Click on Save Configuration button to save the settings. 


...

Home page configuration

...

To set the configuration for Homepage, on the admin sidebar, navigate to Content > Pages. Go to the Pages list, there are two available pages.

...

 

(plus) Home Page Rope Theme V1

 

  • Content

...



Code Block
titleHomePage Content 1
<div class="block-slide slide-style1 owl-carousel">
<div class="item"><a><img src="{{view url='images/theme/slide/slide1.jpg'}}" alt="slide1"> </a></div>
<div class="item"><a><img src="{{view url='images/theme/slide/slide2.jpg'}}" alt="slide1"> </a></div>
</div>
<div class="block-colums-text">
<div class="container">
<div class="row">
<div class="col"><span class="title">Free Shipping</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col"><span class="title">Money Back</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col"><span class="title">Support 24/7</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
<div class="block-products style1 container">{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="new_products" products_count="10" template="Magento_Catalog::product/widget/new/content/new_grid.phtml" }}</div>
<div class="banner-sale" style="background-image: url('{{view url='images/theme/banner/sale.jpg'}}">
<div class="container"><span class="title">UP TO 30%</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi</p>
</div>
</div>
<div class="block-products style1 container">{{widget type="Magenest\Widget\Block\Product\Widget\HotSalesWidget" title="hot sale" products_count="10" template="Magenest_Widget::product/widget/sales/content/hot_sales_grid.phtml" }}</div>
<div class="block-client-say">
<div class="container" style="background-image: url('{{view url='images/theme/banner/bg-client-say.png'}}">
<div class="block-title">Client Say</div>
<div class="block-content">
<div class="owl-client-say owl-carousel">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin em ipsum dolor sit amet, consectetur adipiscing elit. Proin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pro</p>
<span class="name">- Kristy - </span></div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin em ipsum dolor sit amet, consectetur adipiscing elit. Proin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pro</p>
<span class="name">- Kristy - </span></div>
</div>
</div>
</div>
</div>

 

  • Design

...



Code Block
titleLayout Update XML
<!--
    <referenceContainer name="right">
        <action method="unsetChild"><argument name="alias" xsi:type="string">right.reports.product.viewed</argument></action>
        <action method="unsetChild"><argument name="alias" xsi:type="string">right.reports.product.compared</argument></action>
    </referenceContainer>-->

...

(plus) Home Page Rope Theme V2

  • Content

Code Block
titleHomepage content 2
<div class="block-slide slide-style2 owl-carousel">
<div class="item"><a><img src="{{view url='images/theme/slide/slide2.jpg'}}" alt="slide1"> </a></div>
<div class="item"><a><img src="{{view url='images/theme/slide/slide2.jpg'}}" alt="slide1"> </a></div>
</div>
<div class="block-banner-style1"><a class="item"><img src="{{view url='images/theme/banner/banner2-1.jpg'}}"></a> <a class="item"><img src="{{view url='images/theme/banner/banner2-2.jpg'}}"></a> <a class="item"><img src="{{view url='images/theme/banner/banner2-3.jpg'}}"></a></div>
<div class="block-products style1 container">{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="new_products" products_count="10" template="Magento_Catalog::product/widget/new/content/new_grid.phtml" }}</div>
<div class="block-products style1 container">&nbsp;</div>

Homepage Layout 2


...

Category Gird

Desktop

Mobile

Tablet

Image Modified

Category List

Desktop

Mobile

Tablet

Image Modified

 

  • Product details page

Desktop

Mobile

Tablet

Image Modified

 

 

  • Home page layout 1

Desktop

Mobile

Tablet

Image Added

Image Added

Image Added

 

  • Homepage layout 2
DesktopMobileTablet
Image AddedImage AddedImage RemovedImage RemovedImage AddedImage Removed

 

...

Update

 

  • When a bug fix or new feature is released, we will provide you with the product's new package.
  • All you need to do is repeating the above installing steps and uploading the package onto your store. The code will automatically override.
  • Flush the config cache. Your store and newly installed module should be working as expected.

...