21 search results for “Levin Mejia”

4 Advanced Shopify Theming Techniques to Add to Your Workflow

4 Advanced Shopify Theming Techniques to Add to Your Workflow

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.

Setting up our store

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!

Quick Liquid overview

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

Advanced Theme Technique 1: Dynamic Product Type Tags

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:

Advanced Theme Technique 2: Customizable line properties

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

Advanced Theme Technique 3: Snippets

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.

Advanced Theme Technique 4: Custom collection templates



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

Join us for our next Partner Session

Head over to our webinars page to register for upcoming webinars and to check out our previous Partner Sessions.

Continue reading

10 Top Questions About Developing Shopify Themes Answered

10 Top Questions About Developing Shopify Themes Answered

10 Top Questions About Developing Shopify Themes Answered

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.

You might also like: Using Git to Simplify Shopify Theme Deployment

1. Are there any Liquid IDEs available for Macs and PCs?

There 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.

2. How can I add a logo from the assets folder within liquid?

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 }}

3. What is the recommended way to create a “sandbox” for a production site? Can you “clone” an existing Shopify site and move into a development sandbox?

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.

4. Is it possible to set up custom product types to have 2 different kind of product templates?

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.

5. How can we add classes or styling to the generated html, like the featured image?

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.

6. How do you know which objects are available in which templates? Is there a list of this somewhere in the documentation? e.g. {{product.name}} is available in which liquid files?

For a full list of available Liquid and Shopify tags available, variables, and properties available in the templates please visit this Shopify Cheat Sheet.

7. Are there statistics around theme sales? I’m deciding if it’s a smart business move to build themes. Perhaps there is an “average sales / theme / year” stat?

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.

8. Is product_img_url -> srcset possible?

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.

9. Shopify provides various global assets such as “shopify_common.js”, “option_selection.js”, etc. However, I have had difficulty finding what those global assets actually do and which pages they affect and should be included in. Could you give some insights or links to documentation for those?

Our in depth documentation has many details about our global theme assets including customers accounts and dependant variant selectors.

10. Are there any resources that you could recommend for royalty free images to use as example products in a theme?

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

Continue reading

3 Easy Steps for Working with Realistic Data in Sketch Using JSON

3 Easy Steps for Working with Realistic Data in Sketch Using JSON

Hero

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:

  1. Content informs design decisions (and helps you convey your purpose)
  2. Data is relentless (so UI components must be designed for robustness)
  3. It's fun (seeing your design evolve with meaningful data is motivating and rewarding)

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

Step 1: Install Sketch Shopify Data Populator

Realistic Data in Sketch Using JSON: Install Sketch Shopify Data Populator

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.

  1. Download the ZIP file (or clone the repository)
  2. Move the file Sketch Shopify Data Populator.sketchplugin into your Sketch Plugins folder. In Sketch 3, choose Plugins › Reveal Plugins Folder… to open it.

Step 2: Design your layout and name your layers

Realistic Data in Sketch Using JSON: Design your layout

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:

Realistic Data in Sketch Using JSON: Draw rectangles

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:

Realistic Data in Sketch Using JSON: JSON file with variables

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.

Realistic Data in Sketch Using JSON: JSON Snippet

Step 3: Populate with real data

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.

Realistic Data in Sketch Using JSON: Shopify Data Populator Plugin

That’s it! Your product grid is now populated with meaningful and realistic products.

Realistic Data in Sketch Using JSON: Populated Product Grid

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:

Realistic Data in Sketch Using JSON: New Data

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.

Realistic Data in Sketch Using JSON: Dynamically add thumbnails

Here’s a look at the final layout complete with product info and dynamic thumbnails:

Realistic Data in Sketch Using JSON: dynamic thumbnail

Using Real Data for More Meaningful Prototypes

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

Continue reading

Design Your Store Faster With Product CSVs and Images

Design Your Store Faster With Product CSVs and Images

Shopify product csvWorking on Shopify Themes is simple – you can do some pretty amazing things with little effort, and today it’s going to get even simpler. We have compiled a set of product CSVs which contain high quality images and product data, like variants, which you can import directly into your stores. The product CSVs will create high quality product data you can start working with when building your themes and stores on Shopify.

If you’re working on design concepts with Sketch or Photoshop, we have compiled a set of hundreds of beautiful product images you can start using in your designs. The days of wasting hours searching on the web for product images or using lorem ipsum — some of these lorem ipsum generators are pretty funny though — for product info are over. The product CSVs and images we’ve gathered cover the following four product categories:

  1. Apparel
  2. Fashion
  3. Snowboards
  4. Bikes

Even if your current project focuses on another vertical, using realistic product photos in your mockups can really help your client visualize the final product.

So, how can you start using these resources? We have them repository hosted on Github, and you can clone or fork the repository. Disclaimer: These images belong to the respective theme template owners and are only to be used for private use.

Download CSVs View Repository

How to import a product CSV

To start the product CSV import, head over to the Products Page in the Shopify Admin and click on “Import” found on the top right hand corner:

Shopify admin - import a product CSV

Clicking on import will bring up a modal window with an option to upload a file.

Shopify admin - import product csv modal

Click on “Choose File” and select the product CSV file you would like to use for your store. I will be using the “SnowDevil.csv” as an example for my this article.

shopify admin - product csv upload

Click “Upload File” and click “Start Import” on the following screen:

shopify admin - product csv review page

Depending on the CSV you selected to upload, the import can take up to 15 minutes to populate to your store. This is the perfect opportunity to grab a coffee or smoothie while Shopify imports the products to your store.

Once the import is finished, you will see several products in your store with valuable product descriptions, variants, thumbnails, and so much more that you can start working with right away.

shopify product csv - product page

Here’s that same product on my store using the free Venture theme by Shopify:

shopify product csv - final result

Product Images

Alternatively, you may be working on a design concept for a client and need some quality product images before you start writing a line of code. After you download the zip from GitHub, open the images folder to find hundreds of products you can begin to incorporate into your designs.shopify product csv - product images

Bonus: Sketch Shopify Data Populator

If you’re designing your concepts in Sketch, you may also want to check out how you can work with dynamic product data and images using our Sketch Shopify Data Populator. It’s really easy to use. All you have to do is build your layout as you would normally and populate the product content with the plugin. To learn more about the plugin check out our post accompanied with a step by step how-to video tutorial: 3 Easy Steps for Working with Realistic Data in Sketch Using JSON

Shopify Sketch Data Populator

More resources, less problems

We hope that the resources we’re developing and sharing with you are saving you time and helping you become more productive. If there is a resource you’re looking for, please let us know in the comments below. 

Join us for our next Partner Session

Head over to our webinars page to register for upcoming webinars and to check out our previous Partner Sessions.

Sketch Shopify data populator

Continue reading

Using Metafields in Your Shopify Theme

Using Metafields in Your Shopify Theme

Using Metafields: Hero

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.

Today, we'll go over a few examples, tools, and apps you can start using to get the most out of metafields.

Continue reading

12 Incredible Resources for Downloading Icon Packs

12 Incredible Resources for Downloading Icon Packs

Best resources for downloading icon packs

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.

Continue reading

Grow your business with the Shopify Partner Program

Learn more