Level Up a Collections Page

When you're engaged by a new client, more often than not you'll be working with an existing Shopify theme rather than starting from scratch every time. To emulate this, our class project for this course focuses on a fictional store with a very minimalistic theme. We've been hired by the store owner to make some specific changes that they hope will make the store more usable for customers and lead to better conversion rates.

To get the files for the initial state of the theme, as well as instructions on how to set them up on a development store, check out the project Github repository. The repository also contains instructions on how to use Shopify's sample product CSV files to get a large number of realistic products into your development store.

Once you've gotten the setup out of the way, it's time to get to work! The main focus of the store owner is their Collections page (templates/collection.liquid). They have a basic page up and running, but they want to make the following improvements:

Add the ability to sort products by price (low to high and high to low);
Add the ability to filter products by tag;
Add the ability to add a product to the customer's cart directly from the collections page with a "Quick Add" button. When the products are added to the cart, the owner would like the cart total in the navigation menu to be updated appropriately.

The first two of these improvements are directly covered in the lesson Filtering, sorting and viewing collections. The third is similar to the way we added Ajax cart functionality in the lesson Building Ajax-powered carts.

In addition to the above, the store owner heard somewhere that Shopify theme performance is really important. They're hoping that if you have time, you'll be able to:

Inspect their theme for potential performance issues; and
Set up an improvement build workflow to make sure their assets and images and compressed, minified and optimised for performance.

You might want to review the lessons on Best Practices and Advanced deployment for these tasks.

Once you're done with your version of the project, submit a screenshot here on Skillshare along with a link to the real thing on your development store. If you've been following the workflow practices outlined early on in the course, you might want to provide a link to your code repository on Github or another source code hosting provider so that others are able to review your changes.

If you get stuck at any stage, head over to the Discussions page and post your question there.

Good luck!

Khetesh Kumawat

1

2