The Hydrogen Migration

Quick view for coffee details now live on subscription builder.

It's finally here! users can click on a "learn more" button when they hover over a coffee image, clicking it brings up a popup, with the coffee's description and specs. No need to visit the product page.

Coffee product pages now have icons

Since coffee product pages don't have a buy box, I moved the coffee specs (roast, origin, etc) to that area instead, and added icons to make it more visually appealing.

I am also working on adding this data to the coffee subscription builder page as well. So we will finall have have that on the new site.

Individual product subscriptions are now active.

This is only active on the test product for now, more products can be added directly from the Recharge admin interface and the subscription options will appear on the site for those products as well.

Because we are not using Bold, and due to Recharge's integration with Shopify's api, the product page doesn't communicate with Recharge directly. As a result, we don't need a seperate button for subscriptions, and the Add to cart button will take care of subscriptions if added along with a subscription option.

The cart and checkout will both display the subscription length to display indicate that an item is being purchased as a subscription.

Improvements and Fixes

• The add to cart button can be used for adding subscriptions directly to a user's cart.
• People are able to add subscriptions to their cart, and checkout with them, while also having one time purchases in their cart.
• The tabbed interface on the current page was replaced with just an added dropdown menu, which is more intuitive and easier to use.

There is quite a bit of work left to do on this, but the core functionality is there, and it's working as expected. Next, we need to

• Add the ability to manage subscriptions from the customer account dashboard and
• Create a page for the tiered subscription boxes similar to the one we have now .

Mulberry is now integrated

Not a lot to write about, it works exactly like it does on the current site, the options are provide in the cart, with the small difference being that they are also now seen and usable from the cart drawer, not just on the cart page itself.

We should remember to test that the warranty gets added correctly before launch

Account Dashboard

The customer account dashboard is now complete and live on the demo site. Everything except the manage subscriptions page is fully functional.

Improvements and Fixes

• The account dashboard homepage shows a snapshot of the user's rewards program status, and a history of all the points they have earned and spent, in a social media feed style in addition to their order history.

• The addresses page allows the user to add, edit, and delete addresses, and set a default address for shipping and billing, this is all done in an interactive app-like interface.

• The reward page displays cards for all the ways users can earn points as well as cards for all the ways they can spend points.

• The VIP page shows the user's current VIP status, and the requirements to reach the next level, in addition to a list of all vip perks and levels.

New 404 Page Concept

Just a fun little concept I came up with for the 404 page. I think's it's better than a boring 404 page. This one has a list of 20 witty messages accompanied by relevant emoji, and a random one is picked each time the page is loaded.

Appreciate feedback on this one, especially to add new messages to the list, or to replace existing ones. To see the live page, just visit a url on the demo build that doesn't exist. e.g https://idrinkcoffee-com-2181f342a4033cdd6dcc.o2.myshopify.dev/404

Customer Account Dashboard

So this is still a work in progress, but I wanted to post and update with what I have so far.

• I took this in a different direction both Aesthetically and functionally. I think it's a better direction, but I'm open to feedback.
• The dashboard homepage is sectioned into two parts, "Order History" and "Rewards History", and there is a NavBar on the top for the rest of the sections.
• Order History is yet to be worked on, but for Rewards History, I went with using the Yotpo Loyalty API directly, instead of how it is done now via the Yotpo widget.
  • The section essentially shows a snapshot of the user's rewards program status, and a history of all the points they have earned and spent, in a social media feed style.
  • In the future, we can add the ability to filter the feed by type of activity, and also add a search bar.

Small but very cool update - New Features box Interface

Right now, the features box in the back end is a black of json text, which is fine, but it requires uploading images to shopify separately, then copying the url and pasting it into the json, same with the copy. This new interface will make it much easier. On the frontend, both the json block and the new system will be supported, so there will be no need to update any existing pages.

How it works

• There is a new metafield that is directly editable on the product edit page, "New Features Box"
• To add a feature box or to add a single feature to an existing box click on it, then "Select entries", and Product Features Block
  
  • note: adding a single feature to an existing box this way will only work if it's in the new format, otherwise it will create a new box and replace the json one
• Finally, click "Create new Entry", and a form to add a feature description and an image will appear.
  
  • The description is markdown enabled, so one can add links, bold, italics, etc.

Search and Collection Pages are done

They are more or less the same as before, with a few minor changes to the UX but nothing major in terms of UX.

Improvements and Fixes

• For both collection and search pages, there is no more client side rendering, all the data is fetched on the server side.
  • This is a major update, because it means that not only will pages load faster and be indexed by search engines better, but also it eleminates the annoying wait time for filters to load on collection pages and the overall wait time on saerch pages.
