Figma to Shopify Liquid: A Step-by-Step Guide to Create Shopify Store in Minutes

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: An E-commerce platform for creating and managing stores

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: A popular vector graphics editor and prototyping tool

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.

Convert Figma to Shopify Liquid Code with DhiWise

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:

Step 1: Sign up to DhiWise

Sign up with your Google, GitHub, or Discord account.

Sign up to DhiWise

Step 2: Start building your app

Once your account is all set, Navigate to the Dashboard where you can view and search the created applications. Choose Application Playground

1. 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.

2. Upload your Figma design

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.

3. Define core attributes

Next, in the Create a new app window provide the below-required inputs.

1. Add application name
2. Select a framework from Shopify Liquid, React, Next.js, and HTML (Here we will select “Shopify Liquid”).
3. Select the design system: CSS
4. Add Figma Account
5. Add the Figma URL

After defining the core attributes of your application click Start Building to proceed. Define Core Attributes

Step 3: Screen selection and app configuration

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.

1. Screen selection

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

2. Application setup

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

3. Code configuration

While DhiWise fetches your design resources, you can set the application code configuration. Here you can configure the app’s foundational elements as below:

1. CSS configuration: CSS Variables
2. Typography Unit: px or rem
3. Responsive design: Activates media query and flexible layouts for mobile-friendly design.

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.

Step 4: View, select, and customize web app screens

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

1. Customize web Screen UI

The platform enables extensive web app UI customization. It allows you to set up:

1. Component styles
2. Convert to the existing components
3. 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.

Customize Screen UI

2. Responsive design and real-time preview

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

3. Change View Type

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

4. Component Styling

The Style option for component styling allows you to customize properties like display, spacing, overflow, position, typography, radius, background, borders, and effects.

UI Styling

Step 5: Download the DhiWise app from the Shopify App Store

Download the DhiWise App from the Shopify App Store to push the code directly to your store.

DhiWise App Shopify Store

Step 6: Generate Shopify Liquid code

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

Step 7: Add the code to Shopify Store

• Regenerate Code: Utilize our Language Model to alter the code.
• Push to Shopify: Easily upload your code to your store on Shopify with a single click.
• Download complete code: Access the code without any limitations for downloading.
• Copy the code: Duplicate the code for use in any location.

Regenerate code, download code, push to Shopify

Woohoo! 🎉Now you have your Shopify application code, but where to go from here?

What does the file structure look like?

├── 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

What does the Liquid Section code include? (CSS, HTML, JS, Schema)

Template code

a. CSS Inclusion

1{{ 'proddetail.css' | asset_url | stylesheet_tag }}

This line includes a CSS file named herosection.css to style the hero section.

b. HTML

1{% assign product = all_products[section.settings.product] %}
2
3<div class="proddetail __dhiwise">
4  <div class="rowrectangle">
5    <div class="listrectangle">
6      {% for image in product.images limit: 3 %}
7        <img
8          src="{{ image | img_url: '106x126', crop: 'center' }}"
9          alt="{{ image.alt | escape }}"
10          width="106"
11          height="126"
12          loading="lazy"
13          class="rectangle" />
14      {% endfor %}
15      <div class="stackfour">
16        {% if product.images.size > 3 %}
17          <img
18            src="{{ product.images[3] | img_url: '106x126', crop: 'center' }}"
19            alt="{{ product.images[3].alt | escape }}"
20            width="106"
21            height="126"
22            loading="lazy"
23            class="image-1" />
24          <h1 class="four">
25            +{{ product.images.size | minus: 3 }}
26          </h1>
27        {% endif %}
28      </div>
29    </div>

• {% assign product = all_products[section.settings.product]%} Retrieves a specific product based on a setting defined in the section. The all_products object allows access to all products by handle.

• {% for image in product.images limit: 3 %} Loops through up to 3 product images, displaying them with specific dimensions (106x126), centered cropping, and lazy loading.

• {% if product.images.size > 3 %} If there are more than 3 images, it shows the fourth image and a label with the count of additional images (+X).

