E-commerce and Bootstrap - html

I have been creating websites in html and Wordpress for a while, but recently I was asked to look at a website that had been created very badly with a bootstrap based CMS, they were ripped off big time.
I understand that Bootstrap is basically a collection of styles etc but what I do not seem to be able to find is how to integrate a bootstrap template that I will purchase into a website with e-commerce functionality. The template has all the needed shop pages etc I just need to know how I go about making the online shop using the template.


Bootstrap is not a collection of styles -- its a templating system that modifies the layout of the web page content based on the users 'viewport'. in other words it changes the page design for smaller screens like mobile smart phones and tablets. its awesome for e-commerce especially considering the rising growth of sales over mobile,
but otherwise you don't make an online shop with a template, its kind of the other way around. so unless you really want to learn e-commerce programming, consider using a dedicated service like http://www.shopify.com If you want to integrate e-commerce with an existing website, http://www.foxycart.com is very good.


If you are moving it to a completely new setup and are comfortable using WordPress you could use that as a CMS and add e-commerce functionality using WooCommerce. It's trivial to add the plugin and configure it, and customising it is straightforward as it has a pretty good template hierarchy system that makes it easy to override using your own custom templates. It also uses a comprehensive set of filters and actions so custom functionality can be added in future if required.
In terms of adapting an existing theme (Bootstrap-based or otherwise) to work with WooCommerce it's just a case of creating additional templates if required and adding some additional CSS if need be. I'd recommend doing that using a child theme so that the parent theme can be updated in the future without overriding any of your customisations.
The advantage of this setup is that you're working on a platform you're comfortable with (WordPress) and there's a fair amount of support and articles available to help you along. The client would also benefit as it's a pretty popular solution, so they shouldn't have any trouble finding devs/or agencies to work on it in the future (just in case you aren't available).
One potential disadvantage is the WC can be a bit sluggish; I'd recommend not being cheap when it comes to your choice of hosts. I've used TSO before and would recommend them.

Related

Are you able to use Material UI to style a Shopify website?

I am getting ready to build out a shopify storefront, but I have never done so before and have some questions. I like how easy it is to build a mobile and desktop view utilizing Material UI, I have found some articles online that seems to indicate people have done so in the past but I also seem to recall reading in their docs CSS frameworks like Bootstrap or Tailwind are what is supported on Shopify. In an ideal world I would like to be able to use Next.js / React with SASS and Material UI for styling, essentially just using shopify for their ecommerce solution and as a CMS. Alternatively if sticking with Hydrogen is the preferred solution would I be able to remove tailwind and still use MUI?

You have to remember that Shopify is 100% HTML, JS and CSS. How you choose to approach your storefront is just a combination of that, in ways you are comfortable with. You get to choose everything in there, knowing you manage your data with Shopify.
It also depends on your skill. You can leverage the Hydrogen and get away with almost anything your skills can provide, or you can let Shopify do most of the work, leaving you to just tinker with CSS.
In all cases, you are free as a bird to pick your CSS. Shopify chains you to nothing.

Styling Specific Pages or Elements of a Specific Page of a Wordpress Site with Tailwind CSS

I have an existing WordPress site that is running on a Front End Theme, Divi. This is a Major Site with almost 250k Visitors a Month and the Design and content is kind of getting old.
I'd started learning and practising to create my own sites using Gatsby and Strapi however, the commitment to rebuild this site again from scratch would be weeks if not months.
I googled up how to use Tailwind CSS on my WordPress site, the results were directing me in creating a new theme. but then I would have to use another plugin that would allow me to use multiple themes on a single site.
Can I instead use Tailwind and either Vanilla HTML or JSX on a page instead of going through the theme path. The changes that I'll be making are mostly front end based and honestly speaking Divi sucks in creating the design I'm trying to go ahead with.
The site I'm discussing is www.deltamotocorp.com and I would like to only make changes to certain elements on certain pages and slowly I could get approval for a complete rebuild for the same.
Thanks for your help in advance.
Cheers!

