If you're not ready to invest in online store provider services like Shopify or SquareSpace, you can consider setting up a storefront by yourself on your own website. To do this, you'll need an attractive way of displaying multiple products on a page. What better way to do this than a grid?

Untitled-1.tif
Download

Step 1: The CSS

The first step in creating our product grid/gallery is to style it using Cascading Style Sheets (CSS). Don't worry if you have little knowledge of HTML and CSS, you don't need to know these languages for this Instructable (although they are very useful).

The CSS for the product grid can be added to your website in two ways.

1. an external style sheet

2. an internal style sheet

External style sheet:

Open up Notepad, and paste in the following code: (it's available here: [http://pastebin.com/b5nzGfbg]) Note that I did not come up with this code, it's actually from [http://alijafarian.com/responsive-image-grids-using-css/]

Then, save as [filenameofyourchoice].css. I saved it as cool.css.

Now, upload this file to a webhost, and get a direct link to it. Assuming you have a website, you will be able to upload it to your server via FTP, and get a direct link. If you cannot do so, get a Dropbox account, (here's a referral link for signing up), upload the file to your Public folder, and get a direct link. Or if that's not possible, sign up for Tumblr, and head over to [https://www.tumblr.com/themes/upload_static_file]. Tumblr lets you host theme assets for free.

In this case, I've uploaded my file to Tumblr, to get the following link: [http://static.tumblr.com/xtiqrla/c4Qn872fi/cool.css]

Now, open up your website page (an HTML document), and paste the following code between the <head> and </head> tags: <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/xtiqrla/c4Qn872fi/cool.css"> Be sure to substitute the URL in the above code with the URL to your CSS file.

I don't have an already made website document on hand, so I'm creating a new one in Notepad, and pasting the above code between the <head> and </head> and tags, as afore-mentioned (seen below):

Internal style sheet:

Alternatively, you could just paste in the CSS code in your website HTML document between the <head> and </head>, and inside a pair of <style> </style> tags.

Great, that's the CSS done.

Step 2: The HTML Code

Now it's time to actually show the gallery on the webpage. To do this, paste in the following code between the and tags in your website HTML document. The code is available from [http://pastebin.com/nUhdXUat]. Now your overall HTML document looks like this:

Now, we want to see what this looks like in a webbrowser. But wait, the links to the images [img src=....] are relative. Substitute all of them with a sample image link, e.g. [http://upload.wikimedia.org/wikipedia/commons/9/99...] so that each time it reads <img src="http://upload.wikimedia.org/wikipedia/commons/9/99...>

Great, now open up the webpage in a webbrowser, so now it looks like this:

Step 3: The Product Buttons

The grid in this Instructable is not very useful for displaying your products well, yet. It's time to start customizing. Take a look at the code from the previous step.

To get started displaying a product, substitute the above URL with a URL that points to your product image. Substitute 'Image Title' with your product's name. Keep the description between the <p.> tags if you wish, but the following is better; forget the description and add some neat product buttons e.g. download, support page etc. This simplifies your product grid and makes it more appealing.

To do this, head back to your HTML file in Notepad, and add this line of code. right after (from PureCSS.io):

PureCSS allows you to embed buttons on your website. To have pretty icons to go with your buttons, you'll need to add the following as well right after the above code (from fortawesome.github.io):

Look around the above two sites, you'll find a ton of customization options, but for now, substitute the whole <p.> line with the following:

Save your HTML document, open it up in a webbrowser and voila! A cool checkout button on one of your products!

Take a look at the FontAwesome site (above), where you can just about choose any icon for your button.

Step 4: The Final Result

The final file's source code can be found here: [http://pastebin.com/FhMB4jw3]. Copy it to Notepad, save it as an HTML file and then open it in a webbrowser to see the result (from the previous step).

Credits for this Instructable go to:

> http://alijafarian.com/responsive-image-grids-using-css/

> http://purecss.io/

> http://fortawesome.github.io/

To fully utilize this product-grid setup, make sure to link the Checkout, or other buttons to pages with detail about your product, or a payment processing page. It's something I'm trying to do on my personal blog, (under construction): http://daftinsights.tumblr.com/shop

I hope you found this Instructable informative and helpful. Good luck on your work!