Shopify Collection Page Layout - Image, Video, then Text + Add to Cart Button

Question

I essentially brand new to the Liquid engine. However, I program in several languages so I figure I can conquer Liquid with a few pointers.

I want my collection page to layout products like they are laid out here: http://www.boombycindyjoseph.com/pages/store

It's a 3 column layout with an Product Image on the left, Product Video in the Middle, and Text + Add to Cart on the right. I won't have a video for every product so I'll need to have some form of default placeholder in the middle.

Note that the Product Image is not the same as the Product Image in the Product Page. While optional, this would also be nice.

My Googling just led to simple answers like how to add a video to your product page.

So I could use a little help on where to start editing this. My guess is that it would be in either the collections-template.liquid, collections-grid-item.liquid, or collections-grid-collage.liquid files.

From there, do I need to add my Product Image and Product Video for the Collection Page to the Asset list or (better) somehow add a couple of fields to the product.liquid file that allows me to enter them when I have them.

Answer 1

If you're using Timber then product-grid-item.liquid in snippets is what the collection will loop to generate each of the listings. From what you've listed it looks like it'd be collections-grid-item.liquid.

Product images you can pull from the images uploaded to, something like <img src="{{ product.featured_image.src | img_url: 'large' }}" > within the loop.

To get an image that's not the first, try <img src="{{ product.images[1] | product_img_url: 'large' }}">

Video can be uploaded either to assets or Settings > Files, then you can use a naming convention to grab it from within the loop. I.e. Let's say you have a product called 'blue tshirt', the video can be called 'blue-tshirt.mp4' and then to grab the video within the loop it'll be something like: <video src="{{ product.title | handleize | append: '.mp4' }}"></video>

Timber would be a good starting point as you'll probably learn quickest through that rather than a premade theme.

https://shopify.github.io/Timber/

This is also a good resource for getting a handle on the different Shopify objects:

http://cheat.markdunkley.com/

EDIT:

If your asset doesn't exist, check this link:

https://ecommerce.shopify.com/c/ecommerce-design/t/testing-if-a-file-exists-29624

Answer 2

On my site, the file called product-grid-item.liquid, in the Snippets folder, is what controls the layout on the Collections pages or a section containing a collection. The below is the code that controls which images are shown on the preview, normally it's the first and last image (product.images.last) by default. I changed mine to show the master (first) image and second image. To make things simple, put the main product image first when uploading a new product. If you want a collections page to only show one preview image you can comment out the 'reveal' class and the first span below.

<div class="ImageOverlayCa"></div>
        {% if product.images.size > 1 %}
        <div class="reveal"> 
          <span class="product-additional">      
            <img class="" src="{{ product.images[1] | product_img_url: 'master' }}" alt="{{ product.images[1].alt | escape }}" />
          </span>
         <img src="{{ product.featured_image.src | img_url: 'master' }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
        </div>      
        {% else %}
        <img src="{{ product.featured_image.src | img_url: 'master' }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
        {% endif %}