When you switch to a Junip 2.0 plan, your on-site review displays will get a refreshed layout, new features, and faster speeds.
You can see how this update will look on your store using the preview link on this page.
Resolving issues with custom displays
If the 2.0 displays don’t look right on your storefront, it may be because of custom CSS in your Shopify theme code. You’ll need to update your CSS before or after switching to Junip 2.0 to resolve this issue.
To minimize disruptions to your displays, you can either:
Prepare your code in a draft theme before moving to 2.0
Update your code after moving to 2.0
Preparing your code before switching to Junip 2.0
Follow the steps below to prepare your custom CSS in a draft theme before switching to a Junip 2.0 plan.
Step 1: Duplicate your current Shopify theme
From your Shopify admin panel, visit Sales Channels > Online Store > Themes. Duplicate your current theme.
Step 2: Preview Junip 2.0 on your draft theme
Open the actions menu of the theme you just created and select "preview". Your preview will open in a new tab. Add the following extension to the url and refresh the page:
?junip-v2=true&junip-search-enabled=true&junip-preview-mode=true&junip-break-cache=true
This will allow you to preview Junip 2.0 on your draft theme
Step 3: Edit your CSS
Open the code editor for the theme you just created. Find the custom CSS that applies to Junip widgets and make the necessary changes.
Step 4: Temporarily disable on-site displays (optional)
There will be a short period between moving to Junip 2.0 and publishing your updated theme (or vice versa) where your live on-site displays will overlap with the wrong version of your CSS.
If you wish to hide all displays during this period, go to your Junip admin panel and visit Settings > On-site displays. Uncheck “Allow Junip displays on public site”. Be sure to re-enable this setting later.
Step 5 & 6: Move to a Junip 2.0 plan and publish your updated theme
These steps can be completed in any order.
Move to a Junip 2.0 plan
Select a new plan from this page.
Publish your updated theme
Visit your Shopify > Online Store > Themes and publish the draft theme containing your updated CSS.
Step 7: Re-enable displays
If you disabled your public displays in step 4, visit Junip > Settings > On-site displays and turn them back on.
Fix custom CSS after moving to Junip 2.0
If you've already moved to a Junip 2.0 plan, follow these steps to update your CSS.
Step 1: Temporarily disable public displays (optional)
If you want to hide your live displays while you make your changes, visit Junip > Settings > Onsite and uncheck “Allow Junip displays on public site”. Be sure to re-enable this setting later.
Step 2: Edit your Shopify theme code
From your Shopify admin panel, go to Sales channels > Online store > Themes.
Open the code editor of your live theme (you can also create a duplicate theme and make your changes there - this is recommended if you didn’t disable your Junip displays in step 1).
Find the customized Junip CSS in your theme code and edit as needed.
Step 3: Preview your changes
To preview your changes, visit Junip admin > Onsite, select your working theme from the dropdown menu, and then select “preview” in the top right corner.
Step 4: Re-enable public displays
If you disabled your Junip displays in Step 1, re-enable them once you are ready to go live by visiting Settings > On-site displays.