How Widgets fit into the Shopify theme structure
How personalised widgets integrate with your Shopify theme and storefront layout
Overview
Widgets appear in your Shopify theme as dynamic blocks that you can place anywhere your theme allows. Once a widget is created in Liva 7, it becomes available inside the theme editor, where you can position it just like any other block. Liva 7 handles the intelligence behind the scenes, while Shopify controls the layout and styling.
This article explains how widgets fit into the theme structure and how they work alongside your existing design.
Widgets as dynamic theme blocks
Widgets are added to your store through the Shopify theme editor. They behave like any other dynamic block, which means you can drag, drop and reorder them within your theme sections.
This gives you full control over where recommendations appear.
Widgets behave like standard dynamic blocks in the theme editor.
Where widgets can be placed
Widgets can be added to any section that supports dynamic blocks. Most themes allow placement on key pages such as the homepage, product page, collection page and cart page.
This flexibility helps you create a personalised experience across your entire store.
Widgets can be placed anywhere your theme supports dynamic blocks.
Page specific behaviour
Widgets behave differently depending on the page they are placed on. The theme determines the placement, and Liva 7 determines the behaviour.
Examples:
- homepage widgets focus on discovery
- product page widgets focus on relevance
- collection page widgets stay within categories
- cart page widgets surface helpful add ons
Placement defines the context. The engine handles the intelligence.
The page determines the context for the widget.
Styling widgets in the theme editor
Widgets automatically inherit your theme’s styling, but you can customise them further using the theme editor. Depending on your theme, you can adjust:
- colours
- fonts
- spacing
- headings
- borders
- image shapes
- button styles
- section padding
This allows you to match the widget to your brand and layout.
Widgets can be styled using your theme’s built in design settings.
Display type
You can choose the display type for each widget, such as grid or carousel. The theme handles the visual layout, while Liva 7 fills the widget with relevant products.
This gives you control over how shoppers browse recommendations.
Display type controls how the widget is visually arranged.
How widgets load on the storefront
Widgets load dynamically using the strategy and settings you configured in Liva 7. The engine selects the products, and the theme displays them using your chosen styling and layout.
This keeps the experience fast, consistent and visually aligned with your brand.
The engine selects the products, the theme handles the design.
What happens if no widget exists for a page
If a page does not have a widget configured in Liva 7, the theme editor will not show a widget block for that page. This prevents empty or broken sections from appearing.
Each page type requires at least one widget to be created before it can be added.
A widget must exist in Liva 7 before it appears in the theme editor.
How multiple widgets interact with the theme
If more than one widget exists for the same page type, the theme editor will still show only one block. Liva 7 automatically selects the most relevant widget to display.
This keeps your storefront clean and avoids duplication.
Only the selected widget appears in the theme editor.
How widgets support long term theme stability
Widgets are designed to work with any modern Shopify theme. As your theme evolves, widgets continue to adapt without breaking layout or functionality.
They support long term stability by:
- inheriting theme styling
- respecting section structure
- adapting to layout changes
- remaining compatible with theme updates
This keeps your personalised experience consistent over time.
Widgets stay compatible as your theme evolves.
