Back to blog

Bringing Shop the Look to the Homepage

shop the look homepage section

We built Greenery Market a homepage section that pulls their Shop the Look page onto the homepage and keeps it in sync automatically.

Greenery Market already had a dedicated Shop the Look page: curated floral arrangements with hotspots that link each stem, ribbon, and bundle to its product. It's one of the most useful pages on the site. The problem was that shoppers had to go find it. We wanted that same inspiration front and center on the homepage, without creating a second set of content for the team to maintain.

Where native sections fell short

Shopify's native sections got us partway there, but the layout never felt right for the shopper. Hotspot products ended up scattered or tucked behind small popups, so it was hard to tell what was actually in the arrangement or what it would cost to recreate.

There was also a maintenance cost. Any look added to the homepage through native blocks had to be manually copied or rebuilt from the source page, and kept in step with the main Shop the Look page every time a look changed.

The solution: one source of truth, fetched onto the homepage

Instead of duplicating content, we built a custom section that fetches the Shop the Look page directly. When the homepage loads, the section pulls in whatever looks, images, hotspots, and products live on that page, then re-renders them in a layout designed for the homepage.

The result is a section that maintains itself. When the Greenery Market team adds, edits, or removes a look on the main page, the homepage updates on its own. No second set of blocks, no copy-paste, nothing to forget.

What the section does

The featured look sits beside a stacked product list, so shoppers can see every item in the arrangement at a glance, with its thumbnail and price. A carousel below lets them flip between all the available looks.

For shoppers

  • Hotspots linked to the list. Tapping a hotspot on the image gives the matching product a subtle highlight in the list, so it's obvious which stem or ribbon is which.
  • Add one item or the whole look. Each product has its own add button, and a single "Add all to cart" button shows the item count and total for the full look.
  • Thumbnails that switch the look. Clicking any thumbnail in the carousel swaps it into the main view, updating the image, hotspots, product list, and cart total in place. Shoppers can browse every look without leaving the homepage.
Shop the look section with subtle highlight on chosen product
Tapping the ribbon hotspot gives the Gold Shimmering ribbon a soft green highlight in the list.
Add all products with total cost on add to cart button
One button adds the whole look, with the item count and total shown up front.
Thumbnail carousel for switching between looks

Tapping a thumbnail loads that look into the main view, products and total included.

For the Greenery Market team

  • Dock a look. Pick which look appears first on the homepage, so seasonal or promoted arrangements lead.
  • Color controls. Match the section to the brand or to a seasonal campaign from the theme editor.
  • Editable text. Eyebrow, heading, and intro copy can all be changed without touching code.

Why this approach works

The page-fetch pattern solves a problem a lot of Shopify merchants have: great content living on one page that deserves to show up somewhere else. Rather than duplicating it, we let one page stay the source of truth and build a smarter display around it. The team edits in one place, and the homepage always reflects what's current.

For Greenery Market, that means inspiration is the first thing shoppers see, and turning a look into a cart is one click away.

Have content on your store that should be working harder? Let's talk about what a custom section could do for you.