30 search results for “Tiffany Tse”

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

Building Icon Systems With SVG

Building Icon Systems With SVG

SVG Icons: Email

Building a great system and workflow is one of the hardest things to do. For a long time, building icon systems for themes and websites meant using iconic fonts. But as browser support has improved, inline SVGs are the new hot thing.

In this tutorial, you'll learn:

  • How to prepare SVGs
  • How to build your icon set
  • Where to find SVG resources

Continue reading

Building Nested Navigations with Shopify Link List

Building Nested Navigations with Shopify Link List

shopify link list

Nested navigations are a popular solution for effectively organizing collections, products, and pages. A link list is a simple collection of links, and these items can be created to point to collection, page, or product within Shopify, or to a URL outside of the store’s domain. In this tutorial, we will cover how to use link lists in a Shopify theme to create a nested navigation using an unordered list.

In this article you will learn:

  • How to create a menu and nested menu in the Shopify Admin.
  • How to output a menu using Liquid and linklist.
  • How to output a nested navigation with up to three levels deep.
  • Using link.active and link.active_child to help style and identify active menu links.

Continue reading

Canonical URLs: What Are They and Why Are They Important?

Canonical URLs: What Are They and Why Are They Important?

canonical urls

SEO is important for every website, and an online store is no exception. Using canonical URLs can help to better inform search engines which URLs have identical or highly similar content.

In this article you will learn:

  • What a canonical URL is.
  • Why canonical URLs matter.
  • How the `canonical_url` object works.
  • Best practices, and things to keep in mind when using canonical URLs.

Continue reading

Creating Dynamic Color Schemes with Theme Options and Presets

Creating Dynamic Color Schemes with Theme Options and Presets

Color schemes with theme options and presets

Building for the unknown can be tricky, and clients or merchants always want some level of control when it comes to their websites. So how do we make our themes dynamic for clients?

In this article you will learn:

  • How to define theme options for colors in `settings_schema.json`.
  • How to use the `settings` object properties inside your CSS or SCSS files.
  • How you can create custom presets for a theme with `settings_data.json`.

Continue reading

Introduction to Shopify Theming for WordPress Theme Developers

Introduction to Shopify Theming for WordPress Theme Developers

Shopify for Wordpress theme developers

WordPress currently holds close to 60 percent market-share of the global CMS market, so it’s not surprising that most developers have worked on at least one WordPress project in the past. There are a lot of similarities in theming between WordPress and Shopify — let us help you speed up your development workflow by showing you what those parallels and differences are.

In this article you will learn:

  • The main differences between Shopify and WordPress, and their basic content elements.
  • How to extend the functionality of the Shopify platform.
  • The similarities and differences in theme structure, templates, and asset management between Shopify and WordPress.

Continue reading

jQuery Image Zoom for Shopify in 5 Easy Steps

jQuery Image Zoom for Shopify in 5 Easy Steps

jQuery image zoom

When selling online, one of the most requested product features is image zooming. Zooming is often used on a product image to enlarge it for better viewing by potential customers. In this tutorial, we’ll go over the steps to implementing the jQuery Zoom plugin within a Shopify theme.

In this tutorial you'll learn:

  • When and how to check if jQuery already exists in a theme.
  • How to edit the featured image markup in product.liquid to link the jQuery Zoom plugin.
  • How to link and initialize the plugin and start zoomin’.
  • Alternative product image zoom plugins and apps.

Continue reading

Live Reloading Shopify Themes: Sass Compilation with Theme Kit and Prepros

Live Reloading Shopify Themes: Sass Compilation with Theme Kit and Prepros

Live reloading Sass with Shopify and Prepros

No one likes refreshing their browser every time you make a change to a file during development. It takes time, and time is something we all wish we had more of.

This article will take you through integrating Prepros into a Theme Kit development workflow, step-by-step, so you no longer need to reload your browser to see your changes.

In this tutorial you will learn:

  • The directory structure for a Shopify with SCSS project
  • How to setup and configure Prepros with Theme Kit
  • How to setup live reloading on a live Shopify store

Continue reading

Grow your business with the Shopify Partner Program

Learn more