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 - DhiWise Figma to Shopify Liquid in minutes.
Sign up with your Google, GitHub, or Discord account.
Once your account is all set, Navigate to the Dashboard where you can view and search the created applications.
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.
Add application name
Select a framework from Shopify Liquid, React, Next.js, and HTML (Here we will select “Shopify Liquid”).
Select the design system: CSS
Add Figma Account
Add the Figma URL
After defining the core attributes of your application click Start Building to proceed.
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.
Next, in the Application setup window, you can configure the application identifier and icon. And after updating the changes click Save and Continue.
While DhiWise fetches your design resources, you can set the application code configuration. Here you can configure the app’s foundational elements as below:
CSS configuration: CSS Variables
Typography Unit: px or rem
Responsive design: Activates media query and flexible layouts for mobile-friendly design.
Once you select the desired elements click Save & Continue to proceed.
DhiWise will take only a few minutes to fetch your Figma design 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.
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.
The platform enables extensive web app UI customization. It allows you to set up:
Component styles
Convert to the existing components
Group/ungroup UI components
It also offers a layout tree view and design previews. And the best part is you can generate code for selected components.
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.
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.
The Style option for component styling allows you to customize properties like display, spacing, overflow, position, typography, radius, background, borders, and effects.
Select the section for which you want to download the code and click Generate code.
Add the section details like Section name and Section type to proceed.
Download the entire code as shown below. And once the code is downloaded, open it in VS Code (or your preferred code editor).
Woohoo! 🎉Now you have your Shopify application code, but where to go from here?
1{{ 'herosection.css' | asset_url | stylesheet_tag }} 2
This line includes a CSS file named herosection.css to style the hero section.
1<!-- hero section --> 2<div class="homepage__herosection __dhiwise"> 3 <div class="homepage__herosection__details"> 4 <button class="flex-row-center-center homepage__herosection__details__button--offer"> 5 {% render 'img_icon_blue_gray_900', class: "icon" %} 6 <span>{{ 'sections.herosection.msg_enjoy_50_off_in' | t }}</span> 7 </button> 8 <h1 class="homepage__herosection__details__headline"> 9 {{ section.settings.stepinto }} 10 </h1> 11 <p class="homepage__herosection__details__description"> 12 {{ section.settings.description }} 13 </p> 14 <button class="flex-row-center-center homepage__herosection__details__button--shop"> 15 <span>{{ 'sections.herosection.lbl_shop_now' | t }}</span> 16 {% render 'img_frame', class: "frame" %} 17 </button> 18 </div> 19 <img 20 src="{% if section.settings.closeupportra == blank %} {{ 'img_close_up_portra.png' | file_url }} {% else %}{{ section.settings.closeupportra | image_url}}{% endif %}" 21 alt="closeupportra" 22 width="521" 23 height="637" 24 loading="lazy" 25 class="homepage__herosection__image" /> 26</div> 27
{% render 'img_icon_blue_gray_900', class: "icon" %} renders an icon.
{{ 'sections.herosection.msg_enjoy_50_off_in' | t }} retrieves a translatable string.
Headline: An element displaying the main headline text from section.settings.stepinto.
Description: A element displaying a description from section.settings.description.
{{ 'sections.herosection.lbl_shop_now' | t }} retrieves a translatable "Shop Now" label.
{% render 'img_frame', class: "frame" %} renders a frame icon. If section.settings.closeupportra is blank, it uses a default image (img_close_up_portra.png).
Otherwise, it uses the URL specified in section.settings.closeupportra.
1<script> 2 document.querySelector('.homepage__herosection__details__button--shop').addEventListener('click', function() { 3 window.location.href = '/collections/all'; 4 }); 5</script> 6
This script adds an event listener to the "Shop Now" button. When clicked, it redirects the user to the /collections/all page.
1 { 2 "name": "t:sections.herosection.name", 3 "tag": "section", 4 "settings": [ 5 { 6 "type": "image_picker", 7 "id": "closeupportra", 8 "label": "t:sections.herosection.settings.closeupportra" 9 }, 10 { 11 "type": "text", 12 "id": "stepinto", 13 "label": "t:sections.herosection.settings.stepinto", 14 "default": "Step into Fashion at Your <br />Ultimate Style Destination!" 15 }, 16 { 17 "type": "text", 18 "id": "description", 19 "label": "t:sections.herosection.settings.description", 20 "default": "Explore a World of Fashion Possibilities with Exclusive Discounts - Dive into Your Ultimate Style Destination and Elevate Your Wardrobe Today!" 21 } 22 ], 23 "presets": [ 24 { 25 "name": "t:sections.herosection.presets.name" 26 } 27 ] 28 } 29{% endschema %} 30
closeupportra: An image picker for selecting an image.
stepinto: A text field for the headline, with a default value.
description: A text field for the description, with a default value.
Go to your Shopify theme code editor and add a new section file, copy the code from the Sections Liquid file (For example: herosection.liquid)
Then go to Templates->index.json in your theme and add the code from the Templates→json file (Example: herosection.json). Then scroll to the “orders” and update it with the section name. (gif ⬇️)
Go to the Snippets Folder, create a new file by the same name as the downloaded snippets and paste the code in it. (Example: img_frame, img_icon_blue_gray_900)
Update the “sections” block in the Locales files (en.default.json, en.default.schema.json) (gif ⬇️)
Lastly, create a new CSS file in the Assets folder and paste the code.
You can add images directly from your Shopify Panel.
Now you can go to the store and preview the added section.
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.
Auto-Identifies the reusable components across the screens.
Select the appropriate view from the available options, ensuring compatibility with existing components and validation rules.
Create user-friendly web apps that adapt flawlessly to any device, from desktops to smartphones.
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:
DhiWise automates Figma to Shopify Liquid code conversion, saving you valuable time and effort.
The platform offers a user-friendly interface for customizing each screen of your store.
You can build responsive UIs that adapt seamlessly to any device.
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.