Shopify

Patrick
@patrick
Timon
@timon

To connect Uhuu with Shopify, start by setting up your product personalization front-end. Once ready, you can notify the Uhuu Store API of any personalized products ordered.

The process will essentially look like this:

  • Create your uhuu template and prepare product personalization
  • Add Uhuu product personalization to your Shopify front-end
  • Add Shopify webhooks to inform uhuu store api on new personalized product orders

Shopify Front-End Setup

Connect Uhuu with Shopify using Liquid templates to offer personalized products.

Add "Custom Liquid" section to Shopify product's template.

"Custom Liquid" section to Shopify product's template.
"Custom Liquid" section to Shopify product's template.

Copy Uhuu personalize code to your custom liquid section

<form method="post" action="/cart/add"><input name="id" value="{{ product.variants.first.id }}" type="hidden" /><input id="uhuu_session_id" type="hidden" name="properties[Personalize ID]"/></form>
<script src="https://uhuuio.s3.amazonaws.com/clients/[uhuu-project]/connections/shopify/handshake.js"></script>
<embed src="https://[uhuu-project].vercel.app/de/shopify/my-friends-ocean?variantId={{ product.variants.first.id }}" width="100%" height="1200"/>

Once completed, the Uhuu Personalizer will be connected to the Shopify cart, adding a personalized ID property to each item.

Uhuu Personalize code on your custom liquid section.
Uhuu Personalize code on your custom liquid section.



Shopify Back-End Setup

Configure order creation webhooks for printing via the Uhuu API and direct, automatic delivery to your customers. This streamlined connection with Shopify reduces manual intervention and enhances your fulfillment process.

Order Creation Webhooks

Follow these steps to set up order creation webhooks in Shopify, connecting to the Uhuu API:

Step 1: Browse Shopify Dashboard

Navigate to your Shopify store's admin dashboard.

Step 2: Access Shopify Settings

Shopify Store Settings
Shopify Store Settings

In your Shopify admin dashboard, click on "Settings" located in the lower left-hand corner of the screen.

Step 3: Navigate to Notifications

Click Notifications from Side Menu
Click Notifications from Side Menu

Within the "Settings" menu, select "Notifications."

Step 4: Choose Order Notifications

Scroll down to the "Order notifications" section. Click on "Order Confirmation" to access notification settings for order creation.

Step 5: Setup Webhook

Create webhook
Create webhook

Scroll to the bottom of the page to locate the 'Webhooks' section. Click on "Create webhook."

Step 6: Configure Webhook Details

Add webhook for "Order creation" Event
Add webhook for "Order creation" Event

In the webhook creation window, you will configure the details:

  • Event: Select "Order Creation" event.
  • URL: Enter the URL of the Uhuu API endpoint where orders should be sent.
  • Format: Select JSON.
  • Api Version: Select latest

Step 7: Enable the Webhook

Copy your verification signature to configure your uhuu shop
Copy your verification signature to configure your uhuu shop

Once you've created the webhook, configure your verification signature on Uhuu Store to authorize Shopify requests.

Congratulations! Your Shopify order creation webhooks are now connected to the Uhuu API. Orders will be automatically sent to Uhuu for printing and customer delivery, enhancing efficiency and customer satisfaction.