-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
340 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,330 @@ | ||
| --- | ||
| permalink: /crazy-thumbs/ | ||
| --- | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <script src="https://kit.fontawesome.com/029ff40d7b.js" crossorigin="anonymous"></script> | ||
| <!-- Global site tag (gtag.js) - Google Analytics --> | ||
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-XVK8SSNQSC"></script> | ||
| <script> | ||
| window.dataLayer = window.dataLayer || []; | ||
| function gtag(){dataLayer.push(arguments);} | ||
| gtag('js', new Date()); | ||
| gtag('config', 'G-XVK8SSNQSC'); | ||
| </script> | ||
| <script type="application/ld+json"> | ||
| { | ||
| "@context": "https://schema.org", | ||
| "@type": "BreadcrumbList", | ||
| "itemListElement": [{ | ||
| "@type": "ListItem", | ||
| "position": 1, | ||
| "name": "Home", | ||
| "item": "https://sybiltec.com/" | ||
| },{ | ||
| "@type": "ListItem", | ||
| "position": 2, | ||
| "name": "Crazy Thumbs" | ||
| }] | ||
| } | ||
| </script> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Crazy Thumbs | Case Study | Sybiltec Web Design</title> | ||
| <meta name="Description" content="Crazy Thumbs sells vintage and contemporary games, consoles and accessories. Learn how we developed Crazy Thumbs' new e-commerce store with Shopify."> | ||
| <meta property="og:locale" content="en_GB" /> | ||
| <meta property="og:type" content="website" /> | ||
| <meta property="og:title" content="Crazy Thumbs | Case Study | Sybiltec Web Design" /> | ||
| <meta property="og:description" content="Crazy Thumbs sells vintage and contemporary games, consoles and accessories. Learn how we developed Crazy Thumbs' new e-commerce store with Shopify." /> | ||
| <meta property="og:url" content="https://sybiltec.com/crazy-thumbs/" /> | ||
| <meta property="og:site_name" content="Sybiltec" /> | ||
| <meta property="og:image" content="https://sybiltec.com/images/logos/sybiltec-logo-social.png" /> | ||
| <meta name="twitter:card" content="summary_large_image" /> | ||
| <meta name="twitter:creator" content="@sybiltec" /> | ||
| <meta name="twitter:site" content="@sybiltec" /> | ||
| <meta name="twitter:label1" content="Written by"> | ||
| <meta name="twitter:data1" content="Sybil Mayard"> | ||
| <meta name="twitter:label2" content="Estimated reading time"> | ||
| <meta name="twitter:data2" content="5 minutes"> | ||
| <meta name="google-site-verification" content="4CQdjA8VuHHdJlLAeL33JXUNCcg92x6Yy2MK2H-F5rs" /> | ||
| <meta name="geo.region" content="GB" /> | ||
| <meta name="geo.placename" content="London" /> | ||
| <meta name="geo.position" content="51.495673;0.141465" /> | ||
| <meta name="ICBM" content="51.495673, 0.141465" /> | ||
| <script type="application/ld+json"> | ||
| { | ||
| "@context": "https://schema.org", | ||
| "@type": "LocalBusiness", | ||
| "image": "https://sybiltec.com/images/logos/sybiltec-logo-social.png", | ||
| "name": "Sybiltec Web Design", | ||
| "address": { | ||
| "@type": "PostalAddress", | ||
| "streetAddress": "2 Veridion Way", | ||
| "addressLocality": "Bexley", | ||
| "addressRegion": "London", | ||
| "postalCode": "DA18 4AL", | ||
| "addressCountry": "GB" | ||
| }, | ||
| "geo": { | ||
| "@type": "GeoCoordinates", | ||
| "latitude": 51.495673, | ||
| "longitude": 0.141465 | ||
| }, | ||
| "url": "https://sybiltec.com", | ||
| "telephone": "+447768059730", | ||
| "priceRange": "$$", | ||
| "openingHoursSpecification": [ | ||
| { | ||
| "@type": "OpeningHoursSpecification", | ||
| "dayOfWeek": [ | ||
| "Monday", | ||
| "Tuesday", | ||
| "Wednesday", | ||
| "Thursday", | ||
| "Friday" | ||
| ], | ||
| "opens": "09:00", | ||
| "closes": "18:00" | ||
| } | ||
| ] | ||
| } | ||
| </script> | ||
| <script type="application/ld+json"> | ||
| { | ||
| "@context": "https://schema.org", | ||
| "@type": "Organization", | ||
| "image": "https://sybiltec.com/images/logos/sybiltec-logo-social.png", | ||
| "url": "https://www.sybiltec.com", | ||
| "sameAs": ["https://www.instagram.com/sybiltec/", "https://www.facebook.com/sybiltec", "https://www.linkedin.com/company/sybiltec/"], | ||
| "logo": "https://sybiltec.com/favicon.png", | ||
| "name": "Sybiltec Web Design", | ||
| "description": "Sybiltec provides web design services to small businesses in the South East London region and surrounding areas. Whether you are looking to build your first website or redesign an existing one, we offer a service that's right for you. Services include: small business websites, e-commerce websites and online learning platforms. We work with Shopify, WordPress, Wix, WooCommerce and LearnDash.", | ||
| "email": "info@sybiltec.com", | ||
| "telephone": "+447768059730", | ||
| "address": { | ||
| "@type": "PostalAddress", | ||
| "streetAddress": "2 Veridion Way", | ||
| "addressLocality": "Bexley", | ||
| "addressCountry": "GB", | ||
| "addressRegion": "London", | ||
| "postalCode": "DA18 4AL" | ||
| } | ||
| } | ||
| </script> | ||
| <link rel="canonical" href="https://sybiltec.com/crazy-thumbs/" /> | ||
| <link rel="stylesheet" href="https://sybiltec.com/styles.min.css" type="text/css"> | ||
| <link rel="icon" type="image/png" href="https://sybiltec.com/favicon.png"> | ||
| </head> | ||
| <body> | ||
| <div class="announcement-bar"> | ||
| <div class="container-1140"> | ||
| <span><i class="fa-regular fa-envelope"></i><a href="mailto:info@sybiltec.com?subject=Website Enquiry" target="_blank">info@sybiltec.com</a></span> | ||
| </div> | ||
| </div> | ||
| <div class="header"> | ||
| <div class="container-1140"> | ||
| <div class="row"> | ||
| <div class="col-2"> | ||
| <div class="logo"> | ||
| <a href="/"><img src="https://sybiltec.com/images/logos/low-res/sybiltec.webp" alt="Sybiltec Web Design"></a> | ||
| </div> | ||
| </div> | ||
| <div class="col-10"> | ||
| <div class="nav"> | ||
| <div class="topnav" id="myTopnav"> | ||
| <a href="/">Home</a> | ||
| <a href="https://sybiltec.com/about/">About</a> | ||
| <a href="https://sybiltec.com/services/">Services</a> | ||
| <a href="https://sybiltec.com/clients/">Case Studies</a> | ||
| <a href="https://sybiltec.com/contact/" class="btn-contact">Contact Us</a> | ||
| <a href="javascript:void(0);" class="icon" onclick="myFunction()"> | ||
| <i class="fas fa-bars"></i> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="hero"> | ||
| <div class="container-1140"> | ||
| <h1>Crazy Thumbs</h1> | ||
| </div> | ||
| </div> | ||
| <div class="main section"> | ||
| <div class="container-1140"> | ||
| <ol class="breadcrumb"> | ||
| <li> | ||
| <a href="https://sybiltec.com">Home</a> | ||
| </li> | ||
| > | ||
| <li> | ||
| Crazy Thumbs | ||
| </li> | ||
| </ol> | ||
| <img class="case-study-screenshot" src="https://sybiltec.com/images/clients/Crazy-Thumbs-2.jpg" alt="Crazy Thumbs"> | ||
| <h2>Services Delivered</h2> | ||
| <ul> | ||
| <li>Website development (Shopify)</li> | ||
| <li>Advanced navigation</li> | ||
| <li>Loyalty programme setup</li> | ||
| <li>Sound effects</li> | ||
| <li>Klaviyo marketing platform setup</li> | ||
| <li>Google Analytics setup</li> | ||
| <li>Google Search Console submission</li> | ||
| </ul> | ||
|
|
||
| <h2>Retro and Contemporary Games, Consoles and Accessories</h2> | ||
|
|
||
| <p>Crazy Thumbs is a seller of vintage and contemporary games, consoles and accessories. </p> | ||
|
|
||
| <p>When Crazy Thumbs first approached us, they were trading from a physical premises in Tooting, London, and needed a way of selling online, so we recommended the <a href="https://shopify.co.uk/" target="_blank" rel="noopener noreferrer">Shopify</a> platform for their e-commerce channel.</p> | ||
|
|
||
| <h2>Shopify Setup</h2> | ||
|
|
||
| <p>We chose the “Minimal” Shopify template for its simple design and suitability for the retro style of the store that we wanted to create. The colour palette consisted of just the black (#000000) and yellow (#F7FF1E) of the logo.</p> | ||
|
|
||
| <h2>Navigation System</h2> | ||
|
|
||
| <p>The majority of the website is structured in a very specific way, and therefore building the navigation was one of the most challenging aspects of the project. Creating the desired website structure involved some clever manipulation of the Liquid code. There are three levels of navigation:</p> | ||
|
|
||
| <p><em>Category > Brand > Model or format</em></p> | ||
|
|
||
| <p>For example, if you were looking to view all of the PS5 games which were available, you would browse the store in the following order:</p> | ||
|
|
||
| <p><em>Games > Sony > PS5</em></p> | ||
|
|
||
| <p>Similarly, if you wished to see all of the available Xbox One consoles, you would go to:</p> | ||
|
|
||
| <p><em>Consoles > Microsoft > Xbox One</em></p> | ||
|
|
||
| <h2>New Arrivals</h2> | ||
|
|
||
| <p>Crazy Thumbs wanted to keep email subscribers informed about new products that were added to the store on a fortnightly basis. In order to create this workflow, three steps were required:</p> | ||
|
|
||
| <ol> | ||
| <li>We created a New Arrivals collection on the Shopify store. This collection would contain the latest products that have been added.</li> | ||
| <li>We set up the email marketing platform, <a href="https://www.klaviyo.com/" target="_blank" rel="noopener noreferrer">Klaviyo</a>. We created a newsletter signup form and embedded it into the footer of the website.</li> | ||
| <li>We built out an email campaign which was linked to the New Arrivals collection, and created an automation which would send out an email to subscribers every two weeks on a Friday afternoon. The email is automatically populated with the newest products that have arrived in the store.</li> | ||
| </ol> | ||
|
|
||
| <h2>Rewarding Loyal Customers</h2> | ||
|
|
||
| <p>Crazy Thumbs wanted to reward their loyal customers, so we installed and configured the <a href="https://smile.io/" target="_blank" rel="noopener noreferrer">Smile</a> app in order to create their own loyalty programme. We implemented a points-based system, so that customers can earn a certain number of points depending on how much they spend per order. Points are able to be redeemed both in store and online.</p> | ||
|
|
||
| <h2>Unique Features</h2> | ||
|
|
||
| <p>For the finishing touches and to add a little quirkiness to the website, we incorporated sound effects which play on various pages of the website, like the “Welcome!” message on the homepage, “What are you buying?” on the Games page and “What are you selling?” on the Trade In page.</p> | ||
| <div class="padding-btn"> | ||
| <a class="btn-secondary" href="https://crazythumbs.co.uk/" target="_blank" rel="noopener noreferrer">View Crazy Thumbs >></a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="contact section"> | ||
| <div class="container-1140"> | ||
| <div class="row"> | ||
| <div class="col-8"> | ||
| <h3>Would You Like To Start A Project With Us?</h3> | ||
| <p>Click the contact button to get in touch with your requirements</p> | ||
| </div> | ||
| <div class="col-4"> | ||
| <a class="btn-primary" href="https://sybiltec.com/contact/">Contact Us</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="footer section"> | ||
| <div class="container-1140"> | ||
| <div class="row"> | ||
| <div class="col-2-4"> | ||
| <p><strong>Links</strong></p> | ||
| <p><a href="https://sybiltec.com/about/">About</a></p> | ||
| <p><a href="https://sybiltec.com/blog/">Blog</a></p> | ||
| <p><a href="https://sybiltec.com/faqs/">FAQs</a></p> | ||
| <p><a href="https://sybiltec.com/sitemap/">Sitemap</a></p> | ||
| <p><a href="https://sybiltec.com/privacy-notice/">Privacy Notice</a></p> | ||
| <p><a href="https://sybiltec.com/terms-and-conditions/">Terms and Conditions</a></p> | ||
| </div> | ||
| <div class="col-2-4"> | ||
| <p><strong>Services</strong></p> | ||
| <p><a href="https://sybiltec.com/ecommerce-websites/">E-commerce Websites</a></p> | ||
| <p><a href="https://sybiltec.com/website-review/">Website Review</a></p> | ||
| <p><a href="https://sybiltec.com/small-business-web-design/">Web Design</a></p> | ||
| <p><a href="https://sybiltec.com/website-maintenance/">Website Maintenance</a></p> | ||
| <p><a href="https://sybiltec.com/training/">Workshops</a></p> | ||
| <p><a href="https://sybiltec.com/leaflet-design/">Leaflet Design</a></p> | ||
| </div> | ||
| <div class="col-2-4"> | ||
| <p><strong>Some Areas We Cover</strong></p> | ||
| <p><a href="https://sybiltec.com/website-design/">Web Design in Bexley</a></p> | ||
| <p><a href="https://sybiltec.com/web-design-surrey/">Web Design in Surrey</a></p> | ||
| <p><a href="https://sybiltec.com/free-workshops-greenwich-borough/">Workshops in Greenwich</a></p> | ||
| </div> | ||
| <div class="col-2-4"> | ||
| <p><strong>Get in Touch</strong></p> | ||
| <p><a href="mailto:info@sybiltec.com?subject=Website Enquiry">info@sybiltec.com</a><br> | ||
| The Engine House<br>2 Veridion Way<br>Erith DA18 4AL</p> | ||
| <p> | ||
| <a href="https://www.uksmallbusinessdirectory.co.uk/bid/284687/" rel="noopener noreferrer" target="_blank"><img src="https://www.uksmallbusinessdirectory.co.uk/links/uksbd-100.png" alt="Business Directory"></a> | ||
| </p> | ||
| </div> | ||
| <div class="col-2-4"> | ||
| <p><strong>Awards</strong></p> | ||
| <img src="https://sybiltec.com/images/awards/best-sme-focused-web-design-agency-2024.png" alt="SME News Best SME-Focused Web Design Agency 2024"> | ||
| <img src="https://sybiltec.com/images/awards/digital-services-customer-service-excellence-award-2024.png" alt="SME News Digital Services Customer Service Excellence Award 2024"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="container-1140 center padding-top padding-bottom"> | ||
| <a href="https://www.linkedin.com/in/sybil-m" target="_blank" rel="noopener noreferrer"> | ||
| <i class="fa-brands fa-linkedin"></i></a> | ||
| <a href="https://instagram.com/sybiltec/" target="_blank" rel="noopener noreferrer"> | ||
| <i class="fa-brands fa-instagram"></i></a> | ||
| <a href="https://www.pinterest.co.uk/sybiltec/" target="_blank" rel="noopener noreferrer"> | ||
| <i class="fa-brands fa-pinterest"></i></a> | ||
| <a href="https://www.facebook.com/sybiltec" target="_blank" rel="noopener noreferrer"> | ||
| <i class="fa-brands fa-facebook"></i></a> | ||
| <a href="https://x.com/sybiltec" target="_blank" rel="noopener noreferrer"> | ||
| <i class="fa-brands fa-x-twitter"></i></a> | ||
| <a href="https://www.tiktok.com/@sybiltec" target="_blank" rel="noopener noreferrer"> | ||
| <i class="fa-brands fa-tiktok"></i></a> | ||
| </div> | ||
| <div class="copyright section center"><p>Copyright © | ||
| <span id="year"></span> Sybiltec Web Design. ICO registration reference: ZB744424</p> | ||
| </div> | ||
| </div> | ||
| <script> | ||
| function myFunction() { | ||
| var x = document.getElementById("myTopnav"); | ||
| if (x.className === "topnav") { | ||
| x.className += " responsive"; | ||
| } else { | ||
| x.className = "topnav"; | ||
| } | ||
| } | ||
|
|
||
| /* When the user clicks on the button, | ||
| toggle between hiding and showing the dropdown content */ | ||
| function toggleDropdown() { | ||
| document.getElementById("myDropdown").classList.toggle("show"); | ||
| console.log("click"); | ||
| } | ||
|
|
||
| // Close the dropdown if the user clicks outside of it | ||
| window.onclick = function(event) { | ||
| if (!event.target.matches('.dropbtn')) { | ||
| var dropdowns = document.getElementsByClassName("dropdown-content"); | ||
| var i; | ||
| for (i = 0; i < dropdowns.length; i++) { | ||
| var openDropdown = dropdowns[i]; | ||
| if (openDropdown.classList.contains('show')) { | ||
| openDropdown.classList.remove('show'); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| document.getElementById("year").innerHTML = new Date().getFullYear(); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.