Magento 2. Force homepage

Feb 4, 2021 by Peter D.

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

A page title is Argento Force. Url - home.

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

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

The homepage uses a bunch of widgets with a broad range of customization options.

Currently, the homepage is built with jumbotrons. We used a similar approach in Argento Flat. Read the Jumbotron customization article.
You can structure elements with Argento grid system classes (col-md-8, col-md-4 etc) as well.

Slider

magento 2 homepage slider

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

Slider identifier is argento_force.

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_force"}}
</div>

Hot Stuff

magento 2 homepage block

Row with “Hot Stuff” links is a CMS Block. Block identifier is hot-stuff. And its content is structured with the Argento grid system.

Once again we recommend to disable WYSIWYG editor before editing this block.

Here the piece of CMS Page content that adds this row:

<div class="jumbotron hero no-padding">
    <div class="container">
        {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="hot-stuff"}}
    </div>
</div>

CMS Block hot-stuff original content

<div class="block block-hot-stuff">
    <div class="block-title">
        <strong role="heading" aria-level="2">Hot Stuff</strong>
    </div>
    <div class="block-content a-center">
        <div class="argento-grid-container">
            <div class="argento-grid">
                <div class="col-md-4">
                    <div class="image"><a href='{{store direct_url="running-collection.html"}}' title="2019 Running Collection"><img src='{{media url="wysiwyg/hot-stuff/running.png"}}' alt="2019 Running Collection"></a></div>
                    <h3>2019 Running Collection</h3>
                    <div class="description">Save on our running shorts collection</div>
                    <div class="shop-now-link"><a class="link-accent dark" href='{{store direct_url="running-collection.html"}}' title="Shop Now">Shop Now</a></div>
                </div>
                <div class="col-md-4">
                    <div class="image"><a href='{{store direct_url="outfit.html"}}' title="Find Your Perfect Outfit"><img src='{{media url="wysiwyg/hot-stuff/outfit.png"}}' alt="Find Your Perfect Outfit"></a></div>
                    <h3>Find Your Perfect Outfit</h3>
                    <div class="description">From accessories to t-shirts and more</div>
                    <div class="shop-now-link"><a class="link-accent dark" href='{{store direct_url="outfit.html"}}' title="Shop Now">Shop Now</a></div>
                </div>
                <div class="col-md-4">
                    <div class="image"><a href='{{store direct_url="highlight/onsale.html"}}' title="Save At Least 30%"><img src='{{media url="wysiwyg/hot-stuff/sale.png"}}' alt="Save At Least 30%"></a></div>
                    <h3>Save At Least 30%</h3>
                    <div class="description">Save on our dhb Aeron shorts collection</div>
                    <div class="shop-now-link"><a class="link-accent dark" href='{{store direct_url="highlight/onsale.html"}}' title="Shop Now">Shop Now</a></div>
                </div>
            </div>
        </div>
    </div>
</div>

‘Ready to Go’ categories

magento 2 homepage categories

This row shows the first four top-level categories of your store and encourages the user to browse them. It is powered by Easy Catalog Images module. Visit the module page to learn more.

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

<div class="jumbotron no-padding block-categories">
    <div class="bg-text">Ready to Go</div>
    {{widget type="Swissup\Easycatalogimg\Block\Widget\SubcategoriesList" category_count="4" subcategory_count="0" column_count="4" show_image="1" image_width="500" image_height="500" template="Swissup_Easycatalogimg::list.phtml" hide_when_filter_is_used="0" layout_style="force"}}
    <div class="departments-link"><a class="button" title="All Departments" href='{{store direct_url="departments"}}'><span>All Departments</span></a></div>
</div>

If you want to change text “Ready to Go”, you have to edit text in:

<div class="bg-text">...</div>

Try to keep this phrase short so it fits into a block.

Bestsellers

magento 2 homepage bestsellers

This section represents the best selling goods at your store. It is powered by a Highlight module. The module has plenty of different widgets and some pages even. Visit the module page to learn more.

Note: If your store has been established recently, so there is no clear best selling stuff, then you may show here new products. Or some featured ones. The Highlight module has a widget for every possible product list.

Here is a piece of CMS Page content for bestsellers:

<div class="jumbotron hero block-bestsellers">
    <div class="container">
        {{widget type="Swissup\Highlight\Block\ProductList\All" title="Bestsellers" carousel="0" products_count="4" column_count="4" page_count="1" order="default" dir="asc" template="Magento_Catalog::product/list.phtml" mode="grid" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^]^]" hide_when_filter_is_used="0" period="P1Y" show_page_link="1" page_link_position="bottom" page_link_title="Shop Now" page_url="highlight/bestsellers.html" min_popularity="1"}}
    </div>
</div>

New collection

