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.
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.
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
In your Shopify admin dashboard, click on "Settings" located in the lower left-hand corner of the screen.
Step 3: Navigate to Notifications
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
Scroll to the bottom of the page to locate the 'Webhooks' section. Click on "Create webhook."
Step 6: Configure Webhook Details
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
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.