How to Setup the App in Shopify Store
Last Updated: June 30, 2026
With the app installed, the next phase is configuring it from the admin side — creating your widget, defining the component steps customers will walk through, telling the app which products are compatible with which, and choosing the storefront layout and colors. This page walks through all five admin tasks in the order most stores follow. Plan for around 15–30 minutes the first time, depending on how big your catalog is and which compatibility input method (AI, CSV, or manual) you pick.
🎬Watch: Setting up widgets & steps
Open on YouTube →
Go to the App Home
In your Shopify admin sidebar, click “Apps → PC Builder: MW” . The app opens to its home dashboard.
The home dashboard is your control centre. At the top you'll see Order Analytics — total orders, total sales, average order value (AOV) — pulled live from any widgets that are already running. Below that is the PC Builder Widgets table where every widget you create will be listed with its status, sales, and quick edit actions.
Create a Widget
Click the “Add Widget” button in the top-right of the widgets table. Give it a name and save.
Each widget is a separate, embeddable PC configurator. You can run multiple widgets in the same store — for example, "Gaming PC Builder" and "Workstation Builder" — each with its own steps, product collections, and compatibility rules. Most stores only need one widget to start.
Add Steps to the Widget
On the widgets table, click the pencil (edit) icon next to your widget to open the configuration page. Click “Add Step” to create each component category — CPU, Motherboard, RAM, Storage, PSU, Case, Cooler, and so on.
For each step, set: the step name (what customers see), the product collection it pulls from (you must have already created the collection in Shopify), and the component type (this drives the compatibility logic — picking "CPU" enables the cpu_brand / cpu_socket / cpu_generation tags). Click Save Step after each one. Steps can be reordered later by dragging them.
Configure Compatibility (Edit Config)
On each step, click “Edit Config” to open the compatibility table where you assign tags (socket, generation, TDP, etc.) to every product.
Compatibility uses tags to filter what shows up in later steps. For example, if a customer picks an AM5 CPU, only motherboards tagged "socket: AM5" appear in the motherboard step. You have three ways to fill in the tags — AI-based setup (Gemini fills them automatically), CSV import (bulk-edit in Excel/Sheets), or manual entry (type directly in the table). Most stores use AI for the first pass and CSV for adjustments.
Customize UI & Extension Settings
Back on the widget configuration page, click the “Widget Settings” button (gear icon) to choose your storefront layout and brand colors.
Inside Settings you pick a UI layout (Compact Dropdown Builder for a single-screen flow, or Product List Builder for a richer multi-select experience with product images and quantity), customize colors for the Back / Skip / Next / Add to Cart buttons, upload a placeholder image shown before customers start building, and toggle features like PDF download and the build-inquiry form.
💡 Three ways to add compatibility data
- →AI-based setup — fastest. Connect your Gemini API key and let AI fill compatibility data.
- →Import CSV file — best for large catalogs. See the CSV Import & Export guide.
- →Manual entry — enter tags per product directly in the Edit Config table.