Shopify

Patrick
@patrick
Timon
@timon

To integrate uhuu with shopify, you will first want to have your product personalization front-end ready. Afterwards you can inform Uhuu Store API about ordered personalization products.

The process will essentially look like this:

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

Shopify Front-End Integration

Integrate Uhuu with Shopify using Liquid templates and 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]/integration/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"/>

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


Uhuu Shopify Front-end integration is complete, and now the Uhuu Personalizer will be added to the Shopify cart with a personalized ID property.



Shopify Back-End Integration

Set up order creation webhooks for seamless printing using the Uhuu API and automatic delivery to your valued customers. Streamline your order fulfillment process, reduce manual intervention, and offer efficient order processing. With this powerful combination of Shopify and Uhuu, you'll provide new values to your customers with every order. Get started today.

Order Creation Webhooks

Here are the step-by-step instructions with screenshots to set up Order Creation Webhooks on Shopify for seamless integration with 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! You've successfully set up Order Creation Webhooks on Shopify to seamlessly integrate with the Uhuu API. Orders will now be automatically sent to Uhuu for printing and delivery to your customers.