2. Look for the selectCallback function in shopify apps


If you’re using a theme from the Shopify Theme Store are useing shopify apps , the chances are high that it is using the OptionSelector javascript. This means that the theme contains a function called selectCallback.

The selectCallback function is called whenever a user selects a different option through the options dropdown menu, and it’s used to update the variant’s price and Compare At price. Since the image-swapping needs to happen when the user selects a different option, why not place our JS in selectCallback? 😀

What you can do is place the code in the Step 3 inside the selectCallback function, which is usually located in “product.liquid” or “theme.liquid”. In Radiance, it is located at the bottom of “theme.liquid”.

What if your theme does not use OptionSelector? Worry not, there are other solutions. Your theme may be using a dropdown menu or radio buttons for single-option products. In that case, you can use jQuery’s change() method instead to trigger the Javascript code in Step 3.

Advertisements

Hide the thumbnails in shopify and in many more area


The next step is to hide the thumbnails with CSS in shopify apps. This step is optional, but to me it makes sense to hide them because the variant-selecting dropdown should be the only thing that controls what’s shown as the main image.

To do this in the Radiance theme, I simply added the existing “hidden” class to the

    that contains all of the thumbnails, as shown below. It’s important to still output the images (although they won’t be visible) because 1) we can pre-load the images and 2) we need to grab the ‘src’ attribute of the images when we swap the main image inside #active-wrapper.

    I’m also going to change the product_img_url value inside the <img&rt; tag from ‘thumb’ to original, so that we load the biggest possible product image inside #active-wrapper. In reality you can strip out a lot more of the code below, but for the purpose of this tutorial I’m just going to keep it as is.

1. Set up your product variants and product image alt tags.


The first thing you must do is match up your product’s variants with your product image’s alt tags. In order for this to work, the product’s variants must be exactly the same as the product image’s alt tags. The screenshot below shows you an example of a proper setup.

It’s important to note that you can only make a product association with one option. You can certainly have up to three options for your product (for example, I added a “Size” option here), but only one will affect what product image is shown. In step 3, you’ll see how to choose which option is tied to the product images.

Associating Product Variants with Product Images in shopify app


In Shopify app you can associate your product variants with product images using jQuery and Shopify’s app in new feature for adding unique alt tags for product images. For demonstration purposes I’m going to be modifying one of Shopify’s free themes, Radiance, but this technique will work with any theme. You can check out demos of this in action here (single option) and here (multiple options).

The screenshot below shows what the Radiance’s theme looks like initially. The first thing we’re going to do is set up the product’s variants and alt tags. After that, we hide the #thumbs

    . Finally, we’re going to add some Javascript to make it so that the options dropdown in the top-right corner changes the image inside the #active-wrapper div with the appropriate product image. For example, if you select “Black” for colour, #active-wrapper will show the product image with the black shirt or any other product.

A Basic Skeleton to Get Started in shopify app


The best thing about designing for Shopify is that you get to use all of the skills that you already have: HTML, CSS, JS, etc. The only roadblock in the process is becoming familiar with which Liquid variables are available in each template.

What is Vision shopify app?

Vision is a stand-alone application that allows you to create themes for Shopify stores on your local machine without having to sign up for a shop or setup a database or all that other geeky stuff

What do I need to run Vision in shopify app?

Vision comes complete with everything needed to run straight out of the box. If you’ve got a text editor and a web browser installed, you are ready to roll.

As if that wasn’t enough, Vision comes pre-loaded with Shopify’s ready-made themes. Shopify has allowed people to use these themes as building blocks, so you can start with one of these existing themes as a base and expand upon on it!

Required Elements In Shopify App?


There are two VERY important elements that must be present in shopify a theme.liquid file. The first is {{ content_for_header }}. This variable must be placed in the head of your theme.liquid. It allows Shopify to insert any necessary code in the document head, such as a script for statistics tracking. For thsoe familiar with WordPress, this is quite similar to the wp_head() function usinging in shopify app.

The other VERY important element is {{ content_for_layout }}. This variable must be placed in the body of your theme.liquid; it’s the place where all of your other Liquid templates will be rendered.
templates folder: This folder holds the rest of your Shopify templates. It consists of:
index.liquid: Displayed as the main index page of your shop.
product.liquid: Each product will use this template to display itself.
cart.liquid: Displays the current user’s shopping cart.
collection.liquid: Displayed for collections of products.
page.liquid: Displayed for any static pages that the shop may have created.
blog.liquid: Displayed for any Shopify blogs for the shop.
article.liquid: Displayed for any blog articles and includes a form for submitting comments.
404.liquid: Displayed for anytime the shop returns a 404.
search.liquid: Displayed for shop search results.

As you might have guessed, each of these templates has access to different variables. For example, product.liquid has access to a product variable which contains the current product being displayed, blog.liquid has access to a blog variable, and index.liquid has access to all of them. If you’re interested in which variables you can use in which template, please review the Liquid documentation.

Anatomy of a Shopify Theme Very helpfull


Shopify themes all have a simple directory structure. It consists of an assets, layout, and templates folder. Let’s look at what goes where:

you can assets folder: In the assets folder you store all of the files that you want to use with your theme. This includes all stylesheets, scripts, images, audio files, etc. that you will be using. In your templates you can access these files with the asset_url Filter.

{ “logo.gif” | asset_url | img_tag: “Main Logo” }} #=> Main Logo

layout folder: This folder should contain just one file called theme.liquid. The theme.liquid holds the global elements for your Shopify theme. This code will be wrapped around all of the other templates in your shop. Here is an example of a very basic theme.liquid:
view plaincopy to clipboardprint?

{{shop.name}}
{{ ‘layout.css’ | asset_url | stylesheet_tag }}
{{ content_for_header }}

{{ content_for_layout }}

What Else Does Liquid Offer In Shopify App


In terms of Liquid Tags in shopify, besides the for tag, there are several others. Th most common ones are:
Comment:

{% comment %} This text will not be rendered {% endcomment %}

If/Else:
view plaincopy to clipboardprint?

{% if product.description == “” %}
This product has no description!
{% else %}
This product is described!
{% endif %}

Case:

{% case template %}
{% when ‘product’ %}
This is a product.liquid
{% when ‘cart’ %}
This is a cart.liquid
{% endcase %}

Check out the full list of Tags in shopify.

Liquid also offers plenty of filters you can use to massage your data. Some common ones are:
Capitalize:
view plaincopy to clipboardprint?

{{ “monday” | capitalize }} #=> Monday

Join:
view plaincopy to clipboardprint?

{{ product.tags | join: ’, ’ }} #=> wooden, deep snow, 2009 season

Date:
view plaincopy to clipboardprint?

Posted on {{ article.created_at | date: “%B %d, ’%y” }} #=> Posted on January 26, ’09