Last week, we hosted a Partner Session webinar with Joe Leech, who introduced us to three steps that create ecommerce websites that convert.
If you missed the live event, take a look at today's post and learn how each high-impact step can help you build better.
We’ve all been there; the work is piling up and the deadlines are fast approaching. The last thing you have time for is your own website. But neglecting it can lead to a number of negative consequences.
Instead, consider these five easy ways to update your website (without a complete overhaul), to help it look fresh and ready for business.
Any moment of purchasing hesitation – even a short one – can have a big impact on conversion. One way to combat that hesitation is to add a sticky ‘add to cart’ button that follows the customer as they scroll through a product's description.
In this article, we'll go over a couple methods you can use to implement a sticky ‘add to cart’ button in every project you take on.
If you've ever had to create multiple custom Liquid product templates to accommodate unique product data, you know how difficult it is to manage. Save yourself all the headaches and use metafields instead.
In this article, you will learn:
If you work with Shopify Themes, you know that developing a strong understanding of the basics of Liquid is just the start. There are countless tips, tricks, and hacks you can use to reinvigorate your theme design process and, ultimately, make you more efficient.
This article will provide you with an overview of four advanced theme development techniques that were covered in our most recent Partner Session webinar. I hope you find these code snippets and resources useful as you build your next store or theme on Shopify.
The first thing we did in the Partner Session was import a set of products and create product collections to provide us with live product data to work with, like product variants and images. We recently published a set of product CSVs and images that you can start using for your own shops, designs, and mockups. To learn how you can use these product CSVs and images, check out our step-by-step guide!
In order to get started with advance theme building techniques, you’ll need a pretty solid understanding of Liquid concepts. If you’re new to Liquid or looking to learn a new language, check out our collection of Shopify Tutorials on the Shopify Web Design and Development Blog.
How Liquid output tags work
How Liquid filters work
Now that we’ve got a basic understanding of Liquid, let’s take a look at four advanced theming techniques you can add to your workflow.
You might also like: An Overview of Liquid: Shopify's Templating Language
Dynamic product type tags are a great way to improve the buying experience in your client’s store. Dynamic product type tags make it easy for buyers to click on a product type, such as jackets, and browse all similar product types. Buyers can also click on particular tags like brand, year, women, or men depending on the tags set up on the store. The following code snippet will create a clickable dynamic product type tag and will list all associated tags for that product which will also be clickable.
Show type:
Display and add links to all product tags:
If you would like to request information from a buyer, such an engraving details, you can add a line item property to your product page to request that information. Just insert the following code snippet to add a line property to any product page:
You might also like: The Power of Link Lists
Why use snippets? Snippets help us reuse and repurpose lines of code, and they also help us organize long templates into just a handful of snippets. For example, the following code snippet will return a list of 5 related products:
If you’re looking for more information about incorporating these into your workflow, check out our top tips for using snippets.
In the partner session, we discussed how we can create an order form from a collection using a custom collection template. Your client may have buyers who buy products in bulk and an order form is a good way to improve that buying experience. The following code will create an order form for our collection. To learn more about the following code, check out our documentation.
You might also like: The Essential List of Resources for Shopify Theme Development
Head over to our webinars page to register for upcoming webinars and to check out our previous Partner Sessions.
Starting a new Shopify project for a client is very exciting. You’re itching to put your first design ideas in Sketch and get a working prototype ready for your client to review. The problem is that before you get to any of the fun stuff, you end up wasting a few hours on the web searching for quality product data like product images, names, descriptions, and prices.
Alternatively, deciding to use Lorem Ipsum generators or the same product image over and over again for your design may be a shortcut, but this approach will not showcase a meaningful and realistic concept of the final product. However, there’s good news. We have compiled quality product data, like beautiful product images, into JSON. This data can be imported into Sketch Data Populator, so you can start using realistic product info in three easy steps.
Why use realistic data? The makers of Sketch Data Populator, Precious Design Studio, believe designers should work with meaningful and realistic data as early as possible in the design process for the following reasons:
Sketch Data Populator will not only make you more productive, it will change the way you design user interfaces. So, let’s get started:
You might also like: 2 Real-Time Features That Every Developer Should Include in Their Ecommerce Sites
We forked the Sketch Data Populator project on Github to add our own presets of product data and have modified the name. You can install the Sketch Shopify Data Populator on Github.
Sketch Shopify Data Populator.sketchplugin into your Sketch Plugins folder. In Sketch 3, choose Plugins › Reveal Plugins Folder… to open it.For this tutorial, we’ll populate a product grid and product detail layout with realistic product data using the presets in the plugin. Starting with the grid layout, we will want to display an image, product name, and price as a 3-row and 3-column layout. To do that, we’ll draw a rectangle shape to host our product image with two text fields, product name and price, in Sketch:
The names of the layers shown above reflect the named variables in our JSON file, but feel free to mix and match variables to create your own unique layouts in your own designs going forward. Here’s a sample of the JSON file with all of the variables listed:
Now we’ll design our product detail page layout with one large featured image, three thumbnail images, a product name, a price, and a description. The layers are named to match the JSON variables we saw above in the JSON snippet.
Now that we have designed our product layout and named our layers, it is time to populate them with real data from our plugin presets. Let’s start with our grid layout. Highlight the layers, go to Plugins > Sketch Shopify Data Populator > Populate with Preset. Make sure that ‘apparel’ is selected from the dropdown preset, check ‘Create Grid’, set your setting, and click Populate.
That’s it! Your product grid is now populated with meaningful and realistic products.
If you would like to cycle through the other products available in the data presets, go to Plugins, hover over Sketch Data Populator, and click Populate again. Alternatively, you can perform the following shortcut: Command + Shift + X
For our Product Detail page, we’ll use the same concepts as the grid above with a couple of new data variables to get dynamic thumbnails and full product descriptions:
Now we can select all of the layers: go to Plugins > Sketch Shopify Data Populator > Populate with Preset > Uncheck ‘Create Grid’ > Click ‘Populate’. When we populate again, our design will dynamically add thumbnails to the product, if thumbnails are available for that product.
Here’s a look at the final layout complete with product info and dynamic thumbnails:
Clients sometimes have a hard time visualizing how a prototype will lead to a final product. Working with real data for your concepts will help you make better informed design decisions, and when you’re ready to present the concept to your client, you’ll be able to show them a prototype that reflects a realistic final product. Better yet, if your client already has a Shopify store or products, try to incorporate their actual product images and descriptions to really wow them when you present your final concept.
In this post, we saw how easy it can be to start using real data with the Sketch Shopify Data Populator and its built-in presets, so you can hit the ground running with your next project. Start using quality images and product data resources mentioned within this article next time you’re working in Sketch to build better informed and meaningful designs.
You might also like: 5 Simple Google Analytics Reports You Should Create for Every Client
In early December of last year, we hosted our first Partner Session webinar. In the webinar, we covered the basics of designing themes for the Shopify platform. From theme structure to the basics of Liquid, attendees got the full picture of what it takes to develop a beautiful and functional Shopify theme.
At the end of the hour-long webinar, we opened the floor to a Q&A session where we answered several questions from our attendees. We noticed that many of these questions touched upon important aspects of the theme building process and had potential value for the partner community outside of the webinar — so we decided to share them.
With that being said, here are the top 10 questions from the webinar answered.
Explore Shopify Liquid Code Examples
Visit our searchable library of Liquid code examples based around theme components. Learn how various Liquid objects, properties, and filters work together as part of components within a theme. Add them directly into themes to build and customize themes faster and more reliably.
Visit Shopify Liquid Code ExamplesThere aren’t any specific IDEs created purely for Liquid. However, you can build Shopify themes through any modern browser using Shopify’s admin tool. You can also install the Shopify Theme Gem, which will allow you to work locally and have your changes synced to your development or live store in the background. Text editors including Atom and Sublime also have Liquid syntax highlighting packages available.
Upload your logo image file to the assets folder and use the following Liquid code snippet:
{{ ‘name_of_your_file.jpg’ | asset_url | img_tag }}
The first step is to create a free Shopify Development store through your Partner dashboard, get your free Partner account here. A Development store gives you access to all the features of a paid Shopify store for free, you even perform test transactions. On the live Shopify store export the current theme to a zip file which you can upload to your Development Store. To down a current theme navigate to: ‘online store’ > ‘Themes’ > click the ‘ … ‘ button, this will provide you with a dropdown > click ‘Download theme file’. Zip up the downloaded files and navigate to the themes page in your development store and click ‘Upload Theme’.
Furthermore, you can export the product detail and images from the live store as a CSV file and import them to your sandbox environment so you can work with your client’s products. Navigate to the products page in the Shopify admin and click ‘export’, download the CSV and import it in your sandbox environment.
Yes, this is possible. On the online theme editor inside the Shopify admin inside the Templates folder you will see a link to “Add a new template”. This will prompt you to create a new template. Select, product from the dropdown list and then provide you template with a unique name. You are then able to pick off the relevant product template you would like when editing an individual product in the admin.
You can add classes to a liquid img tag like so:
{{ image | img_tag: 'alternate text', 'css-class', 'small' }}
If you’re looking to add inline styles, I suggest using this alternative:
<img src="{{ 'hero.png' | asset_url }}" 100="" />
To learn more about the img tag please visit our documentation.
For a full list of available Liquid and Shopify tags available, variables, and properties available in the templates please visit this Shopify Cheat Sheet.
In 2014, $4,158,700 was paid to theme developers. If you're interested in building themes with Shopify, learn more by checking out our approval process for theme submission.
Yes, srcset is possible with the following code:
{{ product.featured_image }}
<img src="{{ product.featured_image | product_img_url: " small="" srcset="{{ product.featured_image | product_img_url: " medium="" 1000w="" product="" featured_image="" product_img_url:="" large="" 2000w="" alt="My Awesome Product" />
If you would like to learn more about srcset, you can learn more on CSS Tricks.
Our in depth documentation has many details about our global theme assets including customers accounts and dependant variant selectors.
Yes, and in fact we have a great post on our Web Design Blog with a list of 10 of our favourite stock photography websites.
You might also like: 4 Advanced Shopify Theming Techniques to Add to Your Workflow
Theming a shop for the holiday season is a clever way to turn casual browsers into buying customers. When your client’s shop is themed for the holidays, it will excite their visitors and get them into the holiday shopping spirit.
In this tutorial, I’ll go over four simple ways that you can theme a shop without a lot of effort, so you can give your client's store a quick holiday make-over just in time for the holiday rush. Plus: read to the bottom to find out how you can win the Christmas Mockup Scene Generator tool that I use in this tutorial!
In this tutorial, we will show you how to implement Scalable Vector Graphic (SVG) icons on your site in a few easy steps, and we’ll explain how you can take your icons to the next level with animations.
Using icons on your site allows you to effectively communicate with your visitors by increasing readability, highlighting important content, re-enforcing functionality or features, and enhancing the design. We have compiled a great list resources where you can download free and premium icon packs to use in your existing and future projects.
