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.

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>

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>

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>

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.

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>

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>

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>
<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>
We use necessary cookies to make our site work. We'd also like to set optional cookies to help us improve it. We won't set optional cookies unless you enable them. Using this tool will set a cookie on your device to remember your preferences.
Necessary cookies enable core functionality such as security, network management, and accessibility. You may disable these by changing your browser settings, but this may affect how the website functions.
| Name | Description |
|---|---|
| PHPSESSID | Preserves the visitor's session state across page requests. |
| form_key | Protects visitor's data from Cross-Site Request Forgery Attacks. |
| guest-view | Stores the Order ID that guest shoppers use to retrieve their order status. Used in “Orders and Returns” widgets. |
| login_redirect | Preserves the destination page the customer was loading before being directed to log in. |
| mage-banners-cache-storage | Stores banner content locally to improve performance. |
| mage-cache-sessid | The value of this cookie triggers the cleanup of local cache storage. |
| mage-cache-storage | Local storage of visitor-specific content that enables ecommerce functions. |
| mage-cache-storage-section-invalidation | Forces local storage of specific content sections that should be invalidated. |
| mage-messages | Tracks error messages and other notifications that are shown to the user, such as the cookie consent message, and various error messages. The message is deleted from the cookie after it is shown to the shopper. |
| private_content_version | Appends a random, unique number and time to pages with customer content to prevent them from being cached on the server. |
| section_data_ids | Stores customer-specific information related to shopper-initiated actions such as display wish list, checkout information, etc. |
| user_allowed_save_cookie, cookie_consent |
Stores the user's cookie consent state for the current domain. |
| X-Magento-Vary | Configuration setting that improves performance when using Varnish static content caching. |
| _gcl_au | |
| __stripe_mid | |
| __stripe_sid |
Preference cookies are used to store settings and information that changes the website look and functionality.
| Name | Description |
|---|---|
| easybanner | Preserves the visitor's preferences and stats regarding shown popup blocks. |
| store | Remembers the user's selected language version of a website. |
Marketing cookies help us provide our visitors with relevant content, browsing history, and product recommendations.
| Name | Description |
|---|---|
| product_data_storage | Stores configuration for product data related to Recently Viewed / Compared Products. |
| recently_compared_product | Stores product IDs of recently compared products. |
| recently_compared_product_previous | Stores product IDs of previously compared products for easy navigation. |
| recently_viewed_product | Stores product IDs of recently viewed products for easy navigation. |
| recently_viewed_product_previous | Stores product IDs of recently previously viewed products for easy navigation. |
| _fbp | This cookie is installed by Facebook to store and track visits across websites. |
| _gac_UA-38683016-1 | |
| _gcl_aw | |
| _gcl_gs |
Analytics cookies help us understand how our visitors interact with the website. It helps us understand the number of visitors, where the visitors are coming from, and the pages they navigate. The cookies collect this data and are reported anonymously.
| Name | Description |
|---|---|
| add_to_cart, remove_from_cart |
Used by Google Tag Manager. Captures the product SKU, name, price and quantity added or removed from the cart, and makes the information available for future integration by third-party scripts. |
| dc_gtm_* | Throttles request rate when Google Analytics is deployed with Google Tag Manager. |
| _fbc | |
| _ga, _gat, _gid, _ga_*, _gat_* |
This cookie is installed by Google Analytics. They are used to collect information about how visitors use our website. We use the information to compile reports and to help us improve the website. The cookies collect information in a way that does not directly identify anyone. |