A Step-by-Step Guide to Ravelry Integration for Knitwear and Crochet Designers on Shopify

If you're a knitwear or crochet designer selling digital patterns via your Shopify store, you can integrate your store with Ravelry to allow your customers to easily add their purchased patterns to their Ravelry libraries. This integration is a free service provided by Ravelry, and while the setup might seem a bit technical, you can complete it in just 5 simple steps.

While Ravelry does provide a short guide (which you'll need to locate on Ravelry to complete some of the steps), I felt it might not be straightforward for those who are less technically minded—particularly because the button integration steps are not clearly outlined. I hope this guide helps clarify the process, so if you've struggled with figuring this out before, you'll now be able to offer your patterns as Ravelry downloads directly from your Shopify store.

To make the process easier, it's best to have two windows open side by side, with both Ravelry and Shopify visible for quick comparison of values.

Step 1: Align Ravelry Item Numbers with Shopify SKUs (Stock Keeping Units)

Locate the Ravelry Item Number

1. Log in to your Ravelry store and open the Pro Seller Section.
   
2. Click on the Pattern Sales tab, then the Patterns tab, to view a list of all your patterns
   
   
3. Select any pattern, and you’ll see a series of information boxes. Find the Item Number box—this contains a unique identifier (letters and numbers) automatically assigned by Ravelry.

Locate the Shopify SKU

1. Access the Product Page:
   Go to your Shopify admin and navigate to the Products menu on the left-hand sidebar. Find the product page for the same pattern you selected on Ravelry and click to open it. 

   

2. Find the SKU Field:

   • Scroll down to the Inventory tab within the product page.
   • Look for the SKU (Stock Keeping Unit) field. By default, this field may be empty, allowing you to input a unique identifier for the product. As you can see, I’ve already entered my Ravelry identifier into the SKU field.

3. Enable the SKU Field if Missing:

   • If you don’t see the SKU field, look for a checkbox labelled 'This product has a SKU or barcode' on the product page.
   • Checking this box often makes the SKU field visible.

Match Item Numbers and SKUs

Now, what is important here is that both the Item Number in your Ravelry store and the SKU in your Shopify store must be identical.

These identifiers are flexible—you can change them on both Ravelry and Shopify. However, for simplicity, there are two main options:

1. Use Ravelry’s Item Number:

   • If you don’t have an existing system to track your products on Shopify, the easiest option is to copy the Item Number provided by Ravelry and paste it into the SKU box on your Shopify product page.

2. Use Your Custom SKU:

   • If you already use a custom SKU system in Shopify, paste your custom SKU into the Item Number box on the corresponding Ravelry pattern page.

Key Reminder:

• Both the SKU and Item Number must:
  • Be identical (they must match exactly).
  • Be unique to each pattern.

This ensures that Shopify and Ravelry can correctly identify and link the same pattern.

Batch Editing for Multiple Products

• On Ravelry: Use the Price Editor (found at the top of the Patterns tab) to quickly update multiple patterns.

• On Shopify:
  1. Go to the Products menu and select the products you want to update by checking their boxes.
  2. Click Bulk edit on the right hand side to open the bulk editor.
  3. Enable the SKU column by clicking Columns in the top right, then selecting SKU.
  4. Update the SKUs as needed.

If you sell the same pattern in multiple languages as separate products in Shopify, ensure all SKUs for that pattern match the Ravelry Item Number. This ensures customers can access the pattern on Ravelry regardless of the version they purchased.

See the example below of my 'Before Fall Sweater,' which is available in both English and French. These are listed as separate products because the information on the product page is in the corresponding language. Since the SKUs for both versions are identical—and the Ravelry identifier is the same—the customer will be able to add the pattern to their Ravelry library regardless of whether they purchase the French or English version.

Once the SKUs and Item Numbers are aligned, move to Step 2.

Step 2: Set Up the Webhook in Shopify

1. In your Shopify admin, go to Settings > Notifications. 

1. Scroll to the Webhooks section at the bottom and click it. 
   
2. Click Create a Webhook.
3. On Ravelry:
   • Navigate to the Pattern Sales tab in your Pro Seller Section and locate the Configure Store tab.
   • Scroll all the way down to see the "Add to Ravelry Library" for Shopify Customers section, click on the Shopify button. 
     
   • Navigate to Step 2, point 3: Set the Event to "order payment", the format to "JSON", and the URL to: (starting with https://www.ravelry.com/shopify/...) - this URL is unique to your store. 
4. Back in Shopify in the Webhook window:
   • Set the Event to Order Payment.
   • Set the Format to JSON. 
   • Paste the webhook URL from Ravelry (e.g., https://www.ravelry.com/shopify/...) into the URL box. 
     
5. Click Save to finalize the webhook.

Step 3: Add the Shared Secret

1. After creating the webhook, Shopify will display a Shared Secret. This is a unique key that Shopify uses to sign data sent to your webhook.
   • Example: shpss1234567890abcdef1234567890abcdef.
2. Go back to Ravelry:
   • In the Configure Store tab - 'Integrate with Shopify' tutorial we accessed earlier, paste the Shared Secret into the empty box under Step 3. 
     
   • Click Save Shared Secret.

Step 4: Test the Integration

Send a Test from Shopify

1. In Shopify:
   • Go to Settings > Notifications.
   • Locate your webhook and click the 3 dots menu next to it.
   • Select Send Test. 
     
   • After sending the test webhook, you should see a notification pop up at the bottom of your Shopify admin screen confirming that the test was sent successfully.
     

Verify on Ravelry

1. On the Ravelry integration page under Step 4, check for Notifications Received from Your Store with a date and timestamp. 

Step 5: Add the Ravelry Button to the Order Confirmation Page

For Non-Shopify Plus Users

1. Go to Settings > Checkout in Shopify. 

1. Scroll all the way down to the Additional Scripts section. 

   

2. Paste the HTML code provided by Ravelry under the Configure Store tab in the 'Integrate with Shopify' tutorial (located under 'Final Step') into the 'Additional Scripts' box in Shopify. The default code from Ravelry should look something like this:

   <span class="sdd-checkout-item-button">
  <form action="https://www.ravelry.com/shopify/XXXXXX/add_to_library" method="post">
    <input type="hidden" name="customer_url" value={{ shop.order_status_url }} />
    <input type="hidden" name="email" value={{ checkout.email }} />
    <input type="hidden" name="order_number" value={{ checkout.order_number }} />
    <button type="submit" class="custom-ravelry-button">
      Add Pattern(s) to Your Ravelry Library
    </button>
  </form>
</span>

• Customize the Button Text:
  You can change the default button text by modifying the line:

• Replace it with your preferred text, such as:

For a more dynamic approach, you can use the following JavaScript code to insert the Ravelry button directly into your Shopify Order Status Page. This method allows flexibility and avoids modifying raw HTML.

Paste the code below into your Shopify Settings > Checkout > Additional Scripts field:

<script>
    Shopify.Checkout.OrderStatus.addContentBox(
        '<h2>Add Your Patterns to Ravelry</h2>',
        '<p>Your order includes PDF files available via Ravelry</p>' +
        '<span class="sdd-checkout-item-button">' +
        '<form action="https://www.ravelry.com/shopify/XXXXXX/add_to_library" method="post">' +
        '<input type="hidden" name="customer_url" value="{{order.order_status_url}}" />' +
        '<input type="hidden" name="email" value="{{checkout.email}}" />' +
        '<input type="hidden" name="order_number" value="{{checkout.order_number}}" />' +
        '<input type="submit" value="Add Pattern(s) to Your Ravelry Library" />' +
        '</form>' +
        '</span>'
    );
</script>

It should look like this:

Customizable Elements:

• Ravelry Store Identifier: Replace XXXXXX with your unique Ravelry store ID.
• Heading: Customize the text in <h2>Add Your Patterns to Ravelry</h2> to better match your store’s tone (e.g., "Add to Ravelry").
• Description: Modify the paragraph text to clarify what the button does for your customers.
• Button Text: Edit the button label to fit your store’s style (e.g., "Add to Ravelry" or "Save to Your Ravelry Library").

Customizing the Button Style

You can further customize the look and feel of the "Add to Ravelry Library" button to match your store's branding. For example, you can adjust the background color, text color, font, or button shape by adding additional CSS code to your script.

After making any customizations, it’s essential to test the full functionality.

For Shopify Plus Users: Advanced Customization with checkout.liquid

If you're a Shopify Plus user, you have additional options to fully customize the Order Confirmation Page by editing the checkout.liquid file. This allows greater flexibility and control over how the Ravelry button is displayed.

How to Add the Button with checkout.liquid

1. Access the checkout.liquid File:

   • In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
   • Locate the checkout.liquid file.

2. Insert the Ravelry Button Code:

   • Add the button code provided by Ravelry in the relevant section for the Order Confirmation Page. This section is typically wrapped in a condition like {% if step == "thank_you" %}.

   • Example Placement: Add the code inside a <div> to style it neatly and ensure it appears properly on the page:

     {% if step == "thank_you" %}
       <div class="content-box">
         <h2>Add Your Patterns to Ravelry</h2>
         <p>Your order includes PDF files available via Ravelry.</p>
         <span class="sdd-checkout-item-button">
           <form action="https://www.ravelry.com/shopify/XXXXXX/add_to_library" method="post">
             <input type="hidden" name="customer_url" value="{{ shop.order_status_url }}" />
             <input type="hidden" name="email" value="{{ checkout.email }}" />
             <input type="hidden" name="order_number" value="{{ checkout.order_number }}" />
             <button type="submit" class="custom-ravelry-button">
               Add Pattern(s) to Your Ravelry Library
             </button>
           </form>
         </span>
       </div>
     {% endif %}
     

      

   • Save and Test:

     • After saving the file, place a test order to confirm that the button appears on the Order Confirmation Page and functions correctly.

Don’t Forget to Test the Integration

Testing your integration is crucial to ensure everything is working as intended before announcing it for your customers. Some of these steps were already covered earlier, but here’s a summary to have everything in one place and ensure it all works as intended. Here’s how to test: 

1. Send a Test Webhook from Shopify

• Go to Settings > Notifications in your Shopify admin.
• Locate the webhook you created earlier (e.g., "Order Payment").
• Click the three dots next to the webhook and select Send Test. 
• After sending the test, check the bottom of your Shopify admin page. You should see a notification confirming the test was sent successfully. 
  

2. Verify the Test on Ravelry

• Go to the Configure Store tab in Ravelry.
• Under Step 4, look for "Notifications Received from Your Store" with a date and timestamp.
• If you don’t see anything, refresh the page and ensure:
  • The Shared Secret in Shopify matches the one you entered in Ravelry. 
    
  • The webhook URL is correctly set up.

3. Place a Test Order

• Add one of your patterns to your Shopify store and complete a test purchase.
• After completing the order, check the Order Confirmation Page:
  • Verify that the "Add Pattern(s) to Your Ravelry Library" button appears. 
    
  • Ensure the button links the correct order, email, and pattern.

4. Test the Customer Experience

• Click the button to add the pattern to your Ravelry library.
• Log in to your Ravelry account to confirm that the pattern appears correctly in your library (the checkbox next to the pattern name should be ticked, and the text next to it should say 'Stored in my library').

Troubleshooting Tips

If the integration doesn’t work as expected:

1. Double-check the SKUs and Item Numbers: Ensure they match exactly.
2. Review the Webhook Settings: Verify the URL, event type (Order Payment), and format (JSON).
3. Re-test the Shared Secret: Confirm it matches what you entered in Ravelry.
4. Inspect the Code: If you customized the button or script, check for typos or missing elements.

By now, your customers should be able to enjoy the patterns they purchase from your Shopify store directly in their Ravelry libraries. This seamless integration removes any barriers for your customers, encouraging them to buy directly from your store. 

With this setup, you can take full advantage of Shopify’s features, such as offering custom discounts, exclusive promotions, or international pricing systems that Ravelry doesn’t support. For more information on setting up local pricing in different markets to make digital knitting and crochet patterns more inclusive and accessible worldwide in your Shopify store, you can watch my Step-by-Step Shopify Tutorial: How to Adjust Pricing for Individual Markets.

And finally, don’t forget to put up a store banner and send a newsletter to inform your customers about this new feature - they won’t know about it unless you tell them! :)