13 search results for “Levin Mejia”

Continue reading

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

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

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

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

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.

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.

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:

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

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.

Continue reading

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

Continue reading

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!

Continue reading

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. 

Continue reading

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.

Continue reading

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.

Continue reading