Shopify
This one is a given, but Shopify is what we specialise in, and it’s where you will find anything from your store inventory to where you can create and manage collections, products and store settings.
If you’re new to Shopify, it’s essential to get familiar with how it works, how to navigate through the admin and particularly how to use the theme customiser – this comes in handy when it comes time for content loading.
To super charge your insights, checkout our newsletter – Shopify For Lifestyle brands here. It's free to subscribe.
Figma
Figma is a design tool that allows designers to create various designs, from low-fidelity wireframes to high-fidelity website designs with interactive prototypes.
During the design phase, you will interact mainly with Figma; the first instance will be during the UX phase, where you will see a sitemap, wirframes, and prototypes. Figma is used to create the custom design for your site; you can view design prototypes across desktop, tablet and mobile.
User Experience Design (UX)
User Experience, more commonly referred to as UX, is the overall user journey and experience the customer experiences within a site. UX is a crucial part of the design process as it ensures that the site is easy to navigate and performs well for many users.
User Interface Design (UI)
User Interface, also known as UI, focuses on the visual design of a site, elements such as image treatment, animation, font styles and buttons, to name a few. UI is essential to communicate the brand and work seamlessly with the UX to create a well-functioning site visually pleasing to the user.
Prototype
A prototype is an interactive design, most commonly shown in Figma, which allows the user to scroll, click and navigate through a design. These are most often provided in both Desktop and mobile views. A quick tip: you can use the Figma app to preview mobile prototype links to understand better how these look at this device size.
Components
Components can refer to a multitude of things. However, generally, components are referred to across the UX and UI phases. Components are often global sections or modals that are shown across a site. An example would be the navigation, but a component could also refer to a pop-up, cart, mega menu or drawer-style element.
HTML
HTML is a markup language used to build the site; this is what you see on the front end of the website. A <div></div> tag is the most common element.
Schema
Schema is the functionality behind a section, page or component. You can edit the schema in the Shopify customiser, like updating a title or uploading an image.
Liquid
Liquid is the templating and coding language that we use to connect the HTML to the CMS of the website - this “glue” is called Schema.
Front end
Front-end development refers to creating HTML to page structure, CSS for styles of HTML elements, and Javascript - the logic and actions - i.e. click on a button to open the cart. Everything you see and visually interact on a website results from front-end development.
Back end
Backend development refers to development specifically around integrations, databases, and API’s. An example is a store availability app, where we created an app and backend server to connect to the inventory of a service like Vend, Dear or REX and then push that data into the frontend code to appear to users.
Metafields & Metaobjects
These terms refer to the logic and Shopify structure used to create global and reusable components across the site. They are essentially creating a source of information across the site in different areas.
Modal
A modal could refer to multiple areas of a site. However, the most common modals we build are mega menus, slide-out carts, collection filters, size guides or any pop-up or overlay on a page.
Quality Assurance (QA)
QA, as it is more commonly referred to, is the phase of the project in which your site is in development; this is an integral part of the process as it ensures that both the design is correct and the functionality is also there.
The QA process often looks like providing comments and feedback on the production Shopify theme, so it is not live but in testing.
Version Control
This is a way of backing up all code changes made by developers as well as customiser changes made by store admin. Tools like Github and BitBucket can be used for this. It is essential for professional developers, and those who don't use this pose a risk of losing code or content changes.
Branches
Branches are created by developers so that they work on new features, or bug fixes without affecting the current production version of a website. Once the work on a branch has been reviewed and approved, it can be merged into the production branch, and deployed to a live website.
.png)
.png)