309 lines
12 KiB
HTML
309 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<meta name="author" content="Ray Elliott">
|
||
|
||
|
||
|
||
<meta name="twitter:card" content="summary"/>
|
||
<meta name="twitter:title" content="Giana Boutique"/>
|
||
<meta name="twitter:description" content="Developing an ecommerce website using WordPress and WooCommerce."/>
|
||
|
||
<meta property="og:title" content="Giana Boutique" />
|
||
<meta property="og:description" content="Developing an ecommerce website using WordPress and WooCommerce." />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="og:url" content="https://rayelliott.dev/blog/posts/giana/" />
|
||
<meta property="article:published_time" content="2019-12-29T18:55:07+00:00" />
|
||
<meta property="article:modified_time" content="2019-12-29T18:55:07+00:00" />
|
||
|
||
|
||
|
||
|
||
<base href="https://rayelliott.dev/blog/posts/giana/">
|
||
|
||
<title>
|
||
Giana Boutique · RayElliottDev
|
||
</title>
|
||
|
||
|
||
<link rel="canonical" href="https://rayelliott.dev/blog/posts/giana/">
|
||
|
||
|
||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE+rA=" crossorigin="anonymous" media="screen" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
|
||
|
||
|
||
|
||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
|
||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
|
||
|
||
<meta name="generator" content="Hugo 0.68.3" />
|
||
</head>
|
||
|
||
|
||
|
||
|
||
|
||
<body class="page giana colorscheme-auto">
|
||
<main class="wrapper">
|
||
<nav class="navigation">
|
||
<section class="container">
|
||
<a class="navigation-title" href="https://rayelliott.dev/blog/">
|
||
RayElliottDev
|
||
</a>
|
||
|
||
<span class="primary-menu-item">
|
||
|
||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||
|
||
</span>
|
||
<input type="checkbox" id="menu-toggle" />
|
||
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
|
||
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
|
||
</svg>
|
||
</label>
|
||
<ul class="navigation-list">
|
||
|
||
|
||
<li class="navigation-item">
|
||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||
</li>
|
||
|
||
<li class="navigation-item">
|
||
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
|
||
</li>
|
||
|
||
<li class="navigation-item">
|
||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||
</li>
|
||
|
||
<li class="navigation-item">
|
||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
|
||
</li>
|
||
|
||
<li class="navigation-item">
|
||
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
|
||
</li>
|
||
|
||
|
||
|
||
</ul>
|
||
|
||
</section>
|
||
</nav>
|
||
|
||
|
||
<div class="content">
|
||
|
||
<section class="container post">
|
||
<article>
|
||
<header>
|
||
<div class="post-title">
|
||
<h1 class="title">Giana Boutique</h1>
|
||
</div>
|
||
<div class="post-meta">
|
||
<div class="meta-tag posted-on">
|
||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||
<path fill="currentColor" d="M7,12H9V14H7V12M21,6V20A2,2 0 0,1 19,22H5C3.89,22 3,21.1 3,20V6A2,2 0 0,1 5,4H6V2H8V4H16V2H18V4H19A2,2 0 0,1 21,6M5,8H19V6H5V8M19,20V10H5V20H19M15,14V12H17V14H15M11,14V12H13V14H11M7,16H9V18H7V16M15,18V16H17V18H15M11,18V16H13V18H11Z" />
|
||
</svg>
|
||
|
||
</span>
|
||
<time datetime='2019-12-29T18:55:07Z'>
|
||
December 29, 2019
|
||
</time>
|
||
</div>
|
||
<div class="meta-tag reading-time">
|
||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||
<path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
|
||
</svg>
|
||
|
||
</span>
|
||
3-minute read
|
||
</div>
|
||
<div class="taxonomy">
|
||
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/categories/portfolio/">
|
||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||
<path fill="currentColor" d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
|
||
</svg>
|
||
</span>
|
||
Portfolio
|
||
</a>
|
||
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/wordpress/">
|
||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||
</svg>
|
||
</span>
|
||
WordPress
|
||
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/woocommerce/">
|
||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||
</svg>
|
||
</span>
|
||
WooCommerce
|
||
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/cms/">
|
||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||
</svg>
|
||
</span>
|
||
CMS
|
||
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/ecommerce/">
|
||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||
</svg>
|
||
</span>
|
||
eCommerce
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div>
|
||
|
||
<img class="featured-image" src='https://rayelliott.dev/blog/images/giana/large-1.jpg' alt="Featured image"/>
|
||
|
||
<p>Now, this site, is one of the earliest I ever worked upon.
|
||
It was my first time using <strong>WooCommerce</strong> and the second time using <strong>WordPress</strong> to build a site.</p>
|
||
<p>It is the site of <a href="https://giana.rayelliott.dev/">Giana Boutique</a>, a fictitious, online ecommerce store.</p>
|
||
<p>This was done quite some time ago. Very early on in my career as a web developer.</p>
|
||
<p>For an ecommerce site, there was nothing special required. I used the WordPress plugin WooCommerce along with a pre-existing theme with a few modifications.</p>
|
||
<figure class="logo woocommerce">
|
||
<img src="https://rayelliott.dev/blog/images/logos/woocommerce-logo.png"
|
||
alt="The WooCommerce logo."/>
|
||
</figure>
|
||
|
||
<p>The main customisations were bits of CSS to tidy some things up – so a child theme was created.
|
||
The parent theme is called <strong>Exchange</strong> and was obtained from <a href="https://modernthemes.net/">ModernThemes</a>.</p>
|
||
<p>Now, why did I use the Exchange theme?</p>
|
||
<p>Well, I’m an honest guy and so I’ll confess – it was free and, at the time, I thought it looked okay!</p>
|
||
<p>Looking back now, not exactly the best of reasons.
|
||
But, it was free and I felt it was a reasonable looking theme that I could use to get experience with setting up a WordPress site using WooCommerce.</p>
|
||
<p>So, would I use it again?</p>
|
||
<p>Now that I have a lot more experience develping for WordPress, I wouldn’t.</p>
|
||
<ul>
|
||
<li>I felt it was difficult to customise, although this may have been at least partly due to my inexperience.</li>
|
||
<li>It doesn’t really offer anything over Storefront, the WooCommerce theme from Automattic – the core developers of WooCommerce itself.<br>
|
||
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.<br>
|
||
This theme does look a little different, but nothing substantial. Certainly nothing that couldn’t be achieved with some customisation of Storefront.</li>
|
||
<li>It 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.</li>
|
||
</ul>
|
||
<p>So, I feel it is perfectly fine for someone wishing to set up a WooCommerce site with an acceptable theme quickly with little effort.
|
||
But, not so good for developers, who will most likely want to customise and, in my opinion, would be better off starting with an alternative such as Storefront.</p>
|
||
<p>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.</p>
|
||
<p>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.</p>
|
||
<p>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.</p>
|
||
<p> </p>
|
||
<p><img src="https://rayelliott.dev/blog/images/giana/large-5.jpg" alt="Screenshot of the Giana Boutique website"></p>
|
||
|
||
</div>
|
||
|
||
|
||
<footer>
|
||
|
||
|
||
<section class="see-also">
|
||
|
||
|
||
|
||
|
||
<h3>More of my Portfolio Articles</h3>
|
||
<nav>
|
||
<ul class="see-also-list">
|
||
|
||
|
||
|
||
<li>
|
||
<a href="https://rayelliott.dev/blog/posts/flowmm/">Flow Model Management</a>
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
<a href="https://rayelliott.dev/blog/posts/leopold/">Marc Leopold Photography</a>
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
<a href="https://rayelliott.dev/blog/posts/stanthams/">Charles Stantham Legal Services</a>
|
||
</li>
|
||
|
||
|
||
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<footer class="footer">
|
||
<section class="container">
|
||
|
||
|
||
|
||
© 2020
|
||
|
||
Ray Elliott
|
||
|
||
|
||
<span id="cs-mode-container" class="cs-mode-container">
|
||
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
|
||
</span>
|
||
|
||
</section>
|
||
</footer>
|
||
|
||
</main>
|
||
|
||
|
||
|
||
<script src="https://rayelliott.dev/blog/js/script.js"></script>
|
||
</body>
|
||
|
||
</html>
|