diff --git a/content/posts/giana.md b/content/posts/giana.md index fd250e6..a0344fb 100644 --- a/content/posts/giana.md +++ b/content/posts/giana.md @@ -1,6 +1,6 @@ +++ draft = true -date = 2020-01-11T18:55:07Z +date = 2019-12-29T18:55:07Z title = "Giana Boutique" description = "" slug = "" @@ -12,49 +12,51 @@ series = [] +++ Now, this site, is one of the earliest I ever worked upon. -It was my first time using WooCommerce and second time using WordPress to build a site. +It was my first time using WooCommerce and the second time using WordPress to build a site. -It is the site of Giana Boutique, an online ecommerce store. +It is the site of [Giana Boutique](https://giana.rayelliott.dev/), a fictitious, online ecommerce store. -Done quite some time ago. +This was done quite some time ago. Very early on in my career as a web developer. -Their [website](https://giana.rayelliott.dev/). +Nothing special, for an ecommerce site, was required. I used the WordPress plugin **WooCommerce** along with a pre-existing theme with a few modifications. -Uses pre-existing theme. +{{< +figure +src="/images/logos/woocommerce-logo.png" +alt="The WooCommerce logo." +class="logo woocommerce" +caption="" +>}} -Nothing special required. -Main customisations were little bits of CSS to tidy some things up -- created child theme based on a theme from [ModernThemes](https://modernthemes.net/) called Exchange. +The main customisations were little bits of CSS to tidy some things up -- so a child theme was created. +The parent theme is called **Exchange** and was obtained from [ModernThemes](https://modernthemes.net/). + +Now, why did I use the Exchange theme? -Now, onto why I used the Exchange theme? Well, it was pretty much entirely because it was free and I thought it looked okay. It was free and I felt it was a reasonable looking theme that I could use to get started with setting up a WordPress site to use WooCommerce. Would I use it again? -Certainly not. -I felt it was difficult to customise, although this may have been at least partly due to my inexperience. -Doesn't really offer much over Storefront, the WooCommerce theme from Automattic??? -Doesn't do much to set it above all the other similar looking WooCommerce sites around. -I feel it is perfectly fine for someone wishing to set up a WooCommerce with an acceptable theme quickly with little effort. -Not so good for developers. +I wouldn't. +The main reasons being: -Plugins used: +* I felt it was difficult to customise, although this may have been at least partly due to my inexperience. +* It doesn't really offer anything over Storefront, the WooCommerce theme from Automattic -- the core developers of WooCommerce itself. + The advantage of using a theme from the actual WooCommerce developers, is that we know it will be written to the same high standard without any compatibility issues and should always be up to date with the latest version of WooCommerce. + It does look a little different, but nothing substantial. Certainly nothing that couldn't be achieved with some customisation of Storefront. +* Doesn't do much to set it above all the other similar looking WooCommerce sites around. It looks clean and fresh, but nothing particularly stands out. -* [Contact Form 7](https://wordpress.org/plugins/contact-form-7/). -* [Cookie Notice](https://wordpress.org/plugins/cookie-notice/). -* [Display Posts](https://wordpress.org/plugins/display-posts-shortcode/). - Would most likely write own plugin for this now. -* [Hustle](https://wordpress.org/plugins/wordpress-popup/). -* [iThemes Security](https://wordpress.org/plugins/better-wp-security/). -* [MC4WP:Mailchimp for WordPress](https://wordpress.org/plugins/mailchimp-for-wp/). -* [QuickView WooCommerce](https://wordpress.org/plugins/quick-view-woocommerce/). -* [UpdraftPlus - Backup/Restore](https://wordpress.org/plugins/updraftplus/). -* [WooCommerce](https://wordpress.org/plugins/woocommerce/). -* [WP Super Cache](https://wordpress.org/plugins/wp-super-cache/). +So, I feel it is perfectly fine for someone wishing to set up a WooCommerce with an acceptable theme quickly with little effort. +But, not so good for developers, who will most likely want to customise and would be better off starting with an alternative such as Storefront. -Would certainly reassess the best plugins available currently, if doing this site now. +So, If I was to redo the site, I would almost certainly base it on the Storefront theme and include a lot more custom elements. -Would definitely use a better theme. -Main reason using this is that it was free. -Would now almost certainly develop a child theme based on [Storefront](https://woocommerce.com/storefront/#). +I feel a problem with WooCommerce is a lot of the sites are similar, with little to differentiate them. +This gives the perfect opportunity to make a site stand out a little more, and make it more engaging, by adding more interesting features. +Of course, it is important such features do not detract from the overall user experience. +We do not want flashy, distracting elements that will take attention away from the important elements. +This is why I feel classy and subtle is always the way to go for ecommerce sites. + +![]( /images/giana/large-5.jpg ) diff --git a/static/css/custom.css b/static/css/custom.css index 047a72a..602fffe 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -200,3 +200,21 @@ body.colorscheme-dark .avatar img { background-repeat: no-repeat; background-image: url(../images/logos/october-icon.png); } + +body.colorscheme-dark .logo.woocommerce > img { + background-color: #fafafa; + border: solid 16px #fafafa; + border-bottom-width: 10px; + border-radius: 6px; + box-sizing: content-box; +} + +@media (prefers-color-scheme: dark) { + .logo.woocommerce > img { + background-color: #fafafa; + border: solid 16px #fafafa; + border-bottom-width: 10px; + border-radius: 6px; + box-sizing: content-box; + } +} diff --git a/static/images/logos/woocommerce-logo.png b/static/images/logos/woocommerce-logo.png new file mode 100644 index 0000000..3a01664 Binary files /dev/null and b/static/images/logos/woocommerce-logo.png differ