Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Shopify for Designers Workshop

Shopify for Designers Workshop

This deck from the Second Wednesday, 12th March 2014

Keir Whitaker

March 14, 2014
Tweet

More Decks by Keir Whitaker

Other Decks in Technology

Transcript

  1. Image resizing Navigation lists CDN for all assets Page templates

    Redirect module Discount engine Gift cards
  2. assets -- site.css.liquid -- site.js.liquid config layout -- theme.liquid snippets

    -- footer.liquid -- header.liquid templates -- 404.liquid -- article.liquid -- blog.liquid -- cart.liquid -- collection.liquid -- index.liquid -- list-collections.liquid -- page.liquid -- product.liquid -- search.liquid
  3. /thisisntarealurl → 404.liquid /blogs/<blog-name>/<article-id-handle> → article.liquid /blogs/<blog-name> → blog.liquid /cart

    → cart.liquid /collections → list-collections.liquid /collections/<collection-handle> → collection.liquid /collections/<collection-handle>/<tag> → collection.liquid / → index.liquid /pages/<page-handle> → page.liquid /products → list-collections.liquid /products/<product-handle> → product.liquid /search?q=<search-term> → search.liquid
  4. Filters ! {{ product.title | upcase }} ! {{ 'logo.png'

    | asset_url | img_tag: 'Site Logo' }} ! {{ 'capitalize me' | capitalize }} ! {{ article.published_at | date: "%a, %b %d, %y" }} ! {{ 'style.css' | asset_url | stylesheet_tag }}
  5. Logic ! {% if product.available %} Show Add to cart

    button here {% else %} Display message! {% endif %}
  6. Loops ! {% for image in product.images %} <img src="{{

    image | product_img_url: 'medium' }}" /> {% endfor %}
  7. Layouts ! <html> <head> {{ content_for_header }} <title>{{ shop.name }}

    - {{ page_title }}</title> {{ 'screen.css' | asset_url | stylesheet_tag }} </head> <body> {{ content_for_layout }} </body> </html>
  8. Using the online theme editor add in the name &

    description of your store (using the variable "shop") to the footer in theme.liquid
  9. Using Liquid add code to output the "collection image" for

    each collection list-collections.liquid
  10. Now change this to add in the first image in

    a “large” format and the rest as thumbnails
  11. Add in a liquid logic statement to check for your

    products handle and show your new snippet if true