Table of Contents

Swatches

The swatch functionality inside of Sunbum is built entirely using native Shopify features. In order to get the most out of them, there are a few things you'll need to know.

1. Product Variant Options

Swatches will only display for products that have a variant option called Color. We check for this string throughout the theme and render the swatches using the associated values.

The values for this option should be the colors that you want be displayed on the front end of the site. Take note of the values that you enter here becuase you'll need these for later.

2. Custom Swatch Colors

Once you've added products with different colored variants, you should start to see swatches show up on the site but there's a good chance some of them are broken. The theme attempts to color the swatches using a combination of the background-color css property and a swatch modifier class specific to that color.

By default, the theme comes with a color palette for about a dozen of the most common colors. The color variables for these can be found in variables.scss and all begin with the prefix $color-dot-. As part of the theme setup, you should adjust these variables (and add more if needed) to create a palette that works for the site you're building.

Of course, we can't predict all of the colors that will be needed for the site so we've built a way to allow the user to specify and configure any number of swatch colors through theme editor. If you look inside sections/swatches.liquid, you'll see that all this section does is allow a user to create a swatch by name and specify a color value. The name that the user enters here must match the name of the color exactly. The swatches make use of the title attribute so if you need help figuring out what to enter as the name, hover over the swatch and you'll see it pop up. The liquid code then renders a style block containing rules for each color. Because this block is output after the theme CSS is included, the user can also modify colors that are already defined in the palette using SCSS variables.

The swatch is targeted through a modifier class created from the name of the color. To generate a valid CSS selector from a color name, we downcase the color and then replace all spaces with dashes.

3. Product Image Swatches

The color swatch instructions above apply to all swatches for the specified color on the site. You can also add swatch images per product, by uploading them to the product gallery. To make this work you'll need to do the following:

  • Upload the swatch image to the product gallery.
  • Edit the alt text to include the name of the color and the word "swatch"

For example: a product that comes in "Army Green" would have a swatch with alt text "swatch Army Green". You can format this text however you want, just make sure that those two pieces are in there some where.

If you need to change this "swatch" identifier for any reason, it is set in the codebase as the variable alt_swatch_identifier. Do a find and replace.

We use this identifier to find the swatch image when needed, but also to make sure we don't output it when looping through all product images.

4. Product Color Variant Galleries

By utilizing alt text, we can create the effect of multiple product galleries for different colors. All you need to do is edit the alt text of each product image to include the name of the color that you want it to be associated with. In the theme, we look look images matching the color variant option values and separate them.

For example: if you have a product that comes in red and blue and you have product images that are specific to each color, you would set the alt text for the blue ones to include the word "Blue" and the red ones to include the word "Red".

ReCharge + AJAX Cart

ReCharge works by creating hidden products to hold subscription data. These products can be added to the cart but because they are technically hidden, we can't use the JS API to pull any information about them. By default, when the user's cart is updated via the AJAX Cart, we fetch data for each individual product to render the cart, as the product info attached to the cart object is incomplete.

This poses a problem as we can't use ReCharge in conjunction with the fully featured AJAX Cart. To get around this, make the following updates to the AJAX Cart files.

FILE: scripts/slate/ajaxCart.js

  1. Add a recharge_interval property to the cart item to display inside the template

                    
    /* Remove the code that looks like this */
    
    if(item.hasOwnProperty('product')) {
      var product = item.product;
      for (var i = item.variant_options.length - 1; i >= 0; i--) {
        var name  = product.options[i];
        var value = item.variant_options[i];
    
        item.variant_options[i] = {
          name: name,
          value: value
        };
    
        // Don't show this info if it's the default variant that Shopify creates
        if(value == "Default Title") {
          delete item.variant_options[i];
        }
      }
    }
    
    /* And add the following code */
    
    if(item.properties) {
      if(item.properties.shipping_interval_frequency && item.properties.shipping_interval_unit_type) {
        // Add property like "15 days"
        item.recharge_interval = item.properties.shipping_interval_frequency + ' ' + item.properties.shipping_interval_unit_type;
      }
    }
                    
                  
  2. Remove the checkout button from the AJAX Cart. Users will have to go to the cart page first before going on to checkout.

FILE: sections/ajax-cart.liquid

            

/* Replace the variant options loop that looks like this */

{{#if variant_options}}
  {{#each variant_options}}
    <li>
      {{ name }}: {{ value }}
    </li>
  {{/each}}
{{/if}}

/* With this */

<li>{{ variant_title }}</li>
{{#if recharge_interval}}
  <li>Delivery: Every {{ recharge_interval }}</li>
{{/if}}

            
          

FILE: sections/cart.liquid

ReCharge adds the following properties to a product - shipping_interval_frequency, shipping_interval_unit_type, shipping_id. These need to be added to the cart page template.

            

/* Modify the item.properties loop to include the following recharge code */

{% assign recharge_properties = "shipping_interval_frequency:shipping_interval_unit_type:subscription_id" | split: ':' %}
{% assign product_is_recharge = false %}
{% for p in item.properties %}
  {% if recharge_properties contains p.first %}
    {% assign product_is_recharge = true %}
    {% break %}
  {% endif %}
{% endfor %}

{% unless item.properties == empty %}

  {% comment %} Output the subscription info first {% endcomment %}
  {% if product_is_recharge %}
    <li>Delivered every {{ item.properties['shipping_interval_frequency'] }} {{ item.properties['shipping_interval_unit_type'] }}</li>
  {% endif %}

  {% for p in item.properties %}
    {% unless p.last == blank or recharge_properties contains p.first %}
    <li>
      {{ p.first }}:
      {% if p.last contains '/uploads/' %}
        <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
        {{ p.last }}
      {% endif %}
    </li>
    {% endunless %}
  {% endfor %}
{% endunless %}