• <h2>{{ product.price | money }}</h2> {% if product.compare_at_price > product.price %} 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.

• {% for variant in product.variants %} Loops through product variants (e.g., sizes), displaying each variant's title as a selectable option.

• {{ 'sections.proddetail.add_to_cart' | t }} The use of translation keys allows dynamic rendering of text based on the store's language settings.

c. Javascript for the Add to Cart and Add to Wishlist button

1<script>
2  document.addEventListener('DOMContentLoaded', function() {
3    const addToCartButton = document.getElementById('AddToCart');
4    const addToWishlistButton = document.getElementById('AddToWishlist');
5
6    addToCartButton.addEventListener('click', function() {
7      // Add to cart functionality
8      // You would typically use the Shopify AJAX API here
9      console.log('Added to cart');
10    });
11
12    addToWishlistButton.addEventListener('click', function() {
13      // Add to wishlist functionality
14      // This would depend on your specific wishlist implementation
15      console.log('Added to wishlist');
16    });
17  });
18</script>
19

This script adds event listeners to the 'Add to Cart' and 'Add to Wishlist' buttons and can be modified according to your functionality.

d. Schema: Defines the structure and settings for the hero section

1  {% schema %}
2  {
3    "name": "t:sections.proddetail.name",
4    "tag": "section",
5    "settings": [
6      {
7        "type": "product",
8        "id": "product",
9        "label": "Product"
10      }
11    ],
12    "blocks": [
13      {
14        "type": "offer",
15        "name": "Offer",
16        "settings": [
17          {
18            "type": "text",
19            "id": "offer",
20            "label": "Offer",
21            "default": "Special offer get 25% off"
22          },
23          {
24            "type": "text",
25            "id": "tc",
26            "label": "Terms and Conditions",
27            "default": "T&C"
28          }
29        ]
30      }
31    ],
32    "presets": [
33      {
34        "name": "t:sections.proddetail.presets.name",
35        "blocks": [
36          {
37            "type": "offer"
38          },
39          {
40            "type": "offer"
41          },
42          {
43            "type": "offer"
44          }
45        ]
46      }
47    ]
48  }
49{% endschema %}

This schema defines a section for product details, where merchants can:

• Choose a product.
• Add multiple offer blocks with customizable text.
• Use default preset values to quickly create a section with three offer blocks.

It provides flexibility for managing product-related offers and terms within the Shopify theme editor.

DhiWise key features highlights for Shopify Liquid app development

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.

1. Customizable Sections: Build reusable, dynamic sections that integrate seamlessly across your entire Shopify store.
2. Pixel-Perfect Accuracy: Generate code that flawlessly mirrors your Figma design without compromising functionality.
3. Tailored Schema: Easily customizable schema that integrates with the Shopify CMS, offering store owners complete control.
4. Production-Ready in Minutes: Speed up development and take designs live with minimal effort.
5. Shopify-Compliant Structure: All code is organized to meet Shopify's best practices for sections, blocks, and architecture.
6. One-Click Shopify Integration: Deploy sections to your Shopify store effortlessly with a single click.
7. Full Code Ownership: Enjoy complete flexibility with code that you fully control—no vendor lock-in.
8. Dynamic Asset Linking: Automatically adapt content based on page type, location, or user preferences.
9. Block-Based Code Recognition: Automatically identify and code blocks like images, buttons, grids, sliders, and more.
10. Responsive by Default: Built-in responsive CSS ensures your store works flawlessly across all devices.
11. Pre-Built Functional Actions: Pre-written JavaScript delivers ready-to-use functionality for common tasks.
12. Localized Content Support: Generate code ready for localization, making it easy to present content in multiple languages.
13. Unlimited Custom Sections: Convert any Figma design into fully functional, custom Shopify sections.
14. Dynamic Content Blocks: Enable direct integration of product lists, collections, and blog content for flexible store design.

Conclusion: Effortlessly Build Your Shopify Store with DhiWise

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.