SwissUpLabs Logo

Homepage content

Absolute Theme homepage - is a standard Magento’s CMS page. You can edit it at Magento Admin > Content > Pages > Absolute page.

Let’s split content into separate rows to simplify homepage structure understanding:

Contents

  1. Slider
  2. New products
  3. Sidebar banners
  4. Featured products slider
  5. Whole homepage code

Slider

Slider

Code:

<div class="homepage-slider" >
    <div class="slick-slider" data-mage-init='{"slick": {"slidesToShow": 1, "slidesToScroll": 1, "dots": true, "autoplay": true, "rows": 0}}'>
        <div><img src="{{view url='images/slider/slide1.jpg'}}" alt=""/></div>
        <div><img src="{{view url='images/slider/slide2.jpg'}}" alt=""/></div>
        <div><img src="{{view url='images/slider/slide3.jpg'}}" alt=""/></div>
    </div>
</div>

New Products

Wide homepage banner

Code:

{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="new_products" products_count="8" template="product/widget/new/content/new_grid.phtml"}}

homepage_callout - is a CMS block. You can find it at Content > Blocks page.

Sidebar blocks

<div class="home-callouts">
    <div class="callout callout1">
        <img src="{{view url='images/callout1.png'}}" alt="" />
    </div>
    <div class="callout callout2">
        <img src="{{view url='images/callout2.png'}}" alt="" />
    </div>
</div>

This slider is a featured CMS Block. You can find it at Content > Blocks page.

Featured Products Slider

Code:

{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="Featured Products" products_count="10" template="product/featured.phtml" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^]^]" type_name="Catalog Products List"}}

Whole homepage code

Content:

<div class="homepage-slider">
    <div class="slick-slider" data-mage-init='{"slick": {"slidesToShow": 1, "slidesToScroll": 1, "dots": true, "autoplay": true, "rows": 0}}'>
        <div><img src="{{view url='images/slider/slide1.jpg'}}" alt=""/></div>
        <div><img src="{{view url='images/slider/slide2.jpg'}}" alt=""/></div>
        <div><img src="{{view url='images/slider/slide3.jpg'}}" alt=""/></div>
    </div>
</div>
{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="new_products" products_count="8" template="product/widget/new/content/new_grid.phtml"}}

Layout update XML:

<referenceContainer name="sidebar.additional">
    <block class="Magento\Cms\Block\Block" name="homepage_callout" before="-">
        <arguments>
            <argument name="block_id" xsi:type="string">homepage_callout</argument>
        </arguments>
    </block>
    <block class="Magento\Newsletter\Block\Subscribe" name="form.subscribe.right" as="subscribe_right" template="subscribe_right.phtml"/>
</referenceContainer>
<referenceContainer name="page.bottom">
    <block class="Magento\Cms\Block\Block" name="featured">
        <arguments>
            <argument name="block_id" xsi:type="string">featured</argument>
        </arguments>
    </block>
</referenceContainer>
Next up
Edit this Page