Live Designer
Adding Recommendations Using The Live Designer
If you are not using an Online Store 2.0 theme that supports App Theme Extensions, this is the method we advise.
The Live Designer only works if your store is public and your theme is live
Accessing the Live Designer
Go to the Recommendify embedded dashboard in your Shopify Admin and click Launch Designer on the home page.
The Live Designer will open in a new tab.
Adding Recommendations
The Live Designer opens on the home page of your store.
Using the top menu, you can select eithe the home page, the product page, or the cart.
On the left hand side, next to the preview of your store, you will see a list of panels already added to the page, and an Add Panel button.
Click Add Panel and a popup will appear showing the types of recommendations available on that page of your store.
Select one and it will be added.
Configuring A Panel
The Panels have the following settings:
Panel Type
This controls how the recommendations display. They are either in a grid of recommendations (of which the number can be controlled through the settings in the embedded dashboard) or in a carousel.
Wrapper DIV ID
This gives you the option to add a wrapper DIV element around the Recommendify panel. You can give it a specific ID attribute. This can be useful for custom CSS or interactions.
Location Anchor
This is the CSS anchor that Recommendify looks for on the page to add your panel. For example, many legacy themes have a .main-content section and it would be appropriate to add the Recommendify panel to the end of it.
Insert Mode
This controls how the panel is added to the element specified by Location Anchor.
There are 2 modes:
- append()
- insertBefore()
append() adds the Recommendify panel as the last child element of the element specified by Location Anchor.
insertBefore() adds the Recommendify panel as a new element above the element specified by Location Anchor.
Carousel Pause
This controls the time between when the carousel loads and when it starts to rotate.
Carousel Transition Speed
This controls the time it takes the carousel to scroll.
Loop Carousel
This controls whether the carousel acts as a continuous loop.
Autoplay Carousel
This controls whether the carousel starts moving automatically after the carousel pause time has elapsed.
Show Carousel Dots
This controls whether the carousel navigation dots show below the recommendations.
Custom CSS
This is where you can add any custom CSS code that you want to affect this recommendation panel.
Show Live
This controls whether the panel shows on your live store. It is unticked by default. Make sure you tick it and click save!