Shopify integration - how to go from builder.io to Shopify?

Technical Questions Shopify
1

Hi,
I apologize for asking this dumb question… So far I have used figma to design a page, then I was able to bring the page into builder.io. I then created a custom app to get the data into builder.io. I am wondering what is the next step to bring this new page into shopify?
Thank you

2

Hello @ajaved1,

Welcome to the builder.io forum post.

  1. Integrate Builder.io with Shopify: Make sure you’ve integrated Builder.io with your Shopify store. This integration allows you to use Builder to design and manage your Shopify pages. If you haven’t done this yet, you can follow the guide on integrating Builder with Shopify.
  2. Use the Visual Editor: Once you’ve integrated Shopify with Builder.io, use the Visual Editor to create or edit pages, sections, or templates as needed. Drag and drop elements, and customize the design according to your requirements.
  3. Create Custom Sections or Pages: Depending on whether you need a full page or a reusable section, you’ll want to create the appropriate model in Builder.io.
  1. Embed Your Builder Content in Shopify: To embed the content created in Builder.io into Shopify, utilize the BuilderComponent in your Shopify theme files. This usually involves adding custom code to your Shopify templates.
{% comment %}
Add this snippet to your Shopify theme to render Builder sections
{% endcomment %}

<div id="builder-section">
  <!-- Replace 'YOUR_API_KEY' with your actual public API key from Builder.io -->
  <script>
    window.builderApiKey = 'YOUR_API_KEY';
  </script>
  <div id="builder-component"
       data-builder-component="custom-section"></div>
</div>

<script>
  (function() {
    var script = document.createElement('script');
    script.src = 'https://cdn.builder.io/js/webcomponents';
    script.async = true;
    document.head.appendChild(script);
  })();
</script>