Argento Flat homepage is a standard Magento’s CMS page. You can edit it at Magento Admin > Content > Pages > Argento Flat page.
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. You can structure elements with Argento grid system classes (col-md-8, col-md-4 etc) as well.
Slider
The homepage slider is powered by Easy Slider. Visit the module page to see the full list of customization options.
Here is a piece of CMS Page content that adds slider:
<div class="jumbotron jumbotron-image no-padding">
<div class="cover cover-pastel"><div class="left triangle"></div><div class="right triangle"></div></div>
<div class="container">
{{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_flat"}}
</div>
</div>
Category Images
Categories list is powered by Easy Catalog Images. You can use Magento’s built-in widget editor to change column count, image width, and other options. You can also manually change the appropriate attribute in the code above.
<div class="jumbotron jumbotron-pastel jumbotron-inverse no-padding-top hero">
<div class="container">
<div class="row">
<div class="block-title">
<strong>Shop Our Store for</strong>
<p class="subtitle no-margin">more than 25,000 health products including vitamins, herbs, sport supplements, diet and much more!</p>
</div>
{{widget type="Swissup\Easycatalogimg\Block\Widget\SubcategoriesList" category_count="4" subcategory_count="1" column_count="4" show_image="1" image_width="200" image_height="200" template="Swissup_Easycatalogimg::list.phtml"}}
</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="jumbotron jumbotron-pastel-alt no-padding">
<div class="container">
{{widget type="Swissup\Easybanner\Block\Placeholder" placeholder="argento_flat_home_wide"}}
</div>
</div>
New, Special and Bestselling Products
Product listing blocks are powered by the Product Highlight module. Visit the module page to learn more. To change block options you can use Magento’s built-in widget editor, or you can manually change appropriate attribute in the code below.
<div class="jumbotron hero">
<div class="container">
{{widget type="Swissup\Highlight\Block\ProductList\NewList" title="New Products" 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="top" page_link_title="Browse all new products at our store »"}}
</div>
</div>
<div class="jumbotron jumbotron-pattern hero">
<div class="cover"><div class="left triangle"></div><div class="right triangle"></div></div>
<div class="stub"></div>
<div class="container">
{{widget type="Swissup\Highlight\Block\ProductList\Onsale" title="Special Offer" 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="top" page_link_title="Browse all on sale products at out store »"}}
</div>
</div>
<div class="jumbotron hero no-padding-top">
<div class="container">
{{widget type="Swissup\Highlight\Block\ProductList\Bestsellers" title="Bestsellers" products_count="4" column_count="4" template="Swissup_Highlight::product/list.phtml" mode="grid" period="P6M" show_page_link="1" page_link_position="top" page_link_title="Browse all bestseller products at our store »" min_popularity="1"}}
</div>
</div>
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.
Why Choose Us
Here is a piece of content:
<div class="jumbotron hero">
<div class="stub"></div>
<div class="container">
<div class="block block-benefits">
<div class="block-title wow fadeInDown" data-wow-duration="0.5s"><strong>Why choose us</strong></div>
<div class="block-content argento-grid">
<div class="col-md-3 wow bounceInLeft" data-wow-delay="0.2s">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-tags fa-stack-1x fa-inverse"></i></span>
<h3>Low Pricing</h3>
<p>Meet all types for your body's needs, that are healthy for you and for your pocket. Click for big savings.</p>
</div>
<div class="col-md-3 wow bounceInLeft">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-cubes fa-stack-1x fa-inverse"></i></span>
<h3>Huge Selection</h3>
<p>Make your healthy choice using the huge variety of vitamins and sports nutrition. Let your transformation go on.</p>
</div>
<div class="col-md-3 wow bounceInRight">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-birthday-cake fa-stack-1x fa-inverse"></i></span>
<h3>Reward Points</h3>
<p>Get reward points by boosting your healthy activity online. Stay with us and gain more.</p>
</div>
<div class="col-md-3 wow bounceInRight" data-wow-delay="0.2s">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-comments fa-stack-1x fa-inverse"></i></span>
<h3>Ask Experts</h3>
<p>Have a question? Ask an expert and get complete online support. We are open for you.</p>
</div>
</div>
</div>
</div>
</div>
About Us
Here is a piece of content:
<div class="jumbotron jumbotron-bright jumbotron-inverse hero">
<div class="stub"></div>
<div class="container">
<div class="block block-about wow fadeIn" data-wow-delay="0.2s">
<div class="block-title"><strong>About us</strong></div>
<div class="block-content">
<p>
Natural Herbs company was found with idea to ensure users more natural healthy care.
The company is making name for itself as an advanced store with reliable service. Our online store works with leaders worldwide producing vitamins, herbs, and sport nutrition supplements. We provide high-quality products that suit your needs and fit your budget.
</p>
<p>
Natural Herbs is aiming to become your full-service friend. We focus on keeping you motivated to improve your health. Build your own body with us! We'll help you to reach your goal.
</p>
</div>
</div>
</div>
</div>
Brand's slider
Here is code that adds a slider to the homepage:
<div class="jumbotron hero">
<div class="stub"></div>
<div class="cover cover-dark"><div class="left triangle"></div><div class="right triangle"></div></div>
<div class="container">
<div class="block row widget block-carousel">
<div class="block-title">
<strong>Popular Brands</strong>
<p class="subtitle">check most trusted brands from more then 50 leading manufactures presented at our store.</p>
</div>
<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/life_extension.gif'}}" alt="Life Extension"/></a>
<a href="#"><img src="{{view url='images/catalog/brands/gnc.gif'}}" alt="GNC"/></a>
...
</div>
</div>
</div>
</div>
</div>
Whole homepage content
<div class="jumbotron jumbotron-image no-padding">
<div class="cover cover-pastel"><div class="left triangle"></div><div class="right triangle"></div></div>
<div class="container">
{{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_flat"}}
</div>
</div>
<div class="jumbotron jumbotron-pastel jumbotron-inverse no-padding-top hero">
<div class="container">
<div class="row">
<div class="block-title">
<strong>Shop Our Store for</strong>
<p class="subtitle no-margin">more than 25,000 health products including vitamins, herbs, sport supplements, diet and much more!</p>
</div>
{{widget type="Swissup\Easycatalogimg\Block\Widget\SubcategoriesList" category_count="4" subcategory_count="1" column_count="4" show_image="1" image_width="200" image_height="200" template="Swissup_Easycatalogimg::list.phtml"}}
</div>
</div>
</div>
<div class="jumbotron jumbotron-pastel-alt no-padding">
<div class="container">
{{widget type="Swissup\Easybanner\Block\Placeholder" placeholder="argento_flat_home_wide"}}
</div>
</div>
<div class="jumbotron hero">
<div class="container">
{{widget type="Swissup\Highlight\Block\ProductList\NewList" title="New Products" 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="top" page_link_title="Browse all new products at our store »"}}
</div>
</div>
<div class="jumbotron jumbotron-pattern hero">
<div class="cover"><div class="left triangle"></div><div class="right triangle"></div></div>
<div class="stub"></div>
<div class="container">
{{widget type="Swissup\Highlight\Block\ProductList\Onsale" title="Special Offer" 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="top" page_link_title="Browse all on sale products at out store »"}}
</div>
</div>
<div class="jumbotron hero no-padding-top">
<div class="container">
{{widget type="Swissup\Highlight\Block\ProductList\Bestsellers" title="Bestsellers" products_count="4" column_count="4" template="Swissup_Highlight::product/list.phtml" mode="grid" period="P6M" show_page_link="1" page_link_position="top" page_link_title="Browse all bestseller products at our store »" min_popularity="1"}}
</div>
</div>
<div class="jumbotron hero">
<div class="stub"></div>
<div class="container">
<div class="block block-benefits">
<div class="block-title wow fadeInDown" data-wow-duration="0.5s"><strong>Why choose us</strong></div>
<div class="block-content argento-grid">
<div class="col-md-3 wow bounceInLeft" data-wow-delay="0.2s">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-tags fa-stack-1x fa-inverse"></i></span>
<h3>Low Pricing</h3>
<p>Meet all types for your body's needs, that are healthy for you and for your pocket. Click for big savings.</p>
</div>
<div class="col-md-3 wow bounceInLeft">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-cubes fa-stack-1x fa-inverse"></i></span>
<h3>Huge Selection</h3>
<p>Make your healthy choice using the huge variety of vitamins and sports nutrition. Let your transformation go on.</p>
</div>
<div class="col-md-3 wow bounceInRight">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-birthday-cake fa-stack-1x fa-inverse"></i></span>
<h3>Reward Points</h3>
<p>Get reward points by boosting your healthy activity online. Stay with us and gain more.</p>
</div>
<div class="col-md-3 wow bounceInRight" data-wow-delay="0.2s">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-comments fa-stack-1x fa-inverse"></i></span>
<h3>Ask Experts</h3>
<p>Have a question? Ask an expert and get complete online support. We are open for you.</p>
</div>
</div>
</div>
</div>
</div>
<div class="jumbotron jumbotron-bright jumbotron-inverse hero">
<div class="stub"></div>
<div class="container">
<div class="block block-about wow fadeIn" data-wow-delay="0.2s">
<div class="block-title"><strong>About us</strong></div>
<div class="block-content">
<p>
Natural Herbs company was found with idea to ensure users more natural healthy care.
The company is making name for itself as an advanced store with reliable service. Our online store works with leaders worldwide producing vitamins, herbs, and sport nutrition supplements. We provide high-quality products that suit your needs and fit your budget.
</p>
<p>
Natural Herbs is aiming to become your full-service friend. We focus on keeping you motivated to improve your health. Build your own body with us! We'll help you to reach your goal.
</p>
</div>
</div>
</div>
</div>
<div class="jumbotron hero">
<div class="stub"></div>
<div class="cover cover-dark"><div class="left triangle"></div><div class="right triangle"></div></div>
<div class="container">
<div class="block row widget block-carousel">
<div class="block-title">
<strong>Popular Brands</strong>
<p class="subtitle">check most trusted brands from more then 50 leading manufactures presented at our store.</p>
</div>
<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/life_extension.gif'}}" alt="Life Extension"/></a>
<a href="#"><img src="{{view url='images/catalog/brands/gnc.gif'}}" alt="GNC"/></a>
<a href="#"><img src="{{view url='images/catalog/brands/mega_food.gif'}}" alt="Mega Food" /></a>
<a href="#"><img src="{{view url='images/catalog/brands/nordic_naturals.gif'}}" alt="Nordic Naturals"/></a>
<a href="#"><img src="{{view url='images/catalog/brands/life_extension.gif'}}" alt="Life Extension"/></a>
<a href="#"><img src="{{view url='images/catalog/brands/gnc.gif'}}" alt="GNC"/></a>
<a href="#"><img src="{{view url='images/catalog/brands/mega_food.gif'}}" alt="Mega Food"/></a>
<a href="#"><img src="{{view url='images/catalog/brands/nordic_naturals.gif'}}" alt="Nordic Naturals"/></a>
<a href="#"><img src="{{view url='images/catalog/brands/life_extension.gif'}}" alt="Life Extension"/></a>
<a href="#"><img src="{{view url='images/catalog/brands/gnc.gif'}}" alt="GNC"/></a>
<a href="#"><img src="{{view url='images/catalog/brands/mega_food.gif'}}" alt="Mega Food"/></a>
<a href="#"><img src="{{view url='images/catalog/brands/nordic_naturals.gif'}}" alt="Nordic Naturals"/></a>
</div>
</div>
</div>
</div>
</div>
