Build 10x products in minutes by chatting with AI - beyond just a prototype.
Topics
Can DhiWise export Figma to Shopify?
Can I customize the Shopify store code generated from DhiWise?
Does DhiWise create responsive Shopify stores?
Is DhiWise only for Shopify Liquid code generation?
Exciting changes ahead! We’ve temporarily paused support for Figma to Shopify Liquid. Why? Because we’re doubling down on the powerful frameworks that drive modern development: Flutter, React, HTML, and Next.js — all designed for speed, scalability, and flexibility. Get started with DhiWise — where your ideas come to life faster.
Want to transform your Figma designs into a captivating Shopify store? Make it more effortless and faster with DhiWise- A developer’s platform for building web and mobile apps in record time!
The innovative platform streamlines the app development process by intelligently converting your Figma design to code (e.g., Figma to Shopify Liquid, React, Next.js, HTML, Flutter, Android, and iOS code), configuring UI components, setting up styles, and much more.
This article provides a step-by-step guide to converting Figma to Shopify Liquid code. Well, before getting into the design to code details let’s first briefly understand Shopify and Figma.
Shopify is a robust e-commerce platform that allows developers to build and customize online stores. It provides a range of APIs, tools, and pre-built features, making creating scalable and efficient e-commerce solutions easier.
Shopify Liquid is a templating language specifically designed for creating dynamic content within Shopify themes. It allows you to control the layout and display of information on your Shopify store using code snippets.
Figma is a browser-based, collaborative design tool that lets you design and craft interactive mockups. With the platform, you can effectively handle various tasks such as designing icon sets, illustrations, logos, and more in the cloud, making teamwork a breeze.
Follow the steps outlined below for Figma to Shopify Liquid code conversion or watch this step-by-step video for a deeper understanding of the tool:
Sign up with your Google, GitHub, or Discord account.
Sign up to DhiWise
Once your account is all set, Navigate to the Dashboard where you can view and search the created applications.
Choose Application Playground
At the Dashboard choose your application playground as Web App, where you can create apps with Shopify Liquid, React, Next.js, and HTML framework.
Now you will be navigated to the next screen, where you can create a web app from your Figma design or you can choose the design from the prebuilt templates and categories. Click Start Building to transform your Figma design into interactive code.
Next, in the Create a new app window provide the below-required inputs.
After defining the core attributes of your application click Start Building to proceed.
Define Core Attributes
The platform allows you to set app configuration and select app screens from the Figma file, so you can modify the selected screens and generate code for them.
In the next window, you can select the web application screens to start creating your app from the Figma URL you provided. Select the screens you want to import and click Confirm Selection.
Screen Selection
Next, in the Application setup window, you can configure the application identifier and icon. And after updating the changes click Save and Continue.
Application Setup
While DhiWise fetches your design resources, you can set the application code configuration. Here you can configure the app’s foundational elements as below:
Once you select the desired elements click Save & Continue to proceed.
Code Configuration
DhiWise will take only a few minutes to fetch your Figma design resources.
Fetch Figma Resources
The Figma design resources are fetched, scanned, and identified during the above process. Here you can see how the platform auto-identified UI components, and custom UI components such as Input, Button, List, Image, Row, Grid, Dropdown, and more.
Auto-Identified Components
From here, you can proceed to a screen list view that allows you to select and customize each screen.
Now you can view all the screens you have fetched with the screen summary. To start customizing each screen click Configure. Moreover, from here, you can search the screen and view the screen summary.
Screen List View
The platform enables extensive web app UI customization. It allows you to set up:
It also offers a layout tree view and design previews. And the best part is you can generate code for selected components.
Customize Screen UI
You can build responsive Shopify UI for desktops, tablets, and mobiles. Its Smart Editor allows you to switch between devices effortlessly, ensuring pixel-perfect designs. This eliminates the need for constant rebuilding, instantly reflecting your changes on the chosen device.
Responsive Design
The platform auto-generates component-based Shopify Liquid code for identified UI components. In a case, if any component is misidentified it can be changed to a different view type.
Change Component View Type
The Style option for component styling allows you to customize properties like display, spacing, overflow, position, typography, radius, background, borders, and effects.
UI Styling
Download the DhiWise App from the Shopify App Store to push the code directly to your store.
DhiWise App Shopify Store
Select the section for which you want to download the code and click Generate code.
Generate Code for Selected Section
Add the section details like Section name and Section type to proceed.
Shopify Section Code Configuration
Regenerate code, download code, push to Shopify
Woohoo! 🎉Now you have your Shopify application code, but where to go from here?
Template code
This line includes a CSS file named herosection.css to style the hero section.
Retrieves a specific product based on a setting defined in the section. The object allows access to all products by handle.
Loops through up to 3 product images, displaying them with specific dimensions (106x126), centered cropping, and lazy loading.
If there are more than 3 images, it shows the fourth image and a label with the count of additional images (+X).
Displays the product price. If there is a discount (compare_at_price greater than price), it shows the original price with the percentage of discount.
Loops through product variants (e.g., sizes), displaying each variant's title as a selectable option.
The use of translation keys allows dynamic rendering of text based on the store's language settings.
This script adds event listeners to the 'Add to Cart' and 'Add to Wishlist' buttons and can be modified according to your functionality.
This schema defines a section for product details, where merchants can:
It provides flexibility for managing product-related offers and terms within the Shopify theme editor.
DhiWise just goes beyond Figma to code conversion with its amazing feature set for Shopify Liquid app development.
Shopify Liquid store development and DhiWise key features
Following are the key capabilities of DhiWise for Shopify Liquid store development.
This guide provided a comprehensive overview of converting Figma designs to Shopify Liquid code using DhiWise. By leveraging DhiWise's intelligent features, you can streamline your development process and create captivating Shopify stores in a flash.
Key Takeaways:
Ready to take your Shopify store development to the next level?
Sign up for DhiWise today and experience the power of automated Figma to code conversion. With DhiWise's intuitive tools and robust features, you can bring your design vision to life quickly and effortlessly.
Why this shift? Our design-to-code tool was just the beginning. Today’s developers need more than just a simple handoff — they need a comprehensive platform that accelerates the entire app lifecycle. That’s why DhiWise empowers you to plan, build, and launch in record time using the frameworks that matter most. With DhiWise, you don’t just convert designs — you create fully functional, production-ready apps. While Figma to Shopify Liquid is paused for now, we’re constantly evolving. Stay tuned for what’s next — the future of development is just around the corner.
├── assets
| └── productlist.css --------- Styling for the section
├── images --------- Contains all images
│ └── img_1.png
├── locales
│ └── en.default.json --------- Storefront locale file
│ └── en.default.schema.json --------- Schema locale file
├── sections
│ └── productlist.liquid --------- Reusable modules of content, containing HTML and Liquid
├── snippets
│ └── img_frame.liquid --------- Reusable SVGs
└── templates
└── productlist.json --------- Defines the order of sections
{% assign product = all_products[section.settings.product]%}all_products{% for image in product.images limit: 3 %}{% if product.images.size > 3 %}<h2>{{ product.price | money }}</h2>{% if product.compare_at_price > product.price %}{% for variant in product.variants %}{{ 'sections.proddetail.add_to_cart' | t }}{{ 'proddetail.css' | asset_url | stylesheet_tag }}{% assign product = all_products[section.settings.product] %}
<div class="proddetail __dhiwise">
<div class="rowrectangle">
<div class="listrectangle">
{% for image in product.images limit: 3 %}
<img
src="{{ image | img_url: '106x126', crop: 'center' }}"
alt="{{ image.alt | escape }}"
width="106"
height="126"
loading="lazy"
class="rectangle" />
{% endfor %}
<div class="stackfour">
{% if product.images.size > 3 %}
<img
src="{{ product.images[3] | img_url: '106x126', crop: 'center' }}"
alt="{{ product.images[3].alt | escape }}"
width="106"
height="126"
loading="lazy"
class="image-1" />
<h1 class="four">
+{{ product.images.size | minus: 3 }}
</h1>
{% endif %}
</div>
</div><script>
document.addEventListener('DOMContentLoaded', function() {
const addToCartButton = document.getElementById('AddToCart');
const addToWishlistButton = document.getElementById('AddToWishlist');
addToCartButton.addEventListener('click', function() {
// Add to cart functionality
// You would typically use the Shopify AJAX API here
console.log('Added to cart');
});
addToWishlistButton.addEventListener('click', function() {
// Add to wishlist functionality
// This would depend on your specific wishlist implementation
console.log('Added to wishlist');
});
});
</script>
{% schema %}
{
"name": "t:sections.proddetail.name",
"tag": "section",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
}
],
"blocks": [
{
"type": "offer",
"name": "Offer",
"settings": [
{
"type": "text",
"id": "offer",
"label": "Offer",
"default": "Special offer get 25% off"
},
{
"type": "text",
"id": "tc",
"label": "Terms and Conditions",
"default": "T&C"
}
]
}
],
"presets": [
{
"name": "t:sections.proddetail.presets.name",
"blocks": [
{
"type": "offer"
},
{
"type": "offer"
},
{
"type": "offer"
}
]
}
]
}
{% endschema %}