34 search results for “Tiffany Tse”

Using Placeholder Images for Products with the placeholder_svg_tag filter

Using Placeholder Images for Products with the placeholder_svg_tag filter

Placeholder images with Shopify SVG Tag

When beginning to build a theme or prototype, many developers use some form of placeholder text or image. This is usually because we want and need our websites to feel real, authentic, and similar to the final product. The `placeholder_svg_tag` filter gives developers the power to take advantage of SVG placeholder illustrations in their Liquid templates.

In this article you will learn:

  • The benefits of using placeholder images when you have missing content
  • How to use the placeholder_svg_tag filter
  • How to add custom classes to a Shopify SVG placeholder, and best practices for class naming

Continue reading

Understanding Shopify Theme Styles and Presets With settings_data.json

Understanding Shopify Theme Styles and Presets With settings_data.json

Shopify theme styles and presets with settings_data.json

Building themes, especially dynamic ones, can be hard. But creating theme styles with presets for Shopify themes doesn’t have to be. In fact, it can be super useful—especially if your theme might be used by many merchants, and you want to curate the experience they have when using your theme.

In this article, you will learn:

  • The differences between `settings_schema.json` and `settings_data.json`
  • The nuances of the `settings_data.json` file, and what input types Shopify considers presentational values vs. content values
  • How to manage multiple stores with a single theme using presets
  • Common gotchas when tracking changes

Continue reading

The 25 Best Sublime Text Plugins for Front End Developers

The 25 Best Sublime Text Plugins for Front End Developers

sublime text plugins

Every developer has their own tooling and special setup. It’s that tooling that can help you become a faster, stronger, and more productive developer.

We spent some time polling front end developers here at Shopify to get a list of all the essential Sublime Text plugins they just can’t live without.

In this article, we’ll share 25 Sublime Text plugins for front end developers.

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

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

Teaching Code: A Getting Started Guide

Teaching Code: A Getting Started Guide

teaching coding

Teaching code is more popular than ever, with hundreds of tutorials and resources on Coursera, Codecademy, Treehouse, edX, Udemy, Lynda, and even this blog! Education is important, and for large organizations, agencies, and freelancers, understanding how to teach is an invaluable skill. To keep up with technology we have to always be learning, and understanding some teaching techniques will help you level up your own team internally.

In this article, you will learn:

  • Why learning to teach effectively is important for your agency, business, and as an individual.
  • Techniques and tips on effective teaching.
  • How community and autodidactism aid in learning, beyond the classroom.

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

The 20 Best Visual Studio Code Extensions for Front End Developers

The 20 Best Visual Studio Code Extensions for Front End Developers

The Best VS Code Extensions 2017

Awesome tools help us build, break, and fix things faster. With this in mind, we’ve put together a list of the best 20 Visual Studio Code extensions for front end developers, to accelerate your work and improve your development experience.

In this article you will learn:

  • How to install VS Code extensions.
  • Which extensions to use for git blame, CSS go to definition, and even 🌈 rainbow brackets.
  • Specific editor enhancements and themes that will make the switch from Atom to VS Code a lot easier.

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

The 20 Best Atom Packages for Front End Developers

The 20 Best Atom Packages for Front End Developers

The best Atom packages 2017

We all know great tooling can help us move faster and be more productive when coding. To accelerate your work and improve your development experience, we’ve put together a list of the best 20 Atom packages for front end developers.

In this article you'll learn:

  • How to install Atom packages.
  • Which packages to use for git integration, embedded Stack Overflow snippets, and time travel.
  • Specific editor enhancements that will make you love the way Atom looks and works for you.

Continue reading

Grow your business with the Shopify Partner Program

Learn more