I would not recommend using a separate technology, such as tailwind-CSS for a site that has been built with standard CSS techniques. The reason is if anyone other than you would need to work on the site, it would make that person's life a misery. It also shows in the design.
The website does not look that outdated. I agree some elements could need adjustment. I found the site, although it looks very simple, is a bit disorganized.
Sometimes, taking on fixes is much more work. It's like buying pants 5 years ago and trying to change the style of pockets and zipper or width of the legs.
Give the project owner an idea what would need changing, cost, etc. and if really necessary, tell them a new site would not only be visually more pleasing and technologically more advanced, it could give the chance to organize it better, and the price would be less than fixing.
A better upgrade would be an e-commerce website with a search button, etc.
I hope you get the approval for a new site, but don't mish/mash things.
Keep it clean, keep it clear for others as well.

How to make a bootstrap site non-static?

I am currently developing static websites with bootstrap. However, I would like to try create some non-static websites so the client can update simple texts by themselfs.
What kind of tool would you recommend me to do so with? I would still like to use bootstrap for structure and design.
Thanks in advance!

What you're talking about is using a CMS (Content Management System). There are a number of ways to approach using Bootstrap's framework with a CMS.
One simple CMS you could offer your clients would be CushyCMS: https://www.cushycms.com. CushyCMS allows you to specify editable regions within an HTML file and a client would only be able to edit those areas. This is great if you want to leave most of the website static, but allow them to change a few things in there.
If you wanted to use Wordpress, there is a Bootstrap 3 theme for Wordpress located here: http://johntransue.net/bootstrap-3-wordpress-theme/. Wordpress is a much more complicated CMS, but it has a lot of power and capability. If you take some time to master Wordpress, you can use this basic Bootstrap 3 theme plus Wordpress and develop dynamic sites using Bootstrap.

how to mobilize an already existing website?

I'm trying to create a mobile version of my school website is there a simple way to do this? I'd rather not pay money to get some website to do it for me. can I load an external html template instead of just an external css file.

You can find many free and paid tools that help you create mobile sites. Have a look at this list. I am sure there are many more. If you don't want to pay a penny and you are planning to get some programming experience, you will need some knowledge on HTML5 and CSS.
If you plan for some big and fancy ideas, have a look at jQuery Mobile or Sencha Touch

Sure you can. However, this is no task that can be done automatically. You need to sit down and maybe create a new HTML and/or new CSS. But you can also just leave it as is, because you can view them on the most smartphones without any problems.

Are you using a Content Management System (CMS) such as Wordpress Joomla, or Drupal? If so, look for a responsive template created in the last year. Another option with some CMSs is a plugin/addon that renders a different template when detecting a mobile device.
If you aren't using a CMS it'll take more work, there are lots of responsive frameworks out there, the two big ones are Bootstrap and Zurb Foundation.

Easiest CMS to Theme?

I'm trying to create a theme for a CMS, but it's proving nearly impossible, as I have no understanding of PHP or ASP.NET. I can put a site together via CSS and HTML, but I want clients to be able to add and edit content themselves. I'm about ready to give up on designing one altogether and just use an existing theme.
I've had a go at trying to understand the inner workings of Wordpress, SilverStripe, Umbraco and Pixie, but the tutorials have left me confounded. Are there other CMSes I should be looking into for a more simplified theming process?
I'd really love to be able to just drop a chunk of code into the content area of a given HTML page, and make that region editable from a WYSIWYG front end that the client can log into. Is there such a thing?

Anything but DotNetNuke.

I'd recommend giving Wordpress another try.
I'm no web developer, just a an average Java/C# programmer who needed a web site and has some basic knowledge of HTML and CSS. What I did was find a theme that was similar to what I wanted, then started tweaking it incrementally. My theme is pretty basic, but before long I got a pretty good grasp of "The Loop" and printing out category and page links and such.

