How can I add an 'Add to Babylist' button on product pages?

Technical Q&A

Topic summary

A user seeks guidance on adding an “Add to Babylist” button to product pages, similar to functionality seen on other Shopify stores.

Initial Responses:

  • One commenter suggests contacting Babylist directly for integration support via their third-party code.
  • Another user provides a detailed two-step implementation guide involving custom code insertion.

Implementation Steps Shared:

  1. Edit main-product.liquid file to add Babylist’s JavaScript snippet with the store’s URL
  2. Add a Custom Liquid block under “Add to Cart” with code that passes product details (image, price, title, URL) to Babylist’s registry function

Ongoing Issues:

  • Multiple users struggle to locate the “product page” or “Add to Cart” section in Step 2
  • One user reports button sizing inconsistencies between “Add to Cart” and “Add to Babylist” buttons
  • Another user encounters problems with variant-specific data: the button adds products but fails to capture the correct variant or variant-associated images (e.g., different colors/sizes)

Status: The discussion remains open with unresolved questions about navigation, styling, and variant handling.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

I have a client who would like to sync up her site with Babylist and add an “Add to Babylist” button on each of her product pages—exactly what this online store is doing. Can anyone provide any guidance on how I would go about doing this? Thanks so much!

2

Hi @konamade ,

I checked and they are linking with 3rd party code: https://www.babylist.com/

So you just need to contact babylist directly, they will guide you to integrate it quickly.

Hope it helps!

3

Sharing how I added a button for babylist on this thread.
Disclaimer: I’m definitely not a Shopify expert, but this did the trick for me.

Step 1:

Go to Online Store > Themes > Click the “…” by ‘Customize’ > Edit Code > Open ‘Sections’ > Open ‘main-product.liquid’ > at the very end paste this code:


Step 2:

Go to Online Store > Theme > Customize > Navigate to Your Product Page >
Under “Add to Cart” put in a ‘Custom Liquid’ block and paste this code in it:

<a class=“button” style=“margin-bottom: 10px; width: 300px”
href="javascript: bl.addToRegistry({
images: ‘{{ product.featured_image.src | img_url: “800x” }}’,
price: ‘{{ product.price | money_without_currency }}’,
title: ‘{{ product.title }}’,
url: ‘{{ shop.url }}{{ product.url }}’
});">Add to Babylist

I tested it with my own registry and it worked. Hope this helps someone. :grin:

4

I can’t seem to figure out what you mean by “navigate to product page” to find under “add to cart”

5

Hi, I’ve tried following your instructions but I’m having trouble with Step 2. I can’t seem to find the correct location of “product page” or “add to cart”.

Are you able to help?

6

This works but now the add to cart and add to babylist buttons are different sizes. Any recommendations?

7

Hello - i am trying to do the same and have the work nearly working. it adds the product to babylist, but does not add the variant nor the image associated to the right variant. is there any refinement to the code to include the right image associate to the right color (ie red or size, etc)