Shopify Theme from Scratch Part 5: product.liquid
Shopify Theme from Scratch Part 5: in this tutorial we’re going to be building the product.liquid template, which is where customers add products to the cart.
The product page is where you see the details of an individual product. This includes the product images, options, descriptions, and more.
This part is a doozie, so grab a Red Bull™ and let’s do it up!
1. Open a product with Multiple Options
Navigate to the “Awesome Sneakers” product, and open it on your storefront.
We’re going to be working with this dummy product because I’ve already added some options and variants to it.
2. Add the initial markup
We’ll start off by setting up the “skeleton” of the product template. Delete the contents of product.liquid, and add the code below:
We’re going to lay out the product images in a column on the left-hand side, and the product info on the right-hand side.
3. Output the product images
When you upload a product image, Shopify generates different sizes of that image. You can see a list of all the different sizes here. Here, we’re loading up the ‘grande’ version of the image, and we’re going to wrap it in an anchor tag so that when clicked, it goes to the bigger ‘original’ version.
Let’s do a for loop through the product.images array to output the other product images. I’m going to use the offset filter to skip the first product thumbnail, as that would be redundant.
Let’s add the CSS to style these images nicely. Open style.css, and at the very bottom at the following snippet of code:
/**** product.liquid ****/
.product-images{width:406px;}
.product-images{margin-right:30px;}
.product-images img{max-width: 100%; height: auto;}
.product-featured-image{border: 1px solid #ccc; padding:10px; margin-bottom:20px;}
.product-img{border: 1px solid #ccc; text-align:center; padding:10px; margin: 0 20px 20px 0; width:100px;}
Here’s a screenshot of the product page so far:
4. Output product details
Next, we’re going to fill up the right side of the product page with product details, including: product title, price, variants & options, and description.
Open product.liquid, and insert the code in red below.
{{ product.title }}
{{ product.description}}
You should now see the product details being output, but we need to add some CSS to make it align properly on the page.
Open style.css, and insert the following CSS to the bottom:
.product-details{width: 524px;}
.product-header{margin-top:0px;}
.product-desc, .price-field, .product-form{margin-bottom:30px;}
.price-field{font-weight:bold;}
.product-form{text-align: right;}
.selector-wrapper{padding:10px 0; border-bottom:1px solid #ccc;}
.selector-wrapper label, .selector-wrapper select{display: inline-block;}
.selector-wrapper label{float:left;}
.selector-wrapper select{float:right;}
.product-variants{margin-bottom:10px;}
Still inside style.css, scroll up to the global CSS section, and insert the code in red below:
/**** global css ****/
.left{float: left;}
.right{float: right;}
.last{margin-right:0px !important;}
.btn{background: #2c2b2b; border: none !important; display:inline-block; color:#fff; padding:9px 13px; text-transform: uppercase;font-size:0.8em; font-weight: bold; border-radius: 8px;}
.btn:hover{background:#585656; color:#fff;}
Here I’m introducing a new class called .btn, that will be applied to all buttons in the theme. Your product page should now look like this:
5. Plug in selectCallback
Open product.liquid, and insert the following script at the bottom:
What is this selectCallback function?
selectCallback is a very important Javascript function that is used on the product template. Its main purpose is to split up a product’s options into multiple dropdowns, based on how many Options a product has. What’s important to know about selectCallback is that it triggers every time a user selects a different variant using the dropdowns. This means that it can be used to output information of the currently-selected variant such as price, compare at price, SKU, inventory quantity, etc. (for a full list of what can be output, see http://wiki.shopify.com/Variant).
Notice how the price and availability of the variant now update as you select different variants from the dropdowns. That’s selectCallback at work baby!
6. Add links to navigate within a collection
The last thing we’re going to do is have links for navigating to the next and previous products in a collection.
The {% if collection %} statement makes it so that the links are only output if a customer arrived at the product page via a collection.
Open product.liquid, and paste in the code in red below.
{{ product.title }}
{{ product.description}}
{% if collection %}
{% if collection.previous_product %}
{{ '← Previous Product' | link_to: collection.previous_product }}
{% endif %}
{% if collection.next_product %}
{{ 'Next Product →' | link_to: collection.next_product }}
{% endif %}
{% endif %}
If you go to a product through a collection, you should now see a next/previous link under the product description (Figure 5.4).
That is all for now!
34 Comments
Nice work man!! Really Helpful. I just have a question, Is there any way by which we can show List of Best Selling Products. This shouldnt be a category but should be generated dynamically.
Thanks
Amandeep Singh
@Amandeep Unfortunately not – there is no way to check for how many time a product/variant has sold via Liquid. It’s not part of product.js either :(
Hey Tetchi, quick question, I’ve been trying to create two columns in the description for a product (achieved through a hasty table scaffold), but I would like the two columns to have different styles (they’re two different languages). I tried using table style, but looks like that only works within the product description on the admin side, not on the web side. Any ideas?
Thanks for the reply Tetchi. I am working on a shopify project (Online Book Store) and as you know we do not really have so many fields by which we can show Author, ISBN Number etc. So Is there way by which I can add custom fields (like we can add in WordPress). I’ve read about MetaFields but how can I use them in my store? May be you can write a blog post/tutorial on this :)
Thanks
Amandeep
@Rodolfo
Can you post the link/url?
Hi Amandeep! The example is here: http://www.revvapor.com/products/caramelcappuccino
The idea was to have the English translation in a lighter color – let’s say a lighter grey.
I can probably also do some funky crafting with tabs and but I’d rather avoid that option since the description is shared with Vend. But if tabs and <!– split is the only way to divide it out, then that might have to be the option.
@Amandeep I’m not too familiar with metafields, but I can certainly work on a tutorial after I’m done with this series :)
@Rodolfo
May be this will help : http://jsfiddle.net/vQq8v/
@Amandeep
Thanks, I’ll try it out. Looks similar to what I was trying out with straight up, old fashioned HTML tables (yeah, I really need to get a good handle on CSS).
http://jsfiddle.net/sYtQ8/
It seemed to me, even though none of the CSS related to the product.description was stripping out the HTML, it just wasn’t passing the color through the call (even though it worked marvelously in the admin panel).
Cheers,
Rodolfo
One super minor thing, but as per the product .csv uploaded way back when, this product is only showing 1 product image besides the featured image (just the Beatles cover, not the other three sneakers)
Also, according to http://wiki.shopify.com/Product_img_url, it seems like using product_img_url: ‘original’ is depreciated. What’s the right way to get the original image size?
Thanks for catching those Ben, I’ll make those amendments when I get a chance!
Great tutorials man. I’m just having one issue right now.
When attempting step 5: “Plug in selectCallback”, it doesn’t split up the variants in the desired way. It seems like selectCallback isn’t being called in the mark up.
@Kyle That’s strange… would you happen to have the URL of your shop handy?
Right here: http://kyle-test.myshopify.com/
@Kyle you’re loading jQuery after the script for selectCallback. The script tag that loads jQuery needs to go in the <head> section, not at the bottom of the theme. See Step 2 of Part 1.
My goodness! What was I on when I did that?
Thanks for the help tetchi, I appreciate it.
No worries Kyle :) Cheers!
Heyah!
Quick question. I copied and pasted the JavaScript code as it was, without changing anything, and I think there is something wrong with it. It shows different variants as you can see on the screenshot you included in the post, but when I want to check what Size variants or Title variants are available, it just shows me “test”, not the actual variants (I hope this explanation makes sense ;) ). Any ideas why it is happening? Again – I just copied and pasted the script, as I don’t know JavaScript, and didn’t change a thing.
Hey Kas, what’s the URL of the shop you’re working on?
http://cassia-test-shop.myshopify.com/
I took a look at your product template (ex: http://cassia-test-shop.myshopify.com/collections/frontpage/products/awesome-sneakers) and it appears to be working fine. Selecting the different options changes the price and availability properly.
That is weird, because I get this: http://imageshack.com/scaled/large/9/it2w.png
http://imageshack.com/scaled/large/855/pqqt.png
That looks correct to me Kas – have a look at the variants of that product: http://take.ms/P7gQQv. The options in the dropdowns look like they match with what’s shown in the admin page for that product. Let me know if you still need a hand.
Oh yes, sorry. I don’t know why but I assumed straight away that it only shows the test PAGE, not a variant. Thank you! And sorry again
hey no worries Kas! Let me know if you run into something again.
Thanks, i’ve just finished the whole tutorial and so far so good ;). Just waiting for the last part now!
Awesome! I’ve been a little caught up with stuff and haven’t had time to finish the last one, I’m going to get it done ASAP! Cheers Kas.
Hi Tetchi
Thanks so much for this tutorial, is a huge help! I was wondering (and maybe this is out of your remit!) but if I wanted to only have the product variants appear if I add one how would that work or dose there always have to be one variant present?
Thanks again man!
Rory
The http://wiki.shopify.com/Product_img_url link is going to a 404 error page.
But I think the info can be found here http://docs.shopify.com/themes/filters/product-img-url
Hey, just out of curiosity, how would you hide unavailable options from a dropdown? For example, I have mens and womens shirts with 6 mens sizes and 4 womens sizes but all six sizes show when I have “Womens” selected from the first dropdown when it should only show 4.
It displays an “out of stock” on the button implying that these products exist when they do not and are just out of stock. Seems like if those options don’t exist, they shouldn’t show at all.
I was a bit confused by the JavaScript until I found the documentation for Shopify.OptionSelectors here: https://docs.shopify.com/support/your-website/themes/can-i-make-my-theme-use-products-with-multiple-options#instantiate-shopify-optionselector
To avoid listing unavailable product combinations, Shopify has provided another useful snippet: https://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options
Thanks again for the tutorial Tetchi!
my desc area is not flowing to the right of page, stuck in step 4 , plz help
@Atif send a link. I can take a look at it