Merge pull request Shopify#67 from Shopify/grid-item-widths

Ability to change product-grid-item snippet width with variable

assets/timber.scss.liquid

@@ -1,5 +1,5 @@
 /*
-* Shopify Timber v1.2.0
+* Shopify Timber v1.2.1
 * Copyright 2014 Shopify Inc.
 * Author Carson Shold @cshold
 * Built with Sass - http://sass-lang.com/
@@ -741,6 +741,11 @@ p img { margin: 0; }
 em { font-style: italic; }
 strong { font-weight: bold; }
 small { font-size: 80%; }
+sup {
+ position: relative;
+ top: -0.5em;
+ font-size: 60%;
+}
 
 // Blockquotes
 blockquote {
@@ -894,6 +899,12 @@ form {
 
 .btn,
 button,
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="file"],
+input[type="number"],
+input[type="tel"],
 input[type="submit"] {
  -webkit-appearance: none;
 }
@@ -1002,7 +1013,8 @@ form.form-horizontal,
  input[type="number"],
  input[type="tel"],
  textarea,
- select {
+ select,
+ label {
  display: inline-block;
  margin-bottom: 0;
  width: auto;
@@ -1454,8 +1466,10 @@ a.btn-secondary {
 
 .product-grid-image {
  display: block;
+ margin: 0 auto;
 
  img {
+ display: block;
  margin: 0 auto;
  }
 }

snippets/footer.liquid

@@ -11,7 +11,7 @@
  {% if settings.footer_contact_text != blank %}
  {{ settings.footer_contact_text }}
  {% else %}
- Add some text to show here in your <a href="admin/themes" title="Edit theme settings"> theme settings</a>.
+ Add some text to show here in your <a href="/admin/themes" title="Edit theme settings"> theme settings</a>.
  {% endif %}
  </p>
  </div>

snippets/product-grid-item.liquid

@@ -3,10 +3,22 @@
  This snippet is used to showcase each product during the loop,
  'for product in collection.products' in collection.liquid.
 
- This example has three products per column on desktop, two on
- our medium breakpoint, and a single row on small screens.
+ A liquid variable (grid_item_width) is set just before the this
+ snippet is included to change the size of the container.
+ Once the variable is set on a page, all future instances of this
+ snippet will use that width. Overwrite the variable to adjust this.
 
+ Example
+ - assign grid_item_width = 'large--one-quarter medium--one-half'
+
+{% endcomment %}
+
+{% comment %}
+ Set the default grid_item_width if no variable is set
 {% endcomment %}
+{% unless grid_item_width %}
+ {% assign grid_item_width = 'large--one-third medium--one-half' %}
+{% endunless %}
 
 {% comment %}
  Check if the product is on sale and set a variable to be used below.
@@ -27,7 +39,7 @@
 {% comment %}
  Set a class for sold-out and on-sale items
 {% endcomment %}
-<div class="grid-item large--one-third medium--one-half{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
+<div class="grid-item {{grid_item_width}}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
 
  {% comment %}
  Link to your product with the 'within: collection' filter for the link to be aware of the collection.

templates/index.liquid

@@ -20,6 +20,13 @@
  {% endcomment %}
  {% for product in collections.frontpage.products limit:6 %}
 
+ {% comment %}
+ Change the grid item width by using classes from the grid in
+ the grid_item_width variable.
+
+ Example (and default):
+ - {% assign grid_item_width = 'large--one-third medium--one-half' %}
+ {% endcomment %}
  {% include 'product-grid-item' %}
 
  {% else %}