Magento 2. Stripes homepage
Argento Force homepage is a standard Magento’s CMS page. You can edit it at Magento Admin > Content > Pages > Argento Stripes 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">
{{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_stripes"}}
</div>
Top Banners
We created top banners with the Easy Banner module. You can edit banners at Magento Admin > Swissup > Easy Banner > Manage Banners page.
Here the piece of CMS Page content:
{{widget type="Swissup\Easybanner\Block\Placeholder" placeholder="argento_stripes_home_top"}}
Bestsellers
Bestsellers blocks are powered by the Product Highlight module using Magazine Layout. 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.
{{widget type="Swissup\Highlight\Block\ProductList\All" title="Top Selling<br><span>Headphones</span>" carousel="1" products_count="8" column_count="4" page_count="1" order="default" dir="asc" template="Magento_Catalog::product/list.phtml" mode="grid" hide_when_filter_is_used="0" css_class="hl-magazine hl-blue hl-contain" title_image_url="pub/media/highlight/argento/stripes/headphones.png" show_page_link="1" page_url="highlight/bestsellers.html" page_link_position="top" page_link_title="View All"}}
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.
Bottom Banners
This section is powered by the Easy Banner module. Visit the module page to learn more.
The banners are available to edit at Magento Admin > Swissup > Easy Banner > Manage Banners page.
Here is a piece of content:
{{widget type="Swissup\Easybanner\Block\Placeholder" placeholder="argento_stripes_home_bottom"}}
Brand's slider
It is a slider with brands your store offers. Easyslide widget wrapped in HTML.
Slider identifier is argento_stripes_brands.
Here is code that adds a slider to the homepage:
<div class="block row widget block-promo block-carousel">
<div class="block-content">
{{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_stripes_brands"}}
</div>
</div>
Whole homepage content
<div class="jumbotron jumbotron-image no-padding">
{{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_stripes"}}
</div>
{{widget type="Swissup\Easybanner\Block\Placeholder" placeholder="argento_stripes_home_top"}}
{{widget type="Swissup\Highlight\Block\ProductList\All" title="Top Selling<br><span>Headphones</span>" carousel="1" products_count="8" column_count="4" page_count="1" order="default" dir="asc" template="Magento_Catalog::product/list.phtml" mode="grid" hide_when_filter_is_used="0" css_class="hl-magazine hl-blue hl-contain" title_image_url="highlight/argento/stripes/headphones.png" show_page_link="1" page_url="highlight/bestsellers.html" page_link_position="top" page_link_title="View All"}}
{{widget type="Swissup\Highlight\Block\ProductList\All" title="Top Selling<br><span>Smartphones</span>" carousel="1" products_count="8" column_count="4" page_count="1" order="default" dir="asc" template="Magento_Catalog::product/list.phtml" mode="grid" hide_when_filter_is_used="0" css_class="hl-magazine hl-orange hl-contain" title_image_url="highlight/argento/stripes/smartphones.png" show_page_link="1" page_url="highlight/bestsellers.html" page_link_position="top" page_link_title="View All"}}
{{widget type="Swissup\Highlight\Block\ProductList\All" title="Top Selling<br><span>Activity<br>Trackers</span>" carousel="1" products_count="8" column_count="4" page_count="1" order="default" dir="asc" template="Magento_Catalog::product/list.phtml" mode="grid" hide_when_filter_is_used="0" css_class="hl-magazine hl-green hl-contain" title_image_url="highlight/argento/stripes/activity.png" show_page_link="1" page_url="highlight/bestsellers.html" page_link_position="top" page_link_title="View All"}}
{{widget type="Swissup\Highlight\Block\ProductList\All" title="Top Selling<br><span>Smart TVs</span>" carousel="1" products_count="8" column_count="4" page_count="1" order="default" dir="asc" template="Magento_Catalog::product/list.phtml" mode="grid" hide_when_filter_is_used="0" css_class="hl-magazine hl-purple hl-contain" title_image_url="highlight/argento/stripes/smart-tv.png" show_page_link="1" page_url="highlight/bestsellers.html" page_link_position="top" page_link_title="View All"}}
{{widget type="Swissup\Highlight\Block\ProductList\All" title="Top Selling<br><span>Home<br>Electronics</span>" carousel="1" products_count="8" column_count="4" page_count="1" order="default" dir="asc" template="Magento_Catalog::product/list.phtml" mode="grid" hide_when_filter_is_used="0" css_class="hl-magazine hl-red hl-contain" title_image_url="highlight/argento/stripes/electronics.png" show_page_link="1" page_url="highlight/bestsellers.html" page_link_position="top" page_link_title="View All"}}
{{widget type="Swissup\Easybanner\Block\Placeholder" placeholder="argento_stripes_home_bottom"}}
<div class="block row widget block-promo block-carousel">
<div class="block-content">
{{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_stripes_brands"}}
</div>
</div>