# Create static themes? **URL:** \ **Category:** General\ **Tags:** shopify\ **Created:** [July 22, 2024, 8:04am UTC](https://forum.builder.io/t/create-static-themes/6027 "2024-07-22T08:04:58Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![Ecommfox](https://avatars.discourse-cdn.com/v4/letter/e/e9c0ed/32.png) [@Ecommfox](https://forum.builder.io/u/Ecommfox)\ **Post date:** [July 22, 2024, 8:04am UTC](https://forum.builder.io/t/create-static-themes/6027/1 "2024-07-22T08:04:58Z")
Hello! I’m new to [Builder.io](http://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](http://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 ? ---
**Author:** ![anon43891756](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@anon43891756](https://forum.builder.io/u/anon43891756)\ **Post date:** [July 22, 2024, 10:31am UTC](https://forum.builder.io/t/create-static-themes/6027/2 "2024-07-22T10:31:31Z")
Hi @Ecommfox Welcome to [Builder.io](http://Builder.io) Forum! Creating static themes for Shopify that can be directly installed on stores without maintaining a connection with [Builder.io](http://Builder.io) is possible, but it requires a different approach than the typical [Builder.io](http://Builder.io) integration. Here’s a step-by-step guide to help you achieve this, including extracting code from [Builder.io](http://Builder.io) and integrating it into Shopify templates using Liquid. ### Steps to Create a Static Theme with [Builder.io](http://Builder.io) and Shopify 1. **Design and Build with [Builder.io](http://Builder.io)**: 2. **Extract HTML and CSS from [Builder.io](http://Builder.io)**: 3. **Convert to Liquid Templates for Shopify** : ### Example Workflow: 1. **Build a Section in [Builder.io](http://Builder.io)**: 2. **Export and Integrate into Shopify** : 3. **Convert to Liquid** : 4. **Add Settings Schema for Shopify Customization** : 5. **Create a Shopify Section** : 6. **Include in Theme** : ### Summary: - **Design in [Builder.io](http://Builder.io)**: Use [Builder.io](http://Builder.io) to build and style your sections or pages. - **Export Code** : Export HTML and CSS from [Builder.io](http://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](http://Builder.io), ensuring that clients can install and customize the themes without needing an active connection to [Builder.io](http://Builder.io) spaces. For further details, you may refer to: - [Builder.io’s Exporting Code](https://www.builder.io/c/docs/generate-code) - [Shopify Liquid Documentation](https://shopify.dev/docs/themes/liquid/reference) - [Customizing Shopify Themes](https://shopify.dev/tutorials/customize) ---
**Author:** ![Ecommfox](https://avatars.discourse-cdn.com/v4/letter/e/e9c0ed/32.png) [@Ecommfox](https://forum.builder.io/u/Ecommfox)\ **Post date:** [July 31, 2024, 3:42pm UTC](https://forum.builder.io/t/create-static-themes/6027/3 "2024-07-31T15:42:35Z")
Thank you @anon43891756 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? ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [August 6, 2024, 5:09am UTC](https://forum.builder.io/t/create-static-themes/6027/4 "2024-08-06T05:09:54Z")
Hello @Ecommfox, You can indeed export code directly into Liquid using [Builder.io](http://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](https://www.builder.io/c/docs/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](https://www.builder.io/c/docs/models-intro) and follow the specific guides for [integrating with Shopify](https://www.builder.io/c/docs/shopify-plugin) and using [custom components](https://www.builder.io/c/docs/custom-components-setup). ---
**Author:** ![Ecommfox](https://avatars.discourse-cdn.com/v4/letter/e/e9c0ed/32.png) [@Ecommfox](https://forum.builder.io/u/Ecommfox)\ **Post date:** [October 25, 2024, 1:58pm UTC](https://forum.builder.io/t/create-static-themes/6027/5 "2024-10-25T13:58:46Z")
> [@manish-sharma](#): > > hopify. > 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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/6efe00241669c2f0ab26b1cc89b21d7c83d9bce9.png) The app is dicontinued if I understand it ? How can I go about from here ? Thanks