shopify theme from scratch

Chapter 7

Product.liquid

The product page

This page will display the individual product to the customer.

Let's generate our product title and product description.

  <div id="product-description">
    <h1>{{ product.title }}</h1>
    {{ product.description }}
  </div><!-- product-details -->

Now we are going to show the customer all the variants of the products, but before we do that let's right an "if" statement incase the product is not available

  <div id="product-details">
    <h1>{{ product.title }}</h1>
    {{ product.description }}
   {% if product.available %}
      This product is available!
   {% else %}
      Sorry, the product is not available
   {% endif %}
  </div><!-- product-details -->

In order for Shopify's "Add to cart" functionality to work we are going to have to wrap the product's variants and "add to cart" button inside a <form> with the action="/cart/add".

We are not going to worry about products with multiple options (products that have more than one attribute, like a color and size). Our product page will only be able to handle product variants.

  <div id="product-details">
    <h1>{{ product.title }}</h1>
    {{ product.description }}
   {% if product.available %}
   <form action="/cart/add" method="post">
     <div id="product-variants">
       <select id="product-select" name='id'>
         {% for variant in product.variants %}
         <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
         {% endfor %}
       </select>
     </div><!-- product-variants -->
     <input type="submit" value="Add to cart" id="addtocart" />
   </form>
   {% else %}
      Sorry, the product is not available
   {% endif %}
  </div><!-- product-details -->

Lets go over the code we just wrote

  1. <form action="/cart/add"... This tells Shopify when the submit button is submitted add this product to the customer's cart
  2. {% for variant in product.variants %}Products have can have multiple variants. This line tell's Shopify to go through each of those variants
  3. {{ variant.id }} Every variant has a unique id, this line outputs that id
  4. {{ variant.title }} Outputs the variant's title
  5. {{ variant.price | money }} Outputs the variant's price. The money filter formats our number.
  6. <input type="submit" value="Add to cart"..When the user clicks this is activates our <form>'s action

Vision doesn't support the cart functionality. So when you try to add your product, Vision will simply redirect you to the checkout page

Product Addtocart

Now we are going to generate a link to similar products and more products by this vendor. 

  <div id="product-alternative">
    <h3>Like what you see?</h3>
    Browse more {{ 'products like this' | link_to_type }} or more products by {{ product.vendor | link_to_vendor }}.
  </div><!-- product alternative -->
  1. {{ 'products like this' | link_to_type }} the link_to_type filter tells Shopify to generate a link to the product's type.
  2. {{ product.vendor | link_to_vendor }} link_to_vendor tells Shopify to gernate a link to the product's vendor. We use product.vendor to generate the product's vendor
Products Morelikethis

The last thing we need to do is to generate the product images!
This is the code:

<div class="product-images">
  {% for image in product.images %}
  
   {% if forloop.first %}
   
    <div id="first-image">
    <a href="{{ image | product_img_url: 'large' }}" title="{{ product.title }}"><img src="{{ image | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" /></a>
  </div>
  
   {% else %}
   
    <div class="product-images">
      <a href="{{ image | product_img_url: 'large' }}"  title="{{ product.title }}"><img src="{{ image | product_img_url: 'small' }}" alt="{{ product.title | escape }}" /></a>
  </div>
  
   {% endif %}
   
  {% endfor %}
</div>

The first we do is write the loop statement: {% for image in product.images %} in english this says: for every image in the product's images do this...

 {% if forloop.first %}
 
  <div id="first-image">
  <a href="{{ image | product_img_url: 'large' }}" title="{{ product.title }}"><img src="{{ image | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" /></a>
</div>

 {% else %}
 
  <div class="product-images">
    <a href="{{ image | product_img_url: 'large' }}"  title="{{ product.title }}"><img src="{{ image | product_img_url: 'small' }}" alt="{{ product.title | escape }}" /></a>
</div>

 {% endif %}

In the code above we add an if statement: {% if forloop.first %}. There is a property we can use called forloop and one of those attributes is first. To put this into context we are telling Shopify for the first image do this, if it's not the first image then do something else.

So if the image is the first image Shopify is going to do this:

  <div id="first-image">
    <a href="{{ image | product_img_url: 'large' }}" title="{{ product.title }}"><img src="{{ image | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" /></a>
  </div>

Let's break down the code:

  1. {{ image | product_img_url: 'large' }} We use the filter product_img_url to tell Shopify to render the image's url. Shopify has different sizes for images and in this case we specified large
  2. {{ product.title }} Outputs the products title
  3. {{ image | product_img_url: 'medium' }} For the <img>'s src we need the image's url. So (again) we use the filter product_img_url to get Shopify to generate the url of the medium version of the image
Product Productimages