How about Movable Type?
You can (and should) edit the templates via the web interface, they are divided into separate modules, so you can concentrate on one area of the site, styling is of course handled via CSS.
It took me a few hours without any prior experience with this CMS to completely port a Wordpress theme to MT - I found the documentation very helpful and didn't even have to look elsewhere.
An awesome thing about MT - it generates static pages based on the templates you defined. Meaning, very low load on the server, you don't need to query the database on every request, etc. You could probably do the same/similar by activating the cache plugin (or is it built in now?) in Wordpress, but here it's the default modus operandi so it's more stable and integrated with the CMS.

Drupal with the zen theme (or a "lighter" version of it: Starkish theme) seems like a popular choice (and well deserved, too). It gives you a good starting point, it has great documentation and many modules available.
PS: I've added this as an additional answer so that it can be voted upon separately from my other suggestion - I just could not stop myself from bringing up the Drupal + zen combo :)

I worked with Joomla, it is really easy to have a theme for it without knowing any programming language. When you install it using a simple installer, there will be a folder named templates. There are three simple themes each in its own folder. Just copy one of them,change XML data for that theme ( just to name it and have some details, no programming ) and change the contents of CSS and HTMLs. every where you see something unrelated to HTML like , copy them!! Names are descriptive. so you can guess what do they do. give it a try!

I'd really love to be able to just drop a chunk of code into the content area of a given HTML page, and make that region editable from a WYSIWYG front end that the client can log into. Is there such a thing?
The only system I've come across with this kind of functionality is Perch.
Just create your website using HTML/CSS as usual and chuck in a few small php tags where you want editable content. These areas are then added to an admin area for your clients to edit.
The only drawback is it costs £35 per site - I don't know if there's a free/open-source CMS with this functionality...

It's difficult to say which CMS will be the best one for you (maybe your question should be made into a community wiki question).
I have a little experience with mojoPortal, and found it to be easily customizable. There's a lot of documentation about how to skin your CMS and there a lots of complete skins that you can use as a starting point.
There is also a demo site, where you can see how the CMS works for an end-user.

Take a look at Joomla. That was the first CMS that I really used, and I still think its templating engine is better than most of the others out there.
Its template system essentially lets you build a standard web page, and then use some simple tags to define where the content and modules would go. You can override the output of most external components and modules without too much trouble, and the vast library of third-party extensions should help you add a ton of functionality to your site without much coding on your part. Joomla also has a fairly easy-to-use administrative backend, so your clients should like it too.

This page for themeing Wordpress helped me a lot:
Theme Development
UPDATE
Xichael,
If you know HTML and CSS pretty well, but you just don't want to spend time learning the Wordpress framework, then I think this is a good option for you (again, I can relate to your situation). Use Wordpress with the new Toolbox starter theme. It's super minimal.
Toolbox: An HTML5 WordPress Starter Theme
Here's an example of what it looks like. Just "View page source" and go to town on the CSS!
I've thought about writing my own very simple CMS just for handling pages, i.e. you have some sort of template, and then a <div> in the middle to drop in text from a WYSIWYG editor. You could even use XML as the data store to eliminate having to set up a database to store the page content.
It would sort of be re-inventing the wheel though, because there is so much polished CMS software out there already, but it wouldn't be that hard because it wouldn't have 99% of the features most systems have. However, what happens when your client wants to add something in the future that's already standard in an existing CMS or plugin?

If you are looking for a simple CMS tool, CMSimple is as basic as it gets. A small PHP based CMS system that does not even require a database or XML.
"CMSimple is the ideal tool for a single user to maintain a website."
Original version here: CMSimple.ORG
Original plus 2 enhanced versions here: Download CMSimple
117KB content manangement system
no database required; the entire site is stored in a single HTML file
built in WYSIWYG
no modules or widgets, no blog, no comments, etc., just basic pages
uses PHP (but no database)
Get themes here: dotcomwebdesign.com