Grasel

A website build in Shopify

It features a lot of customizations and uses a theme build by me together with another developer. The theme is being used for many other projects now.

The about (nosotros) page features a custom timelime build with HTML/CSS and some JS. I’ve converted it to work in the Shopify theme customizer so the client can easily add new cards with all the options available to display a title, body text, quote, image, button and date.

The shop page has been transformed into a catalog and purchasing has been disabled. I stumbled upon a very old topic on the Shopify forums to display the amount of products being displayed e.g. “displaying 1-9 out of  26 results”. It was not working out of the box and needed some modifications. Here’s an example of how you can use it in your next Shopify project:

{% paginate collection.products by section.settings.products_page %}
{% if paginate.next.is_link %}
Displaying {{ paginate.current_offset | plus: 1 }}-{{ paginate.current_offset | plus: paginate.page_size }} out of {{ collection.all_products_count }} results
{% else %}
{% capture itemsOnCurrentPage %}
{{ collection.all_products_count | minus: paginate.current_offset }}
{% endcapture %}
Displaying {{ paginate.current_offset | plus: 1 }}-{{ paginate.current_offset | plus: itemsOnCurrentPage }} out of {{ collection.all_products_count }} results
{% endif %}
{% endpaginate %}


Feel free to use this in your next project as it adds a little extra to the website which am sure the client will love!

*Note that each Shopify theme is different and might need to find where your all products liquid file is located at. It could be named template-collection.liquid, collection-loop.liquid or something else.