ITP-Shopify Store - Assignment 5 - Storefront Design and Customer Experience
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.
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.
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.
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.
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.
Below the hero, the featured section is now titled “Our bestsellers” and pulls real products from the catalog, five pieces with real photos, names, and prices, spanning both rings and earrings. The homepage finally answers “what does this store sell” in one glance.
3 Product Page Improvements
I improved two product pages: the Halo Square Diamond Stud Earrings, which now anchors the homepage hero, and the Classic Round Halo Engagement Ring. The improvements: each description follows a scannable four-block structure (Design, Materials, Care, Certification), each with its own labeled heading, so a customer researching a significant purchase can jump to the information they care about, and each page carries multiple real photos with the strongest hero shot first. The stud earrings page also demonstrates how a product page and the homepage now work together, since the hero’s Shop Earrings button leads a customer to this product in two clicks.
4 Collection Page Improvement
The improved collection pages give category shoppers a clean browsing experience: a clear title, real product photography in a consistent grid, prices visible without clicking, and availability and price filters. The Earrings collection shown below is the destination of the homepage hero’s call to action, which means the improved homepage and the improved collection page now form one continuous path.
5 Customer Experience Improvements
The three most important customer experience improvements from this assignment:
Real featured products on the homepage. Replacing demo placeholders with the Our bestsellers section turned the homepage from a credibility problem into a product discovery tool. This was the highest-impact fix, because the homepage is where trust is won or lost in the first seconds.
A hero with a story and a call to action. The slideshow hero now introduces a real product with a short benefit-focused description and a Shop Earrings button, giving purposeful visitors a one-click path into the catalog instead of a decorative banner that leads nowhere.
Scannable product descriptions. Every product page follows the same four-block structure, Design, Materials, Care, Certification, so a customer can jump straight to the information they care about, materials for one shopper, certification for another, instead of reading a wall of text.
6 Customer Journey Reflection
A customer now moves through the store in a sequence that mirrors how people actually shop for jewelry. They land on the homepage and immediately see what the store is through real product photography in the hero slideshow, and if the featured piece appeals to them, the Shop Earrings button takes them into the collection in one click. If they would rather browse, the Our bestsellers section shows five real products with prices spanning rings and earrings, so there is always a natural next click. On the collection page, the consistent grid, visible prices, and availability and price filters let them narrow down without opening every product. When a piece catches their eye, the product page answers their questions in the order they ask them: what it looks like (photos first), what it is made of, how to care for it, and why they can trust it (IGI certification). From homepage to product detail is never more than three clicks, and each step adds information instead of repeating it.
7 CPP Farm Store Application
CPP Farm Store should treat its online storefront design as a trust document first and a catalog second. My biggest lesson was that a single unfinished section, placeholder products on the homepage, undermines everything else, and a farm store equivalent would be stock photos of generic produce or empty seasonal categories. My second lesson is that fixing design means connecting sections to real data, not just decorating: my homepage only became convincing when its sections pulled from the actual catalog, and the Farm Store’s homepage should likewise be driven by real, current inventory rather than manually placed images that go stale. The Farm Store should lead with what only it has, real photography of the red barn, the fields, and the students, because that imagery is simultaneously its brand story and its trust signal. Product pages should follow a consistent, scannable structure a shopper can rely on: what it is, when it is available, how to get it (pickup or shipping), and who grew it. And because farm inventory is seasonal, the design has to handle absence gracefully, hiding or shrinking out-of-season collections instead of showing sold-out grids. The goal is a store where every click either builds trust or moves the customer closer to a purchase, and nothing on screen looks unfinished.
8 Appendix
GitHub Repository: https://github.com/PhuLoi66/itp-assign5
GitHub Pages (Published Report): https://phuloi66.github.io/itp-assign5/