How to create collections in Shopify that look editorial

What I’ve been thinking about:

The purpose of a collection is to guide customers to find the products they desire effortlessly. One common practice, especially in fashion brands, is to present collections like a magazine, showcasing products with inspirational images that allow customers to visualize and be enticed to purchase.

This feature can be found in many Shopify themes. Still, we'll explore how to create it in a collection grid section on a Shopify theme, adding a magazine-style aesthetic to the collection.

Start by locating the collection section where the product array is rendered with the product card:

Next, build a simple schema for our block within this collection grid section to add an image with a link:

The position number input serves as a comparator to insert this block after a specific loop index in the product array within the collection.

Moving back to the rendering of each product card, calculate the position of the loop by creating a variable:

forloop.index0 provides the current iteration index, and paginate.current_offset reflects the total number of items on previous pages, ensuring content insertion in the right place even through pagination.

Now compare the index with the position to insert the block and render it if matched:

The final code looks like this:

This example is simple but leaves room for enhancements. You can add videos, text, or other content to create a customizable magazine collection within the theme editor.

For an added touch, you could allow the merchant to customize the column size using additional inputs and CSS grid or flex classes.

3 links you can’t miss:

• Shopify Editions new features explained. Ed Codes channel explain so well in this video some quick tutorials on the latest Shopify features that were released in July 2023 in the Shopify Summer Editions.
• Using Python in Notebooks. ShopifyQL Notebooks now supports the ability to incorporate Python code blocks into existing and new Notebooks. This will allow you to retrieve data, combine it, and visualize it within Notebooks.
• Remix & App Development. Remix has now become the recommended method for building apps on Shopify, sparking some controversy within the developer community. Shopify now endorses Remix as the go-to stack for app development.

One app I like:

Store Watcher

Store Watcher is an indispensable tool I recommend to any Shopify developer working with merchants. This all-in-one app is specifically designed to make sure your store is running properly and enables you to be notified instantly if there's an issue.

It allows you to create tests that can run at specific times to monitor various store functionalities like customer login, product searches, the add-to-cart button, and more. You can even use custom tests unique to your store, employing either the browser extension or pre-built tests.

We've been using Store Watcher for several clients, and it's truly been a game-changer. It helps detect major issues before your customers encounter them, giving both developers and merchants peace of mind. Merchants often upgrade their subscription once they realize the benefits it brings.

One of my favourite features is the email notification. If something doesn't work as expected, you can set up the system to receive a timely alert on your end.