Building a Shopify website with 180 products and 96 variants each in 2 weeks
My wife run her business for quite a few years. She set up a Moonfruit site (yes, that is a thing) which was a weird WYSIWYG editor (what-you-see-is-what-you-get). We finally got to the point where I initiated the launch of a new site. We launched on Saturday, visit www.tessagalloway.com.
Understanding how many products and variations we were talking about, I regretted my initial push for a website. But onwards and upwards. A research process started, looking at Shopify and Squarespace. I signed up for a trial with both, during which I tried to stretch the systems to the limits.
In the following paragraphs, I explain some of the considerations and ways how I got the site up and running within the two weeks. Perhaps, it can give prospect users of Shopify some ideas or inspiration on how to go about it. I also added the bits I really don’t like about Shopify at the end.
Bulk uploading products
This is the big one. My main worry about this project was to import around 180 products. That’s not even the crazy part. Here are the variations.
Product variants: Each product had 96 variants! A4 or A3 x unframed or 3 other frame options x 12 different colours.Watch out: Shopify has a variant limit of 100. You cannot go above that.
Manually creating 180 products with each 96 variants. This would have taken me years…? Luckily Google Spreadsheets came to the rescue.
To start with, I looked at the CSV template from Shopify, you can download it from the page below.
After spending a long time staring at this document, I decided to semi-automate this and pre-populate all of the values.
Here’s the end version which I still use to upload new product. Let me show you..
Basically, all values on this doc are either static (because they don’t differentiate between products) or dynamically populated through vlookups or copied across from a supporting tab.
I created this nifty little process that auto-completed the CSV on a second tab. I would choose the name of the product, and select the type of product.
With a heck of a lot supporting cells, I was able to populate every field that I wanted to upload. Think of the product description, which I posted below for a product called Personalised Athens Print.
Create a unique personalised Athens print for yourself or give the perfect gift for a globe-trotting friend. Featuring all the famous buildings and landmarks of the historical European city.Make a collection of favourite destinations to remember fantastic trips or remind you of home. Create a unique wedding or engagement gift for a well-travelled couple by picking a city which is special to them and adding their names or special dates to the design.Simply pick your sky colour from the colour chart, decide the size and if you would like your personalised print framed. Finally choose your font and add your special text to create a unique design.You will be sent a proof via e-mail for your approval before final dispatch. Changes can be made until you are satisfied with the design. Please note colour chart is a guide, colours may vary slightly due to varying screen settings.
I ended up creating something like below and concatenate the product description, adding the city name between two values, as well as ‘historical European city’, that was populated from the vlookup.
Shopify actually has an import function. There was already an existing Etsy shop, but I wanted to stay away and build something sustainable rather than a one off. This means, any future products can be easily uploaded.
Product page customisation
The painful process of getting the product page to the standard that works for you. I spent quite a bit figuring out how to present products, playing around with different variants.
Requirement: Besides size, colour, framing options, I also had to provide options for a personalised text as well as the font in which the personalised text is written. (see finished version here)
Problem: By default, Shopify gives you 3 product options. If you want to go beyond and add line item properties, you’ll have two options.
Solution: I basically found two solutions to this additional customisation.
- Pay for an app. I found one for £7/month, errr, no thanks!
- Follow these instructions on how to add customisation on product pages
Choosing the second option. Arguably, this was painful, but it was well worth investing the time and get it to how I wanted it. I ended up coding the bits into a new product-customizable-template.liquid.
<! Dom's custom code-->
<script type="text/javascript">
function ShowHideDiv() {
var personalisation = document.getElementById("personalisation");
var ALL = document.getElementById("ALL");
ALL.style.display = personalisation.value == "Y" ? "block" : "none";
}
</script>
<p>Personalised text</p>
<select id = "personalisation" onchange = "ShowHideDiv()">
<option value="N">No</option>
<option value="Y">Yes</option>
</select><div id="ALL" style="display: none">
<label for="message">Add your personalised text:</label>
<input type="text" id="message" name="properties[Your personalised message]"></p>
<label for="personalised-font">Choose a font:</label>
<select id="choose-a-font" name="properties[Your chosen font]">
<option selected="true" disabled="disabled"> </option>
<option value="Font 1">Font 1</option>
<option value="Font 2">Font 2</option>
<option value="Font 3">Font 3</option>
</select>
</div><br><br><! END Dom's custom code-->
The code above now allowed me to have a dropdown to select whether personalisation was needed.
You can generate the code snippets to add with the Shopify UI Elements Generator.
A Javascript code expanded the section to add personalisation text and font. This looked really neat and worked well.
Tip: Make sure you follow the Shopify instructions on adding line items. You could custom code this in different ways, but using Shopify UI Generator ensure that your additional line items also appear on the cart easily by adding that.
Tip 2: Dropdown values were carried over, even when the expanded text was not shown. This means, whenever someone ordered a print without personalisation, the order would come through with Font1 selected. I had to add additional helptext to get a blank value.
Nice to have
Change hex colour when selecting text
Rather than the standard default ‘blue’ when selecting text, I added the CSS code snippet below into the theme.scss.liquid that allowed me to change the colour to be on brand.
/* Change Selection Text Color When Highlighting */
::-moz-selection { background-color: #71D6D2;
color: #fff; }
::selection { background-color: #71D6D2;
color: #fff; }Remove Powered by Shopify in footer
Hey, I’m paying for your service, don’t add your sponsoring on my site!
I was able to just get rid off the code in the footer.liquid. If the thought of accessing the code freaks you out, I found this blog that provides both options, editing the code, but also a no-code solution.
Added Mailchimp integration
Now the fun bit. The email service provider (ESP) is limited, well it doesn’t really exist. But there was an existing Mailchimp account floating around. After a bit of research, I came across Shopsync which is free in the Shopify app store.
It basically syncs customer data across to Mailchimp. Within Mailchimp’s settings, you can add ShopSync — the best bit, this was all free. Shopsync is free, MailChimp account is free.
And if automation is new to you, Mailchimp does a pretty good job giving you inspiration and template workflows (click on automate in the top nav).
Activated enhanced e-commerce analytics
A lot has been written about activating enhanced e-commerce analytics, I won’t go into detail about that here. Others have done this far better than I could do — read here.
Things I really don’t like about Shopify
Shopify has some weird quirks which are not dealbreakers but just really annoyed me as an SEO and marketer.
Unable to customise URLs
There is no way to change the URLs of static pages outside of your Shop. For example, the about us page ended up being https://tessagalloway.com/pages/about, and it’s impossible to remove /pages/ from the URL. There are a ton of comments in Shopify’s forum of disgruntled customers.
Unable to set up e-commerce through Google Tag Manager
Adding Google Analytics in Tag Manager? Let me stop you there. I basically gave up setting up variables in the data layer. I consider myself a good techy marketer, but I chose the shortcut and ended up adding the GA tag directly with the Shopify preferences. That allowed me to easily activate Enhanced Ecommerce Analytics in GA. I hate that I had to do this that way, but it actually works really well.
Contact forms extremely limited
Contact forms are a joke. Only the customer email address you set up in the preferences will receive notifications. Also, there is no way that you can change/tweak the form unless you access the code.
Unable to exclude IP addresses from shop
I browse this site a lot and skew the data somewhat. It would have been nice to exclude IP addresses from certain users (bit like what Google Analytics offers).
Summary
Overall, it was the right decision to go with Shopify. The customer support (which I needed once to transfer the domain) was actually really helpful and quick. I’d say the products I had to upload were quite extensive and complex, it just felt that Shopify would do a better job than other CMS providers that more recently joined the race. After all, Shopify’s customer base exceeded one million. Speaks for itself.