A simple and modern solution for the need to build a grocery website. This free grocery html template is probably the simplest way you can have a stylish online presence, packed with loading speed, responsive and SEO-ready.
The template itself is a scaled down version of the Basic8 HTML template, which comes with a lot more features and documentation, but you can build a website with this free template as well.
Links: preview | download this free template
Sections
Most grocery websites don’t require too much content and functionality. The free grocery html template comes with the most used page structure items in this industry. Also, with the sections included in the free template, you have the flexibility to build a simple website that will ensure a stylish, modern online presence.
What are Sections?
These are the blocks of content that you can use to build your website with. In this free template, the top section is the header navigation. And right under it is the first content section – the one with the title and the three-column layout, with the picture in the middle and text on the sides.
Scrolling through this template, you’ll see that there are a few different sections that make up the entire content area of the page. There’s a fancy full background image with the parallax effect when scrolling, a quotes section and so on.
Full background image section
You can duplicate all sections in this template as needed to put in your content. So, this section with the full background image can be used several times to highlight special content.
It’s also a good visual cue or page break that can help your visitors scan and scroll your website’s pages. That helps them build a mind map of the page so that they scroll faster when they need to return to a previous part of the page.
Contact us section
Most websites have a contact info, or a contact option built in. This template packs in both features. There is a “Contact us” section that contains a form, which you can use to send visitor messages to your mailbox. And then there’s the “Our Location” section that you can use to signal your presence on a map, together with your address and contact information.
Reviews section
This might come in handy as social validation for your new customers. This multi-column section highlights quotes – that’s its purpose. Either from existing customers, your presence in the press or social media or to display awards.
Header and footer
These two sections at the top and bottom of the page are your main navigation items. We’ll detail a bit on each below, but we wanted to mention here that you can customize each of them to the structure you need.
The header and footer illustrated in this template might have a bit more than you need for a simple grocery html template. But it’s better to have these and to know how to use them than not.
Colors and fonts
This free template illustrates a light theme, simple template. We’ll describe here what to look for in the code so you can personalize it. You’ll see it’s easy to create a light or dark or mixed theme. All you need to know is that there are three main variables to personalize. And they all come with default values to help you get set up fast:
- Fonts
- Buttons and links color
- Sections background color
Fonts
Close to the top of the page, in the code, there’s the body tag where you can choose the type of font you want. This influences the overall look and feel of your page. There are two built-in fonts you can choose from: stylish and professional. Just change this value and it applies to all the text on the page.
Buttons and links color
Changing the color of the links and buttons is as easy as for changing the font above. There are six colors already built into the template: red, green, blue, orange, pink and cyan. To use your own colors, you can easily change a few values in the css files.
Sections background color
This is a setting for each section – you can switch through white, light, grey, dark, and black. In this free grocery html template, the sections alternate between two light theme values – white and grey.
Customize these with a few tweaks in the css files if you wish. You can set your own colors for the links and buttons or for the sections’ backgrounds. And the same goes for the fonts.
It’s easy – you can change these predefined values in the css files to use any other background colors.
There are a couple other useful parameters available for sections that set the top and bottom space for each section. We recommend using plenty of space to give your website a simple, elegant and modern look.
The speed and performance of the free grocery HTML template
As fast as a page can possibly be
The free grocery html template is built with plain html5 + css3, written simply and cleanly. This comes with high speed as browsers and search engines can read the code lightning fast. And that translates into having your website loading super-fast in your visitors’ browsers. The template is also responsive and retina ready, which means that it will be displayed very well on mobile devices as well.
SEO-ready
Throughout the code you’ll see that the template includes the necessary metatags in the header and the attributes for images and links that help SEO. If you rely on search engines for sending visitors to your website, you might want to put in the effort to define your SEO strategy and fill in all these meta content that the search engines look for.
On top of the meta content, the template includes headings that guide you implicitly to keep titles short and relevant to your page topic. That’s useful for your visitors also. Because most visitors don’t like to read, these succinct titles will be useful when scanning your pages for both your visitors and search engines.
Free grocery HTML template – conclusions
This is a well-suited solution for a small-scale grocery website that you can get online fast. It’s easy to customize due to the already predefined look & feel attributes and it’s lightning speed when loading in your visitors browsers. Probably one of its best assets – it’s modern and fresh.