Create static themes?

General
1

Hello! I’m new to Builder.io I am looking at the solution of creating static themes using the builder. I work mostly on Shopify , and I want to be able to ship a theme clients could direcctly install on their store instead of having a connection with Builder.io spaces. I saw that a code extract is possible when working on the UI, not too much of a tchnical guy myself, but would extracting the code in liquid from a theme and pasting it in templates files be feasable ? Is there another method which is commonly used for developers to do that ?

2

Hi @Ecommfox Welcome to Builder.io Forum!

Creating static themes for Shopify that can be directly installed on stores without maintaining a connection with Builder.io is possible, but it requires a different approach than the typical Builder.io integration. Here’s a step-by-step guide to help you achieve this, including extracting code from Builder.io and integrating it into Shopify templates using Liquid.

Steps to Create a Static Theme with Builder.io and Shopify

  1. Design and Build with Builder.io:

    • Use the Builder.io Visual Editor to create and style your pages or sections.
    • Customize the content as needed for your theme.

  2. Extract HTML and CSS from Builder.io:

    • Builder.io allows you to export the constructed HTML and CSS.
    • Go to the content you’ve built, click on the three dots in the top-right corner, and select “Export Code.”
    • Copy the exported HTML and CSS.

  3. Convert to Liquid Templates for Shopify:

    • Shopify themes are built with Liquid, Shopify’s templating language.
    • Convert the extracted HTML and CSS into Liquid templates. Replace static content with dynamic Liquid tags where necessary.

Example Workflow:

  1. Build a Section in Builder.io:

    • Create a section that might be used for a hero banner, product grid, etc.
    • Configure the styles and content as per the design requirements.

  2. Export and Integrate into Shopify:

    • After building your section, export the HTML and CSS:
      <!-- Exported HTML from Builder.io -->
<section class="hero-section">
  <h1 class="hero-title">Welcome to Our Store</h1>
  <p class="hero-description">The best products available online.</p>
  <a href="/collections/all" class="btn btn-primary">Shop Now</a>
</section>
<style>
  /* Exported CSS from Builder.io */
  .hero-section {
    background: url('banner.jpg') no-repeat center center;
    text-align: center;
    padding: 50px;
  }
  .hero-title {
    font-size: 48px;
    color: #ffffff;
  }
  .hero-description {
    font-size: 18px;
    color: #ffffff;
  }
  .btn-primary {
    background-color: #ff6200;
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
  }
</style>

  3. Convert to Liquid:

    • Modify your HTML to use Liquid, where necessary, to make it dynamic:
      <!-- hero.liquid -->
{% if section.settings.background_image %}
  <section class="hero-section" style="background: url('{{ section.settings.background_image | img_url: 'master' }}') no-repeat center center;">
{% else %}
  <section class="hero-section">
{% endif %}
  <h1 class="hero-title">{{ section.settings.title }}</h1>
  <p class="hero-description">{{ section.settings.description }}</p>
  <a href="{{ section.settings.button_link }}" class="btn btn-primary">{{ section.settings.button_text }}</a>
</section>
<style>
  .hero-section {
    text-align: center;
    padding: 50px;
  }
  .hero-title {
    font-size: 48px;
    color: #ffffff;
  }
  .hero-description {
    font-size: 18px;
    color: #ffffff;
  }
  .btn-primary {
    background-color: #ff6200;
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
  }
</style>

  4. Add Settings Schema for Shopify Customization:

    • Define settings schema in Shopify to allow users to customize the content:
      {
  "name": "Hero Section",
  "settings": [
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background Image"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Welcome to Our Store"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Description",
      "default": "The best products available online."
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link",
      "default": "/collections/all"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Shop Now"
    }
  ]
}

  5. Create a Shopify Section:

    • Place the Liquid code into a section file (e.g., sections/hero.liquid).

  6. Include in Theme:

    • Reference the new section in your Shopify theme’s templates (e.g., in index.liquid).

Summary:

  • Design in Builder.io: Use Builder.io to build and style your sections or pages.
  • Export Code: Export HTML and CSS from Builder.io.
  • Convert to Liquid: Convert the HTML and CSS to Liquid templates, making necessary adjustments for dynamic content.
  • Add Customization: Use Shopify’s settings schema to enable customization within the Shopify admin panel.
  • Integrate: Integrate the Liquid templates into your Shopify theme.

By following this approach, you can create static themes for Shopify using Builder.io, ensuring that clients can install and customize the themes without needing an active connection to Builder.io spaces. For further details, you may refer to:

3

Thank you @garima I saw that it is possible to export code diretcly into liquid , do you recommend it / Regarding data can I create a theme using a store’s data to preview it and export the code in liquid ? Would that work?

4

Hello @Ecommfox,

You can indeed export code directly into Liquid using Builder.io when using Shopify. Here are key points to consider:

  1. Custom Liquid Components: You can create custom Liquid components. This is useful for when you need to provide specific functionality or maintain specific on-brand styling that non-technical team members should not edit. To do this, create a new file matching the pattern snippets/*.block.liquid. This allows the component to be editable within Builder while the logic and styles remain controlled by the Liquid code in your theme.

  2. Using Liquid in Custom Code Blocks: You can add Liquid code directly into Builder pages by using the Custom Code block in the Visual Editor. It should be noted that custom Liquid code will only run on Shopify’s server render — it won’t display in the Builder preview but will run on the published page.

  3. Metafield Code Generation: This option in Builder ensures that all content is saved in metafields, reducing the number of different files and making the content automatically adapt across themes. This method supports server-side rendering but does not support custom Liquid code or snippets within Builder content .

Creating a Theme Using Store’s Data

Yes, you can create a theme using a store’s data and preview it. Here are the steps and considerations:

  1. Theme Preview with Store Data: Builder supports previewing your content with store data. You can use dynamic preview URLs to ensure that your content looks correct with the live data from your store before publishing.

  2. Using Webcomponents for Complete Control: For complete control over content loading without using any Liquid code, you might use Builder’s Webcomponents SDK. This approach loads content only in the browser and is not compatible with Liquid or targeting.

  3. Integrating and Using Custom Components: Integrate sections or page models in your app using Builder’s SDKs, which allows you to preview content with real store data and even export the generated code for multiple frameworks, including Liquid for Shopify.

For more details, you can explore the Builder.io documentation and follow the specific guides for integrating with Shopify and using custom components.

5
  1. Integrating and Using Custom Components: Integrate sections or page models in your app using Builder’s SDKs, which allows you to preview content with real store data and even export the generated code for multiple frameworks, including Liquid for Shopify.

Hello @manish-sharma
I 've been integrating this so far using section embed but trying to integrate page models is impossible : we can’t export in liquid

image
image945×282 18.1 KB

The app is dicontinued if I understand it ? How can I go about from here ?

Thanks