Shopify

While a few Shopify shop-owners have elevated their concern with search engine optimization to an obsessive-compulsive disorder while waiting for their sales to pick up, the word is out that we can use the link element to tell search engines about duplicate content. The idea is that we don't want search engines to dilute the ranking of a product page among the many different URLs by which said page can be accessed. The dilution is further aggravated when a product belongs to many collections: the same content we see at /products/my-lovely-boyfriend-is-for-sale will be seen at /collections/SOME_COLLECTION/products/my-lovely-boyfriend-is-for-sale and /collections/SOME_OTHER_COLLECTION/products/my-lovely-boyfriend-is-for-sale. You get these last two URLs if you use the within filter in your collection and index templates. You can learn how to navigate within a collection by visiting Shopify's wiki.

We add a canonical link to a web page when we don't want it indexed. We don't want it indexed because we know the same content can be found somewhere else, and we use the canonical link to tell the spider where to find the one 'true' page, that is, the page we do want indexed, cherished and behold. For the sake of simplicity, the one true page for Shopify product pages is the one sitting under /products/MY-PRODUCT. You'll find at this URL the collection-agnostic home page for your product.

In Shopify, adding a canonical link for product pages is very simple. Open theme.liquid and locate your head element. Anywhere between the opening and closing tag of the head element, paste this code:

{% if template == 'product' %}{% if collection %}
<link rel="canonical" href="{{ product.url }}" />
{% endif %}{% endif %}

The noindex instruction

As a bonus question: what if you want to ask a spider to not index a webpage, yet have nothing else to offer in its place?

Shopify keeps the legs of well-behaved spiders off some of the content of your website by supplying a nice instruction booklet under SHOPNAME.myshopfy.com/robots.txt. The content of that file is:

# robots.txt file for www.shopify.com e-commerce engine
 
User-agent: *
Disallow: /admin
Disallow: /carts
Disallow: /orders
Sitemap: http://SHOPNAME.myshopify.com/sitemap.xml
 
User-agent: Nutch
Disallow: /

Shopify also tells the well-behaved spiders what to index in SHOPNAME.myshopfy.com/sitemap.xml. You have nothing to do here. It's all taken care of for you. But you can't edit robots.txt, and cannot easily provide an alternate sitemap.

What if there are pages that you do not want spiders to get their legs on? For example, what if you don't want product-type collections to get indexed?

Answer: Open theme.liquid and locate your head element. Anywhere between the opening and closing tag of the head element, paste this code:

{% if template == 'collection' %}{% if collection.handle %}{% else %}
<meta name="robots" content="noindex,follow" />
<!-- instructs search engines not to index this page, but to follow links from the page -->
{% endif %}{% endif %}

How does that work? The collections that live under /collections/types?q=PRODUCT TYPE have no collection handle.

The goal of this tutorial is to show how to “descramble” a long list of variants in Shopify using JavaScript.

The code will work for any number of variants. It will also work for any number of categories of variants. For example, you could sell a pen with these three categories of “variation”: quantity, precision in points (fine, extra-fine, etc.), and color. Other products you sell may hold a different list of options for quantity, type and color — and that's all good. Some other products may have different categories of variants altogether, or just more categories. Still all good. The code will actually parse through the variants titles and create select elements based on what is available on a per-product basis.

The following is not a screenshot. Pick something.

Hard to find anything in there. JavaScript will simplify that.

We want to present visitors with one drop-down select box per hard attribute your product has (for example, one for quantity, and one for color...). By hard attribute, I mean an attribute that justifies the creation of Shopify variants — any attribute that affects pricing. In our little example case, we assume that the color does affect pricing. But it is also possible to add to the mix a pure JavaScript attribute for color, as I explain in this other tutorial.

Here is a way to select a variant that is much easier on the eye:

This method uses JavaScript and is cosmetic. With JavaScript disabled in the browser, your visitors will still be able to pick any variant they want but will need to locate it in your list. If you do have a long list of variants, this tutorial may prove useful. If not... what are you doing here? ;-)

 Read more →

As promised over there, I will present you with the algorithm and the JavaScript code needed to implement multiple attributes for products in Shopify without variants. With this method, you are not squandering any of your precious SKUs, and you are avoiding the long dreaded drop-down variant selection box of death:

You will present your visitors with one drop-down select box per attribute your product has (for example, one for size, and one for color...). The method works for an unlimited number of attributes, ie. two, three, whatever. The chosen options for the cart items attributes will be stored in a web cookie and submitted to Shopify's 'back-end' during the checkout process. This method uses JavaScript. With JavaScript disabled in the browser, your visitors will be unable to pick any attributes other than the default ones chosen for them. This method is a workaround. Jaded Pixel really should implement multiple attributes (most commonly, these are size and color), but they have chosen not to, so we have to make do. Read more →