|
Our CORE templates display Home Specials in the form of a carousel by default, similar to the homepage carousel module we offer. However, this display option may not work for every merchant. Some merchants would prefer to have all of their home specials visible at one time, or they may prefer a more static home page. Because of this, this article goes over how you can edit your store's home page to display them in a grid fashion as products typically do on a category page.
Please note that this article is aimed at merchants with non-modified home.html files. If you are using a modified or custom template, or an older template altogether, these instructions may not be accurate for your store.
Important
This article does go over modifying your store's HTML code. If you are not comfortable with doing so, we do recommend looking into our Webmaster service. For fee, one of our Webmasters can make an adjustment such as this for you. Please keep this in mind as our Support Team can not troubleshoot modifications made to the code.
To start, we first need to access the template's HTML code for the home page. To do so:
- Log into your Online Store Manager
- Go to Settings > Design > Themes & Styles
- Navigate to Edit Template
- Click on Open Template Editor
- On the following page, scroll down to home.html
- Click on the home.html file to access its code
Note
If home.html is not visible here, use the dropdown menu in the top right of the template editor screen. In this menu, select templates/common-core. In this list of files, you will find the home.html file and you can proceed from here.
Within this file, we will need to replace a section of code. With your keyboard, you can press CTRL and F and look for FEATURE_MENU. You will find a block of code that looks like the following screenshot:
Highlight this entire section starting and ending with the two FEATURE_MENU tags, and we are going to replace it with the following:
<!--START: FEATURE_MENU-->
<!--START: CATEGORY_ITEMS-->
<div class="owl-carousel product-items product-items-[product-cols-number]">
<!--START: ITEM_TEMPLATE_0-->
<div class="product-carousel"> [product_items]</div>
<!--END: ITEM_TEMPLATE_0-->
</div>
<!--END: CATEGORY_ITEMS-->
<style>
.tabs-nav li:first-child a{opacity: 1;pointer-events: auto;}
@media (max-width:767px){
.tabs-nav li:first-child{display:block;}
}
</style>
<!--END: FEATURE_MENU-->
After doing so, save your changes. Once this has been done, you should now see your Home Specials displayed without a carousel.
Important
Please keep in mind that the Store Manager will save the last ten versions of any HTML file. With this, you can revert back to an earlier version if code is adjusted incorrectly and has adverse effects. As it only saves the last ten versions, you may also want to consider copying any HTML into a local file for preservation as well.
You can further customize aspects such as the sorting, amount of products on display, and more using the Store Settings. See our article here for more information.
|