ITP-Shopify Store - Assignment 5 - Storefront Design and Customer Experience

Author

Phu Loi

Published

July 19, 2026

1 Introduction

Going into this assignment, The 5th C Diamond had a real design problem I discovered while working on Assignment 4: after switching to the Heritage theme, my homepage’s featured products section was showing the theme’s demo content, cartoon t-shirts labeled “Product title, $19.99,” on a fine jewelry store. It was the clearest possible example of how a storefront can look unfinished even when the catalog behind it is complete. For this assignment I redesigned the homepage around real products, and I am documenting the process honestly, including the steps that did not work on the first try, because the process itself shows how theme sections, product media, and collections connect in Shopify.

Note

This is a practice Shopify store built for course purposes. No real payments are processed on this site.

2 Homepage Improvements

The homepage redesign went through four stages, shown in order below.

The featured products grid displayed the theme’s placeholder t-shirts. Any visitor landing here would reasonably conclude the store was not real. This was the single biggest credibility problem in the storefront.

Before: placeholder demo products on a jewelry store

I first tried Shopify’s built-in AI assistant, Sidekick, asking it to add my product images to the featured section. It reported success, but the preview still showed t-shirts, because the section’s product blocks were not actually connected to my catalog. A useful lesson: the AI edited the section’s layout settings, but connecting real data still required understanding how the section works.

During: Sidekick attempt, section still showing placeholders

Editing the section manually, I connected the media blocks to products, but the grid initially repeated the same product’s photos in every card, eight tiles showing only two rings. The fix was pointing the section at a collection instead of individual media blocks, so each card pulls a different product automatically.

During: real jewelry, but the same products repeating

The finished homepage now opens with a slideshow hero featuring real product photography, a product story (“Discover the timeless elegance of our lab-grown diamond studs”), and a direct call to action button, Shop Earrings, that takes the customer straight into the collection.