A shoppable Shopify blog redesign for Hello Bello

Hello Bello makes diapers, wipes, training pants and bath and body products for babies and families, and sells them on its own store, including diaper subscriptions. The blog is where the brand talks to parents, and it needed to do more than list posts.

Parents needed a category menu and search to find stories. Articles needed to link to the products in their photos. And the marketing team needed to change the blog's layout and modules without asking a developer each time.

We came in through Hello Bello's agency on a fixed-scope design and development project, and worked inside the brand's own code repository and deployment process. Every template was built mobile-first.

We designed the blog feed, the search results page and the article page, with up to three rounds of review. Before writing code, we agreed with the team how each section would be managed in the Shopify admin, so the finished blog could run without one.

The blog feed got a category menu, search and infinite scroll. Standard posts sit in a column grid, and the team can drop wide feature posts and video posts into it by adding a tag to the post. The blog home has a hero slider, a promo module in the middle of the page and a closing custom module, each switched on and edited in the theme customizer.

Article pages carry the feed's navigation and search, plus social sharing, a Trending Now pick of related posts and a More Stories row from a third-party app. We also designed and built a new search results and landing template. Images lazy-load, and CSS and JavaScript were minified where it helped page speed.

Any post could sell what was in its photos. The team added product handles and a lifestyle image to the post's metafields, and those products appeared over the image, on the left or the right of the article.

We wrote step-by-step instructions for every setting: the tags, the customizer modules and the metafields.

Hello Bello came back to us for a landing page explaining its diaper. It pairs scrolling diaper design widgets for top sellers and new prints with a section built around a 3D render of the diaper, and a value section that leads into bundles. Like the blog, every part is editable in the theme customizer.

Hello Bello's team got a blog it could run on its own: wide and video posts set with a tag, promo modules switched on from the customizer, and shoppable photos added through metafields, all documented.

Articles could take parents straight to the diapers, wipes and bath products they mentioned, and the brand came back for its Diaper Difference landing page.