Steps to Add Extension in Shopify
Last Updated: June 30, 2026
After you've created and configured a widget in the PC Builder admin, the final step is making it visible on your live storefront. This is done by adding the app's block to your Shopify theme through the theme editor — a fully drag-and-drop, no-code process. The block reads a Widget ID you paste in from the admin, and that ID is what tells the storefront which widget's steps, products, and rules to load. Follow these seven steps to publish your builder live.
🎬Watch: Adding widget to Shopify theme
Open on YouTube →
Go to Shopify Admin
Open your Shopify admin in a new browser tab so you can keep PC Builder: MW open in the original tab.
Keeping both tabs open makes it easy to copy the Widget ID from the app and paste it into the theme settings without losing your place.
Open Online Store → Themes
In the left sidebar, click “Online Store” , then click Themes. Shopify shows your live published theme at the top and any draft themes below.
For safety, you can duplicate your live theme first (click the "..." menu → Duplicate) and add the widget to the duplicate. Once you've confirmed everything works, publish the new copy. This avoids any risk of breaking your live storefront while you experiment.
Customize your theme
Click the “Customize” button on the theme you want to edit. This opens Shopify's drag-and-drop theme editor.
All changes you make here are auto-saved as drafts — customers don't see anything until you click "Save" in the top-right. Use the page selector at the top of the editor to navigate to the page where you want the builder (homepage, a custom landing page, or a product template).
Add App Block / Extension
In the theme editor, click "Add section" or "Add block" depending on your theme. Switch to the “Apps” tab and select "PC Builder: MW".
For the cleanest user experience, create a dedicated page in Shopify (Online Store → Pages → "Add page", title it "Build Your PC") and embed the widget there. Then add a navigation link from your main menu. This gives the builder a permanent home URL like /pages/build-your-pc that you can share or link to from product pages.
Configure the Extension
When the block is added, a settings panel opens on the right side of the editor. Find the “Widget ID” field and paste in the ID you copied from the PC Builder admin.
To find the Widget ID: go back to your PC Builder admin tab, look at the widgets table, and click the small copy icon next to the widget's ID column. Each widget has its own unique ID — paste the correct one. Without a valid Widget ID, the extension shows an empty space on your storefront.
Important — without Widget ID the extension will not workPosition the extension
Drag the PC Builder block to your preferred position in the section list on the left. You can also use the up/down arrows on the block itself.
Place it above the fold (high on the page) so visitors see it immediately without scrolling. The widget is lazy-loaded — it only initializes when it scrolls into view, so its position doesn't affect your page-load speed score.
Save changes
Click the “Save” button in the top-right corner of the theme editor.
Your changes go live the instant you save. Open your storefront in a new tab and verify the builder appears, loads the right products, and lets you walk through the steps. If anything looks off, return to the theme editor — your draft is preserved until you publish.