32 search results for “Tiffany Tse”

4 Essential Tips for Building Your First Shopify Theme

4 Essential Tips for Building Your First Shopify Theme

Shopify Theme Development

Getting started on your first Shopify theme can be a daunting experience. Finding the time to get familiar with a new platform is never easy. With that in mind, we’ve compiled this brief list of essential resources for the beginner looking to build their first Shopify theme.

In this article you will learn:

  • How to get started and familiarize yourself with Liquid
  • Which development tools are most helpful when building themes, and where to find them
  • What the Shopify Partner Academy is, and which courses are best suited helping you get started with theme development

Continue reading

7 Ways to Spice Up Your Website for Halloween

7 Ways to Spice Up Your Website for Halloween

7 Ways to Spice Up Your Website for Halloween: Email

It’s Halloween, and you can see decorations and sweet treats everywhere you look. Why not bring the spirit of the season online?

Reap the benefits of the spookiest time of year with these seven easy ways to spice up your clients’ websites.

In this article, you will learn:

  • How to spice up your logo with a custom animation
  • The best spooky font pairings
  • Halloween-specific promotions and resources

Continue reading

A Beginner's Git Guide with Shopify

A Beginner's Git Guide with Shopify

git guide

It’s important to think about how to keep track of all the changes we make in our code, especially as projects become more complicated, when we collaborate with other developers, or when we just want to know what’s been worked on or fixed in a project. A lot of people have heard of Git, but have never actually used it before, and it can be an intimidating subject for those who don’t have experience with the command line.

In this article you will learn:

  • What the heck Git is, and why it’s important.
  • How to install Git, and create your first repository with GitHub.
  • How to make your first commit, using the command line or GitHub Desktop.
  • How to push your Shopify theme to GitHub.

Continue reading

A Beginner's Guide to Sass with Shopify — Part 1: Getting Started With Sass

A Beginner's Guide to Sass with Shopify — Part 1: Getting Started With Sass

A beginner's guide to building shopify themes with sass part 1: Email

As CSS has gotten more complex, and stylesheets have become larger and harder to maintain, CSS preprocessors have become very popular. CSS preprocessors were created to solve problems around reusability of code, and creating more abstractions to simplify development.

In this article you will learn:

  • The differences between Sass and SCSS.
  • An introduction to variables, nesting, and variable scope in Sass.
  • Using Sass in the Shopify online theme editor.

Continue reading

A Beginner's Guide to Sass with Shopify — Part 2: Making Stylesheets Smarter with Sass Mixins and Functions

A Beginner's Guide to Sass with Shopify — Part 2: Making Stylesheets Smarter with Sass Mixins and Functions

A beginner's guide to building Shopify themes with Sass part 2

CSS preprocessors were created to solve problems around reusability of code, and creating more abstractions to simplify development. This article is the second part in a series of articles about building Shopify themes with Sass.

In this article you will learn:

  • How to use arithmetic operators in Sass.
  • Creating and using existing Sass functions.
  • Useful examples of mixins and how they work.

Continue reading

A Beginner's Guide to Sass with Shopify — Part 3: Sass Interpolation, Workflow and Object Oriented CSS

A Beginner's Guide to Sass with Shopify — Part 3: Sass Interpolation, Workflow and Object Oriented CSS

Beginners guide to sass with shopify part 3: Email

CSS preprocessors were created to solve problems around reusability of code, and creating more abstractions to simplify development. This article is part three in a series of posts about Sass with Shopify.

In this article you will learn:

  • About Sass interpolation and how to use it with Shopify theming.
  • How to escape Liquid in Sass files.
  • Workflow tools for Sass and Shopify.
  • Best practices and other resources for learning Sass.

Continue reading

Build an Eye-Catching Non-Rectangular Header Design

Build an Eye-Catching Non-Rectangular Header Design

header design

First mentioned as a tiny trend at the beginning of the year, non-rectangular headers were picked out by Jon Moore on UX Power Tools as something to watch out for in 2017. A non-rectangular header is a way to break the parallelled structure we’ve become accustomed to online.

In this article you will learn:

  • What non-rectangular headers are, and why has it become a tiny trend.
  • How to implement diagonal headers in your site, using background images and solid colors.
  • How to implement product card designs, with overlayed products.

Continue reading

Building an Accessible Breadcrumb Navigation with Liquid and Shopify

Building an Accessible Breadcrumb Navigation with Liquid and Shopify

breadcrumb navigation

Breadcrumbs, or a breadcrumb navigation, can help enhance how users navigate a website, especially if that website has many pages or products. Breadcrumbs can reduce the number of actions a visitor needs to take in order to navigate to a higher-level page, and improve the discoverability of a website’s sections and pages.

This article will walk you through the process and reasoning behind creating an accessible breadcrumb navigation menu in a Shopify theme. In this article you’ll learn:

  • The accessibility requirements for a breadcrumb navigation, and the suggested markup
  • The ARIA attributes that should be included in breadcrumb navigations
  • How to use a switch statement to check multiple templates and output breadcrumbs for each template type
  • How to make your breadcrumb navigation dynamic using theme settings

Continue reading

Grow your business with the Shopify Partner Program

Learn more