Shopify Tips, Tricks, and Resources

There are a lot of things when first developing and customizing your shop for Shopify that isn't so straightforward and a lot of these customizations / snippets of code I either found or wrote myself. I'll be adding more as I go, but these were a few I thought were worth sharing. I hope it helps! — Tiffany


Update the Product Subtotal when Quantity Changes (jQuery)

Sometimes you want to show a subtotal when a user chooses more than one quantity of a product. This updates a div on the page '.subtotal' with the new dollar amount. Simply put it multiples the quantity chosen by the user with the product price.

Select
								$('#quantity').bind('change', function(){ 
qty = $(this).val();
$('.subtotal').html(Shopify.formatMoney({{product.price}} * qty, "{{shop.money_format}}"));
});

Changing the Product Image When Selecting Different Product Variants with Radio Buttons (jQuery)

This was the simplest way I felt to change the product image when a user clicked/selected different product variants. First, you'll need to add ALT tags to the product images that you want to connect to their corresponding product variants (if your variant is 'Red', add an ALT tag 'Red' to the red product image). Next, in your product.liquid you'll need to display all of your product images with the alt tags and then hide them with css. You should just have the 'featured' image show up. With jQuery you can bind a change either for a select form field, or in my case I had radio buttons, to check if the label/variant name matches the image ALT tag and if it does it'll pull the correct image link.

Select
								$('input[name=id]').bind('change', function(){   

// get the currently selected label/variant name
var label = $('input[name=id]:checked + label').text();

// get all of the image ALT tags that we hid with CSS and check if any of them match the currently selected label/variant name and replace the Featured image with the new image URL
$('.thumbnails img').each(function(){
if ($(this).attr("alt") == label) {
$('#Featured img').attr("src", $(this).attr("src"));
}
});

});

Styling "Product Collections" - http://your-shop.com/products

Shopify automatically generates this page (I'm still debating if I like this or not). Here's the if conditional to put into the theme.liquid template to allow you to check if you're currently on this page (which is different from the collection.liquid template), so you can include a snippet template, 'list-collection', to style the page, or add additional code.

Select
								{% if template == 'list-collections' %} 
{% include 'list-collection' %}
{% else %}
{{ content_for_layout }}
{% endif %}

Creating a Front End Form for User Account Sign Up

If you want to add an account sign up form on your page, without having to link to the Shopify customer account login at /account/login you can just take the code you find under the Templates file 'customers/register.liquid' (if this doesn't exist just click 'add a new template' and create it) and copy the form code and paste it to the template you want on your site and style to your hearts content.

Select
								{% form 'create_customer' %} 
....form elements....
{% endform %}

Redirect After Account Sign Up

Add an input field with these attributes (this input field goes in between the form opening and closing liquid code), the value being the URL you want the user to be redirected to.

Select
								type="hidden" name="return_to" value="http://your-site.com"
							

Using Different Layouts for Specific Templates

This is pretty basic, but I wasn't sure of how to do this without searching for it in the beginning. If you want to use a different Layouts template than theme.liquid add this tag at the beginning of your template (collection, page, blog, article, etc) and create a new Layout template, in this case I created 'secondary.liquid' under Layouts.

Select
								{% layout "secondary" %}
							

Hiding Pages in Search Results

I really don't like that you don't have control over your sitemap on Shopify (they generate site maps for all pages, collections, products, etc that you create). But you can use an if conditional to check for a template or page you want to exclude from search engines and insert this meta tag. 'noindex' means to exclude the current page and 'follow' means to allow the search engine to index the other pages on your site.

Select
								meta name="robots" content="noindex, follow"
							

Displaying Cart Items on a Wordpress Site or any Remote Website

This requires basic jquery/ajax knowledge, but it is simpler than you think! Shopify generates a JSON file for your cart, it's formatted like so: http://your-store.myshopify.com/cart.js. If you access the URL you'll see what the JSON output looks like, if you're not familiar with JSON. Read the dedicated post with code examples here.


Resources

Shopify Cheat Sheet
Lessons Learned from Building Shopify Themes

Let me know any of your favorite tutorials/sites that have useful Shopify tips and I'll check them out and add them above! Or if you have any suggestions for the few that I've mentioned here.