Skip to content
Appduz.Get started

Blog

How to turn a Shopify store into a native app with AppDuz

Author to be confirmed · · 3 min read

A step-by-step walkthrough of connecting a Shopify store to AppDuz, choosing a template and designing the app, with an honest note on what is still being finished.

A Shopify store already has most of what a shopping app needs: products, variants, prices, images and collections. The hard part of a native app is usually everything around that catalogue, such as the home screen, navigation and the look of product pages. This guide walks through how AppDuz handles that part, step by step, and says clearly which steps are live today and which are still being finished.

Before you start

You need a Shopify store that is open to the public. A store behind a password page cannot be read, because AppDuz only reads what the store already shows to shoppers. You do not need to install anything in Shopify, share a password or give admin access for the first steps.

It also helps to decide two things up front:

  • Which collections matter most. Most apps lead with three to six collections, not the whole menu of the website.
  • What the first screen is for. A fashion brand may lead with a new-arrivals banner; a grocery store with categories and search. The template you pick later follows from this.

Step 1: paste your store address

Open App Builder and paste your store address. Both a custom domain and a .myshopify.com address work, because AppDuz detects Shopify by checking the store rather than by matching the address.

AppDuz then reads the public catalogue that every Shopify store publishes: products with their variants, prices, images and availability, and collections with their handles. This is read only. Nothing in your store changes.

If the store cannot be reached, for example because it is password protected, the builder says so instead of guessing.

Step 2: pick a template

Templates are starting layouts built for a kind of store: fashion, grocery, electronics, beauty, home and a general layout. Each one sets the order of sections on the home screen, such as a header, a hero banner, category tiles and product grids, and a default colour palette.

You can browse them in the templates gallery before connecting a store. The preview there uses sample content; after you connect, the same layout fills with your own products.

Choosing a template is not a lock-in. Switching template later keeps your content, such as your store name, logo and chosen collections, and changes the layout around it.

Step 3: design it in the editor

The editor shows a live phone preview next to the controls. Every change appears in the preview as you make it:

  • Add, remove and reorder sections on the home screen.
  • Change colours, corner radius and button styles for the whole app.
  • Set up the bottom navigation and menu.
  • Undo and redo, with a history of changes.

The preview renders your real catalogue, so you can check how long product names wrap, whether images crop well and whether a collection has enough products to fill a grid.

Step 4 (optional): add a Storefront API token

For most stores the public catalogue is enough to design the app. If you want to connect through Shopify's Storefront API, you can paste a Storefront API access token. It is created in your own Shopify admin from the Headless sales channel, stored encrypted, and can be removed at any time. The Storefront token guide explains how to create one and, just as important, what it does and does not unlock today.

Step 5: build and publish

This is the step that is still being finished. Native Android builds, push notifications and billing are in progress, and AppDuz labels them that way wherever they appear rather than showing a simulated build as real. iOS builds need an Apple Developer account and come after Android.

If you would rather not wait or do it yourself, the AppDuz team offers a done-for-you Shopify to app service and help with publishing to Google Play.

Checklist

  • Store is public, not behind a password page.
  • Three to six collections chosen for the home screen.
  • Template picked to match what the first screen is for.
  • Product images checked in the preview for cropping.
  • Colours and navigation set in the editor.
  • Optional: Storefront API token added.

Where to go next

Back to Blog