• Algolia is still the source of data for both pages, but it would be easy to switch to Shopify's built in search if needed.
• Because of the server side rendering, we now are able generate urls for narrow searches, e.g: /collections/all?price_range=25:50 or /search/grinder?tags=hand-grinder&vendor=Mazzer
  • This great for a quick landing page solution, but also as a shareable link for users.

Big Update: Shopping Cart

The new cart and cart drawer are now ready and live on the demo site. This version is a complete overhaul both in terms of aesthetics and functionality.

Improvements and Fixes

• Prominent discount messaging: For each item, it will show any discount, the dollar amount off.
• Any discount related attribution (i.e message from the script, or a coupon code) will be shown with each line item
• Discount codes can now be applied to the cart directly from the cart page instead of having to go to the checkout page, pricing will update in real time on the same page.

Discount via URL

• Discounts can also now be assigned from the url exactly the way it was with the previous full-stack shopify cart.
• e.g: https://idrinkcoffee.com/discounts/8MBC8WJ9 will apply the discount code 8MBC8WJ9 to the cart.
• to send the the user to a specific page, a ?redirect= parameter can be added to the url, e.g: https://idrinkcoffee.com/discounts/8MBC8WJ9?redirect=/collections/dual-boiler-espresso-machines

Drawer is now Fully Featured

• The cart drawer now is now controlled by the same code as the cart page, so it will always be in sync with the cart page and will show relevant discounts, etc directly.
  • As a result, users can check out directly from the drawer or add discounts and notes to the order from any page on the site.
• The cart summary and CTAs are now 'sticky' for a better UX on the cart drawer

Login state transmission to checkout: Fixed

I tried a few other methods but in the end I had to settle for multipass. Fortunately, someone on GitHub had already coded it into the hydrogen demo site and made the code publicly available.

Buyer Identity

I have stumbled upon an unforeseen hurdle, I integrated the buyerIdentity details to shopify's Add to Cart query, and it works fine, however it is not possible to tell the checkout page that the customer is logged in, and as soon as the customer goes to the checkout page, they are presented with a new login link.

This is apparently a known issue with Shopify's checkout and Hydrogen, and there is no plan to fix it. The only way around is to implement multipass login, which is what we are doing on the current Gatsby site. It's a bit complicated to implement and I was hoping to avoid it, but it seems like it's the only way.

Add Both to Cart now active on the combo builder

Notes

• There is no way to add discounts dynamically, so they will still have to be added via a cart script, or Buy X get Y automatic discounts on Shopify.
• For calculating the discounts, the tag combodiscount-* is used. The value of the tag is the discount percentage.
  e.g: combodiscount-10 will add a 10% discount to the product but not the whole combo, so if a machine has combodiscount-10 and costs $1000, and a grinder has combodiscount-10 and costs $500, the total discount will be $150, but we can also just discount a grinder or a machine by excluding the tag from a product.
  • Similar logic will need to be used for the checkout script or automatic discounts on Shopify.
• In order for products to appear in the combo builder, they need to have either a combo-builder-machine or a combo-builder-grinder tag.

Combo Builder

Improvements and Fixes

• Made slight UX changes on desktop
• New variant selection screen
• Now using the standard product card template to list items
• Less code used and simpler script compared to the current version (659 lines vs 1106)

Status

• All combo code is implemented and functional except the add both to cart feature, which will need some research on how to accomplish with Hydrogen

Product page close to 100% done

The product page is ready except integration with subscriptions (recharge?) and will need to be edited in the future once the configuration builder is done. I have made a few changes to the design and added a few more features that I think optimize the UX over the previous version.

Improvements and Fixes

• The variant selector now uses a different metafield on Shopify, making it easier to add new variants in the future.
• The variant selector now has a default text, which isn't the full product name but rather the product's differentiator to make the variant selector more compact and less overwhelming.
• A new sale-ending countdown was added for products on sale with a set end date.
• The breadcrumbs now use a value from a metafield on Shopify and link to a relevant collection page.
• The Buy Box has been given an aesthetic overhaul and now is a more prominent call to action.
• Warranty information is now displayed on the product page via the warrdata-* tag.
• Reviews now support video reviews, UGC videos and images are shown in a gallery carousel and as part of the review.
• The in-page navigation has been given a new design and lists all the most important sections of the product page.
• The FAQ section has a new design and a 'click to reveal' UX.
• On the backend, the tech specs are now fetched from a single metafield on Shopify. The metafield is in JSON format. This was warranted due to the way Hydrogen fetches data from Shopify and the fact that the tech specs are a single entity.

Structured Data

• The product page now has structured data for the product, reviews, Q&As and FAQs. This will help with SEO and will help google understand the content of the page better.
  
  • PLANNED: In the future, I will add structured data for tech specs as well, which is something no one in the industry is doing right now, but I think it will be a great addition to the product page in terms of how the page is indexed by search engines.