|
Please Note
The information in this article is provided solely as a courtesy and to offer basic instructions on making very simple changes to your store's design templates.
Please understand that - regardless of how simple the changes may be - HTML changes and troubleshooting fall outside the scope of our support department. The Shift4Shop support team is neither trained, qualified, nor allowed to make these changes for you. The boundary of our scope in this matter is limited to providing these instructions and helping you reset the template if the changes don’t work as you wanted.
If you are uncomfortable with making changes to your site’s HTML, please look into our Experts page for a list of recommended designers and developers we recommend.
Thank you for your understanding
By default, the Core themes will display Home Page products in one column due to the narrowed size of the screen.
(Note: Wider screens will display multiple columns, but the standard phone screen wil display it in one)
If you wish to override this behavior, and have the Home Page Product displayed in two columns on all phones, you will need to edit the Core theme's default CSS using the following steps:
- Log into your Shift4Shop Online Store Manager
- Using the left hand navigation menu, go to Settings >Design >Themes & Styles
- Once there, click on the "More" button located at the top right of the page and select "Edit Template (HTML)"
You will now be in the theme's Template Editor page. Look towards the upper right-hand side of the page and you will see a drop down menu.
- Click on the "Select Folder..." drop down menu and select template/[your-theme-folder]/css
Tip
The correct entry for your theme folder will be highlighted in yellow.
If you have followed the above steps properly, you will now be at your theme folder's CSS folder. You should see one file named "default.css" in the list. Click this file to edit it.
- Scroll all the way down to the very end of the CSS file and copy/paste the following to the end of the CSS file.:
Note
Be sure to add this to the very end of the CSS file.
@media (max-width: 767px)
{
.product-items.product-items-1 .product-item, .product-items.product-items-2 .product-item, .product-items.product-items-3 .product-item, .product-items.product-items-4 .product-item, .product-items.product-items-5 .product-item, .product-items.product-items-6 .product-item {
float: left;
width: 50%;
padding: 0 10px;
}
}
- Once done, click "Save" at the top right of the page to commit your changes.
The mobile view of your Core theme will now display home page products in two columns.
Note
You may need to clear the phone's browser cache to view the updates. Please refer to your phone's software manufactuer for directions on clearing the browser's cache.
|