Integrating DhiWise with Your Shopify Workflow: A Developer's Guide

Are you frustrated with the tedious process of developing Shopify stores from Figma designs, only to find yourself bogged down by manual coding?

Discover DhiWise Shopify – your ultimate solution for efficient and seamless Shopify store development. With DhiWise, you can effortlessly generate dynamic code, connect your collections, blogs, and products, and significantly speed up the development process without sacrificing code quality.

Say goodbye to manual coding and hello to a more streamlined, efficient workflow.

Wondering what we do differently?

Customizable Sections: Craft dynamic sections that seamlessly blend across your Shopify store for a truly unique aesthetic.

Pixel-Perfect Accuracy: Generate flawless code mirroring your Figma designs, ensuring a perfect visual transition with no functionality compromise.

Tailored Schema: Empower store owners with a customizable schema that integrates flawlessly with the Shopify CMS, offering unparalleled control.

Production-Ready in Minutes: Speed up development cycles and launch designs quickly with minimal effort.

Shopify-Compliant Structure: Organized code that adheres to Shopify's best practices guarantees optimal performance and maintainability.

One-Click Shopify Integration: Simplify deployment with effortless integration to your Shopify store in just one click.

Full Code Ownership: Enjoy complete independence with code that you have full control over—zero limitations or dependencies.

Experience the future of Shopify development with DhiWise, how? Read on.

Section code structure

1. CSS Inclusion

Copy
1
{{ 'collection.css' | asset_url | stylesheet_tag }}

This line includes a CSS file named collection.css to style this section.

2. HTML Structure and Liquid Loop

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="section__categories">
      **{%- for collection in section.settings.collection_list -%}**
        <div class="section__categories-item">
          <a href="{{ collection.url }}">
            <img
              src="{{ collection.image | image_url: width: 369, height: 485 }}"
              alt="{{ collection.title }}"
              width="369"
              height="485"
              loading="lazy"
              class="section__categories-image" />
            <h1 class="section__categories-title">{{ collection.title }}</h1>
          </a>
        </div>
      {%- endfor -%}
    </div>

• The for loop iterates over a list of collections defined in the section settings.
• For each collection, an HTML block is generated that includes:
  • An anchor tag (<a>) linking to the collection URL.
  • An image tag (<img>) displaying the collection image with specified dimensions.
  • A heading (<h1>) displaying the collection title.

3. Schema Definition

      {
        "name": "t:sections.collection.name",
        "tag": "section",
        "settings": [
          {
            **"type": "collection_list",**
            "id": "collection_list",
            "label": "t:sections.collection.settings.collection_list"
          }
        ],
        "presets": [
          {
            "name": "t:sections.collection.presets.name"
          }
        ]
      }
    {% endschema %}

• Specifies a collection_list setting that allows users to select multiple collections from the Shopify admin.
• Includes a preset to facilitate adding this section to pages.

Why This Code Stands Out?

1. Modular and Reusable: The use of a section allows this code to be easily reused across different parts of the Shopify store, making it modular and efficient.
2. Dynamic Content: By using the for loop and accessing section.settings.collection_list, the code dynamically generates content based on user-defined settings, enhancing flexibility.
3. Lazy Loading: The loading="lazy" attribute on the image tags improves page load performance by deferring the loading of images until they are needed.
4. Responsive and Accessible: The specified image dimensions and alt attributes for accessibility ensure the content is both responsive and accessible to users with disabilities.
5. Internationalization: The use of translation keys (t:) indicates an effort towards supporting multiple languages, which is good practice for international stores.

Integrating DhiWise with your Shopify workflow

How to integrate it into your workflow? It’s super easy.

Step 1: Create a DhiWise account

Sign up with DhiWise to access the platform that automatically generates code from your Figma designs and seamlessly integrates them into your Shopify store.

Step 2: Upload your Figma design

Now it's time to leverage its magic! Here's how to upload your Figma design and generate the corresponding Shopify Liquid code for a specific section:

• Upload Your Figma Design:

Navigate to the DhiWise “Dashboard” and select “Web App” playground, where you can upload Figma design, configure applications, customize desired UI Components, and select the section for code generation.

• Generate code

Once you've selected the desired section, initiate the code generation process. DhiWise will analyze your Figma design and translate that section into optimized Shopify Liquid code.

Figma

Step 3: Add files generated by DhiWise to Shopify Store

The DhiWise-generated files for your Shopify section consist of:

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

To use the code, simply push the code into your Shopify theme's code editor.

Shopify

Ready to ditch the hand-coding grind? Try DhiWise and experience the difference!

DhiWise streamlines your Shopify workflow by generating dynamic code that connects to your collections, blogs, and products. Stop wasting time hand-coding and enjoy a more efficient, frustration-free experience with DhiWise Shopify.

Key Benefits of DhiWise:

• Effortlessly generate Shopify code from Figma designs
• Save time and resources with automated code creation
• Ensure dynamic content with seamless data connection
• Maintain a clean and organized code structure
• Enjoy a user-friendly experience for store customization

You can check out this step-by-step guide to understand how to use DhiWise with Shopify in detail or follow along to the YouTube video.