magento 2 homepage banner

The New Collection is a banner created with EasyBanner module. Visit the module page to see the full list of features.

This banner is assigned to placeholder argento_force_home

Here is code that adds a placeholder on the homepage:

<div class="jumbotron no-padding">
    <div class="a-center block-homepage-banner">
        {{widget type="Swissup\Easybanner\Block\Placeholder" placeholder="argento_force_home"}}
    </div>
</div>

Get There With Us

magento 2 homepage block

This is one more CMS Block. Here you can describe why you are doing your business. For instance, it allows you to:

Show goals and top priority of your company
Add payment security badges
Guarantee quality and moneyback
Say about your shipping policy

Block identifier is benefits. Content is structured with Argento grid system.

Here is a piece of CMS Page content with the block.

<div class="jumbotron hero">
    <div class="container">
        {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="benefits"}}
    </div>
</div>

CMS Block ‘benefits’ original content

<div class="block block-benefits">
    <div class="block-title">
        <strong role="heading" aria-level="2">Get There With Us</strong>
    </div>
    <div class="block-content">
        <div class="argento-grid">
            <div class="a-center a-center-block description"><p>We are cyclists, runners, swimmers, triathletes, hikers, and gym-goers. We understand how it feels to GET THERE - that feeling when, whatever your sport, whatever your level, you go further, push harder, get better, and the impossible suddenly feels like home.</p><p>Like you, we’ve overcome our barriers, including the snooze button. Mostly. We feel the same rush of hitting that peak, climbing that gradient, and beating that time. We’ve had days we’d like to forget but still can’t wait to get out there again. We savor those training days with our mates, and the solitary sessions that clear our heads.</p></div>
            <div class="col-md-4 item">
                <i class="force-icon force-icon-bigger force-shield"></i>
                <h4>Secure Payments</h4>
                <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div>
            </div>
            <div class="col-md-4 item">
                <i class="force-icon force-icon-bigger force-100percent"></i>
                <h4>Money Back</h4>
                <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div>
            </div>
            <div class="col-md-4 item">
                <i class="force-icon force-icon-bigger force-delivery"></i>
                <h4>Fast Delivery</h4>
                <div class="text">Order online, avoid the shipping costs, and collect your items from any of our 56 stores nationwide, whenever and wherever is most convenient for you.</div>
            </div>
        </div>
    </div>
</div>

Brands

This row is a slider with brands your store offers. This is an Easy slide widget wrapped in HTML.

Slider identifier is argento_force_brands. You can find this slider in the Admin grid and modify it according to your needs.

Here is a piece of CMS Page content for this section:

<div class="jumbotron hero block-brands">
    <div class="container">
        <div class="block block-carousel">
            <div class="block-title">
                <strong role="heading" aria-level="3">Brands</strong>
            </div>
            <div class="block-content">
                {{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_force_brands"}}
            </div>
        </div>
    </div>
</div>

Whole homepage content

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

<div class="jumbotron hero no-padding">
    <div class="container">
        {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="hot-stuff"}}
    </div>
</div>

<div class="jumbotron no-padding block-categories">
    <div class="bg-text">Ready to Go</div>
    {{widget type="Swissup\Easycatalogimg\Block\Widget\SubcategoriesList" category_count="4" subcategory_count="0" column_count="4" show_image="1" image_width="500" image_height="500" template="Swissup_Easycatalogimg::list.phtml" hide_when_filter_is_used="0" link_as_button="true"}}
    <div class="departments-link"><a class="button" title="All Departments" href='{{store direct_url="departments"}}'><span>All Departments</span></a></div>
</div>

<div class="jumbotron hero block-bestsellers">
    <div class="container">
        {{widget type="Swissup\Highlight\Block\ProductList\All" title="Bestsellers" carousel="0" products_count="4" column_count="4" page_count="1" order="default" dir="asc" template="Magento_Catalog::product/list.phtml" mode="grid" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^]^]" hide_when_filter_is_used="0" period="P1Y" show_page_link="1" page_link_position="bottom" page_link_title="Shop Now" page_url="highlight/bestsellers.html" min_popularity="1"}}
    </div>
</div>

<div class="jumbotron no-padding">
    <div class="a-center block-homepage-banner">
        {{widget type="Swissup\Easybanner\Block\Placeholder" placeholder="argento_force_home"}}
    </div>
</div>

<div class="jumbotron hero">
    <div class="container">
        {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="benefits"}}
    </div>
</div>

<div class="jumbotron hero block-brands">
    <div class="container">
        <div class="block block-carousel">
            <div class="block-title">
                <strong role="heading" aria-level="3">Brands</strong>
            </div>
            <div class="block-content">
                {{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_force_brands"}}
            </div>
        </div>
    </div>
</div>