Placing wigets in non-sectioned themes
Placing Segmentify widgets into a non-sectioned theme needs some code editing. But don't worry no coding skills required and it can be done via theme editor.
What you need to add?
Segmentify Script (which added automagically to your site) needs to know which element(div) will contains the widget.
In your campaign edit page you can set JQuery-like selectors. If your selector "#my-fancy-container" you should add the
following code to your site.
1 | <div id="my-fancy-container"></div> |
Warning
Every recommendation campaign needs its own container. You should repeat this steps for every campaign you have.
Find or set the selector
On the Segmentify Panel, click the "Campaigns" menu. There is six pre-created campaigns for Shopify Users.
Click the actions drop-down and select "Edit".
Please note the area on the right, "Target Div Selector". Every campaign has predefined container id.
List of predefined container ids
| Campaign | Container Selector | Template File |
|---|---|---|
| Home Page Featured Products Recommendation | #seg-home-rec |
Templates/index.liquid |
| Product Page Up-sell Recommendation | #seg-product-rec |
Templates/product.liquid |
| Category Page Top Selections Recommendation | #seg-category-rec |
Templates/collection.liquid |
| Search Page Personalized Recommendation | #seg-search-rec |
Templates/search.liquid |
| 404 Page Personalized Recommendation | #seg-404-rec |
Templates/404.liquid |
| Basket Page Cross-sell Recommendation | #seg-basket-rec |
Templates/cart.liquid |
How to add?
Step 1: Open the theme editor
Just click the "Online Store" link on the left, default page is "Themes"
Click the "Edit Code" on the "Actions" menu
Step 2: Edit the needed file
Step 3: Preview and Segmentify test mode
Warning
Segmentify widgets will not be visible on your site unless you make them "live"
Segmentify test mode allows you to test your widgets without make them visible to your customers.
To enable test mode you can install our Chrome or Firefox extensions.