Posts in Category

How to display product tags in Shopify?

To display a product tag on Shopify products, like a “Coming Soon”, “Sale” or “Pre-Order” tag, we need to use a simple liquid snippet in our template. Usually, we want to display that TAG within a collection, so it is easilly visible when a user browses through all products. Depending on the theme, you will need to put that snippet in product.liquid, collection.liquid or a similar snippet/template.
Read more

Display Amount You Save On Discounted Price In Shopify

Let’s say you want to discount a certain product (“compare at price” in Shopify) and display to the customer the amount he is saveing by this discount, and the percentage the price is discounted for.

We found this solution a while back and it did the trick. Use this Javascript code in your product.template (under “Templates” or “Sections” in the “Theme – Edit Code”):

Read more

Filter Search Results in Shopify

If you wish to display certain search results on your store, as opposed to all which is the default, you will have to specify so in the code.

Possible scenario, one which we encounter the most, is that the clients do not want to display blog posts when search is used, but only products.

Depending on the theme you use, the part of code you need will be located within the search.liquid or possibly theme.liquid as well.

Read more

Blog Sidebar With Recent Posts

Shopify, though being an awesome eCommerce platform, is notorious for its poor blogging options.
One of the issues you’ll need to solve sooner or later is to add new dynamic features to the blog, one of the more important ones being a sidebar with the “Recent posts”.

Obviously, there is more than one solution to have this working, but here is one way to do it.

Read more

Shopify Log Out Link

We had an interesting case of a theme that doesn’t have the log out link! Customers were emailing the client asking how to log out once they placed their order, and there was no way to do it.

If you stumble upon the same theme, or need this line of code to use somewhere on the site, here it is:

{{ 'Log out' | customer_logout_link }}

You can edit the CSS per your needs targeting the #customer_logout_link.

Commenting In Liquid

Liquid has its own syntax, and if you need to comment parts of code, instead of trying to comment HTML or deleteing code you may need later on, simply use:

{% comment %}
{% endcomment %}


{% comment %}
{% if form.errors %}
  <div class="{{ form_errors_class }}">
    {{ form.errors | default_errors }}
{% endif %}
{% endcomment %}