Hugo data driven ecommerce

I’m a little confused on specifics of using hugo with snipcart. I’m working on building out an ecommerce site for a client and I’m really looking to Hugo as I like many of it’s features and the entire concept of not having to deal with a database or cms, etc. Got some experience in static site generators but this would be only my second go with hugo.

Anyway, looking at this from snipcart https://snipcart.com/blog/hugo-tutorial-static-site-ecommerce I’m seeing that they’re adding product details to a single json file. However looking at other themes and reading here I’m seeing that pages can’t be created based on data. In all honesty, I didn’t try that tutorial as I’m still just researching.

So my question is, can a json file be utilized with a layout to build many pages for products. Or should I be creating a page per product in the content directory. As an aside, anybody write a CSV to yaml toml or json script yet?

Next question is, am I barking up the wrong tree with trying to use Hugo for a larger ecommerce site with many products, categories, manufacturers, etc. The site is for a distributor of large equipment so freight shipping in snipcart or whatever backend we use will also be an issue.

thanks for any thoughts or comments…

Ask snipcart. Your questions are answered on their end, they know how to use Hugo for their product.

Thanks for the reply… my question really is more geared towards Hugo though. Specifically how to create product pages in mass. Individual content pages vs data driven. But I will give them a shot

thanks

Currently as you’ve seen Hugo does NOT support the automatic generation of pages from data.

This is the most anticipated feature at the moment and you may want to track:

However there is a workaround mentioned here: JSON as data for websites - #4 by alexandros

The linked technique can be automated even further by generating a Custom Output Format to create the CLI commands for the pages’ generation and then execute it as part of the website build.

With the above said:

It all depends on the complexity of the ecommerce site. Someone else made a Hugo ecommerce site by using Stripe as the backend because they found Snipcart to be expensive.

One can easily create a Google Merchant XML Feed per product with Hugo and populate a Stripe backend or even a Facebook Product Catalogue or whatever…

I am in the process of doing all of the above myself. I still have a few blanks that I need to work out like connecting Stripe payments with a JS cart for the Hugo site… but we’ll see…

There is no tutorial out there about creating a Hugo ecommerce website step-by-step.
We have to figure it out ourselves…

3 Likes

Thanks for the reply… I guess where I’m struggling to understand is more of the technical aspects as to why it isn’t possible. I saw/read something where a json file was used to generate content on a page so maybe that’s my disconnect, oh well. I’ll take your word for it as you’re obviously more experienced than I.

Looking at your solution is intriguing and I’ll be sure to dig into it more. I did notice that some of the ecommerce themes I found are using files in the content directory for each product, so with that I think that might be route I go. As an alternative to formatting all this I could probably just whip up a quick python script to convert my CSV data to a new file for each product.

It’s good to know that merchant feeds are possible with Hugo. Honestly the thought hadn’t grossed my mind.

I’m probably a bit confused on the issue with snipcarts pricing though. $10 a month doesn’t seem that unreasonable to me. Sure a percentage would be nice at the low end and a percentage at the high end is not so easy to swallow. I guess it depends on perspective.

Getting into the complexity of the site, I expect a substantial number of products, 100s definitely, thousands, probably not. As far as complexity, we’re probably looking at a 4 or 5 manufactures and a few categories at most. Later I’ll probably want to add filtering (if it’s even possible, if not I could write a page) that targets specific industry uses. Products rarely change, we don’t track inventory on hand at our level as the manufacturers just don’t have this capability yet. The client is sort of the middleman and acts as a retailer/distributor to the end business.

I didn’t expect a tutorial and look forward to a challenge. It’s good to finally be on the cutting edge, feel like I’ve been a day late and a dollar sure my entire life :laughing:

Good luck with your project as well, I’d be interested to hear how it works out for you.

And it all just clicked for why snipcarts tutorial worked and I didn’t make the connection… They’re demo is a single page…

Now it makes sense…

They also charge 2% on sales. Add up the payment gateway fees and you will be having a missing chunk of around 6% per product along with the 10$ monthly fee.

Current JamStack JS cart solutions have a heavy overhead for small businesses.

The Python Script sounds good.

More or less that is the spirit. Think of Hugo as a storefront. You can enter product details in a CSV and output it to Markdown files.

The Google Product Feed that can be outputted with Hugo will be the means to populate the database of a remote dynamic backend.

Then you need some kind of a JS cart in the Hugo storefront that sends a POST request with the product’s SKU to the backend.

That is more or less the way to use Hugo as a cheap storefront.

If one thinks about the costs involved running a Shopify or Squarespace shop there can be vast savings.

The catch is that currently there are NO real e-commerce themes for Hugo.

The ones listed in the Hugo Themes directory are pretty limited in their scope and rely on Snipcart.

So one needs to do the heavy lifting by themselves.

2 Likes

Also here is a variation of the technique, that I linked to above, that creates pages from a CSV with the Hugo CLI.

Thanks for the reply again. Got tied up with the honey do list this weekend.

I must have misunderstood SnipCart’s pricing. I thought it was 2% unless under $500 then $10 a month only. Still the percentage is kind of a kick in the pants when it doesn’t include processing.

I’m looking into maybe how we can do this with stripe. Bonus points if we can do stripe with ACH but thats for some more playing.

On another note… is it possible to use data to fill in certain info about a product, or does this fall into the realm of what we’re still waiting for. I’ve got so much reading to do to catch up on where everything is at but I’d be perfectly okay with content files, but I think it’d be cool to be able to pull pricing in from a json file or other config file, having it all in once place would be nice.

I did manage to write a pretty dirty script to create all of the content files for about 800 products. Worked pretty well, it’s probably not useful to anyone else as it’s very specific to this manufacturer.

You can use getJSON to pull in the data or you could use a data fir that’s pulled in (e.g gulp)

See: Tutorial: Netlify + Stripe serverless eCommerce on the JAMstack - #2 by divinerites

1 Like