Magento 2. Luxury homepage

Back

Argento Luxury homepage is a standard Magento’s CMS page. You can edit it at Magento Admin > Content > Pages > Argento Luxury page.

The homepage uses a bunch of widgets with a broad range of customization options. You can structure elements with Argento grid system classes (col-md-8, col-md-4 etc) as well.

In the KB article, we show you the main elements of the homepage. Here you will see the code you can always use to find and edit the required element faster.

Note: We recommend disabling the WYSIWYG editor before you start editing homepage content.

Slider

The homepage slider is powered by Easy Slider. Visit the module page to see the list of customization options.

Here is a piece of CMS Page content that adds slider:

<div class="jumbotron jumbotron-image no-padding">
    {{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_luxury"}}
</div>

Category Images

Categories list is powered by the Easy Catalog Images module. In order to change columns count, image width, and other options you can use Magento built-in widget editor. You can manually change the appropriate attribute in the code above.

Note: Please, upload images in Catalog > Categories > [your category] for thumbnails field. They should have dimensions: width="382px" and height="565px".

Here the piece of CMS Page content:

<div class="jumbotron no-padding">
    <div class="container">
        <div class="row">
            {{widget type="Swissup\Easycatalogimg\Block\Widget\SubcategoriesList" category_count="5" column_count="5" show_image="1" image_width="382" image_height="565" resize_image="0" template="Swissup_Easycatalogimg::list.phtml"}}
        </div>
    </div>
</div>

New Products

New Products block is powered by Product Highlight module. To change block options you can use Magento’s built-in widget editor. You also can manually change the appropriate attribute in the code below:

<div class="jumbotron">
    <div class="container">
        <div class="row">
            {{widget type="Swissup\Highlight\Block\ProductList\NewList" title="New Arrivals" products_count="4" column_count="4" order="default" dir="desc" template="Swissup_Highlight::product/list.phtml" mode="grid" show_page_link="1" page_link_position="bottom" page_link_title="Shop Now"}}
        </div>
    </div>
</div>

Wide Banner

We created the wide banner with the EasyBanner module. The banner is available to edit at Magento Admin > Swissup > Easy Banner > Manage Banners page.

Here is a piece of content:

<div class="row jumbotron">
    <div class="hero block-homepage-banner">
        {{widget type="Swissup\Easybanner\Block\Placeholder" placeholder="argento_luxury_home"}}
    </div>
</div>

Benefits block

<div class="jumbotron hero">
    <div class="container">
        <div class="block block-benefits">
            <div class="block-content argento-grid">
                <div class="col-md-4">
                    <div class="luxury-icon luxury-icon-big luxury-cart-alt"></div>
                    <h4>Free Delivery</h4>
                    <p>Our store delivers an extensive and expertly curated selection of fashion and lifestyle offerings.</p>
                </div>
                <div class="col-md-4">
                    <div class="luxury-icon luxury-icon-big luxury-lock"></div>
                    <h4>Secure Payment</h4>
                    <p>Our store delivers an extensive and expertly curated selection of fashion and lifestyle offerings.</p>
                </div>
                <div class="col-md-4">
                    <div class="luxury-icon luxury-icon-big luxury-headphones"></div>
                    <h4>24h Customer Service</h4>
                    <p>Our store delivers an extensive and expertly curated selection of fashion and lifestyle offerings.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Brand's slider

A slider is powered by Slick Carousel module.

Here is code that adds a slider to Luxury homepage:

<div class="jumbotron jumbotron-slick">
    <div class="container">
        <div class="block widget block-carousel">
            <div class="block-content">
                <div class="slick-slider" data-mage-init='{"slick": {"slidesToShow": 6, "slidesToScroll": 1, "dots": false, "autoplay": true, "variableWidth": true, "swipeToSlide": true}}'>
                    <a href="#"><img src="{{view url='images/catalog/brands/gucci.jpg'}}" alt="" width="150" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/lv.jpg'}}" alt="" width="100" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/ck.jpg'}}" alt="" width="130" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/chanel.jpg'}}" alt="" width="170" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/guess.jpg'}}" alt="" width="130" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/versace.jpg'}}" alt="" width="145" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/gucci.jpg'}}" alt="" width="150" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/lv.jpg'}}" alt="" width="100" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/ck.jpg'}}" alt="" width="130" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/chanel.jpg'}}" alt="" width="170" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/guess.jpg'}}" alt="" width="130" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/versace.jpg'}}" alt="" width="145" height="80"/></a>
                </div>
            </div>
        </div>
    </div>
</div>

Whole homepage content

<div class="jumbotron jumbotron-image no-padding">
    {{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_luxury"}}
</div>
<div class="jumbotron no-padding">
    <div class="container">
        <div class="row">
            {{widget type="Swissup\Easycatalogimg\Block\Widget\SubcategoriesList" category_count="5" column_count="5" show_image="1" image_width="382" image_height="565" resize_image="0" template="Swissup_Easycatalogimg::list.phtml"}}
        </div>
    </div>
</div>
<div class="jumbotron">
    <div class="container">
        <div class="row">
            {{widget type="Swissup\Highlight\Block\ProductList\NewList" title="New Arrivals" products_count="4" column_count="4" order="default" dir="desc" template="Swissup_Highlight::product/list.phtml" mode="grid" show_page_link="1" page_link_position="bottom" page_link_title="Shop Now"}}
        </div>
    </div>
</div>
<div class="row jumbotron">
    <div class="hero block-homepage-banner">
        {{widget type="Swissup\Easybanner\Block\Placeholder" placeholder="argento_luxury_home"}}
    </div>
</div>
<div class="jumbotron hero">
    <div class="container">
        <div class="block block-benefits">
            <div class="block-content argento-grid">
                <div class="col-md-4">
                    <div class="luxury-icon luxury-icon-big luxury-cart-alt"></div>
                    <h4>Free Delivery</h4>
                    <p>Our store delivers an extensive and expertly curated selection of fashion and lifestyle offerings.</p>
                </div>
                <div class="col-md-4">
                    <div class="luxury-icon luxury-icon-big luxury-lock"></div>
                    <h4>Secure Payment</h4>
                    <p>Our store delivers an extensive and expertly curated selection of fashion and lifestyle offerings.</p>
                </div>
                <div class="col-md-4">
                    <div class="luxury-icon luxury-icon-big luxury-headphones"></div>
                    <h4>24h Customer Service</h4>
                    <p>Our store delivers an extensive and expertly curated selection of fashion and lifestyle offerings.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="jumbotron jumbotron-slick">
    <div class="container">
        <div class="block widget block-carousel">
            <div class="block-content">
                <div class="slick-slider" data-mage-init='{"slick": {"slidesToShow": 6, "slidesToScroll": 1, "dots": false, "autoplay": true, "variableWidth": true, "swipeToSlide": true}}'>
                    <a href="#"><img src="{{view url='images/catalog/brands/gucci.jpg'}}" alt="" width="150" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/lv.jpg'}}" alt="" width="100" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/ck.jpg'}}" alt="" width="130" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/chanel.jpg'}}" alt="" width="170" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/guess.jpg'}}" alt="" width="130" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/versace.jpg'}}" alt="" width="145" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/gucci.jpg'}}" alt="" width="150" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/lv.jpg'}}" alt="" width="100" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/ck.jpg'}}" alt="" width="130" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/chanel.jpg'}}" alt="" width="170" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/guess.jpg'}}" alt="" width="130" height="80"/></a>
                    <a href="#"><img src="{{view url='images/catalog/brands/versace.jpg'}}" alt="" width="145" height="80"/></a>
                </div>
            </div>
        </div>
    </div>
</div>