How to add MBC Builder to my store?

There are 3 ways to make your pack builder visible for your customers, please, choose what is the best for you:

By adding URl to navigation
By placing a Builder in a specific place
By using templates, Metafields and dynamic ID

Method one: A proxy page (add URl to Navigation)

Enable the app in the theme extension (if it is not done yet):
Go to Online store -> Themes -> Customize active theme
Tab app embeds (1)
Enable 'MBC Builder - Custom boxes' app extension (2)
Click 'Save' (3)



Create your builder and click 'Preview' button:



Copy preview URI from your browser address bar

Add this link to your store customizer, navigation menu, etc. to make it accessible for your customers:
Go to Online store -> Navigation (1) -> Choose the menu where you would like to add the builder page
Click 'Add menu item' (2)
Enter the name and link (3)
Click 'Add' (4)

Method two: A customizer section (placing the builder with a specific ID in a specific place)

Enable the app in the theme extension (if it is not done yet): see the instruction in Method one
Add a section in a specific location with the ID of a specific builder:
Go to Online store -> Themes -> Customize active theme -> Tab Sections (1)
Click 'Add section' (2) and choose 'Builder widget' at the Apps tab (3)
Enter Builder ID (4) and click 'Save' (5)

Method three: A customizer section + Page template + Dynamic builder ID (creation of template, Metafield, transfer of dynamic ID)

Enable the app in the theme extension (if it is not done yet): see the instruction in Method one
Create a new Shopify page template or use an existing one
Create a meta field:
Go to Settings -> Custom data -> Metafields -> Pages
Click 'Add definition"
Enter data: Name - 'Builder id', Key - 'mbcb.builder_id', Description - optional, Type - 'Integer, one value'
Click 'Save'



Connect a Metafield to Builder ID in the customizer
Go to Online store -> Theme -> Customize -> Sections (1)
Click 'Home Page' in the Header (2) and choose 'Pages' (3)
Click 'Create template' (4), enter a Page name (5) and click 'Create template' (6)
Go to Sections -> Template -> Click 'Add section' (7) -> Tab 'Apps' (8 ) -> Choose a Builder widget (9)
Click 'Connect dynamic source' (10) in the right menu -> Choose 'Builder ID' (11) -> Click 'Save' (12)











Create a page with a specific template with the id in the Meta field
Go to Online store -> Pages -> Add page
Add a Title (13) and Choose a builder template (14) -> Click 'Save' (15)
In the Metafields block click "Show all' (16)
Fill the Metafield 'Builder id' (17)
Click 'Save' (18)







After that, if you go to this page there should be displayed a builder which ID was set in the Metafield

Updated on: 12/03/2024