Overview

This guide explains how to transfer the Yari Flow Plan Picker from an existing Shopify theme to a new theme.

You do not need to follow these steps when the new theme is a duplicate of a theme that already has Yari Flow installed, because the required files and code should already be included.

Find Yari Flow related theme code

If you are a developer, the quickest way to locate Yari Flow related code is to search the entire theme codebase for yariflow In most code editors, you can search the full project using Ctrl + Shift + F or Cmd + Shift + F.

You should also look for filenames containing yariflow.

This will help identify:

• Yari Flow snippets
• JavaScript and CSS assets
• Product form code
• Variant change event handling
• Shopify section blocks and schema settings

The transfer process depends on which version of the Yari Flow Plan Picker your current theme uses.

Identify your Plan Picker version

Use the following file structure to determine which implementation is installed.

Liquid Component

You are using the Liquid Component if your theme contains these three files:

snippets/yariflow-plan-picker.liquid
snippets/yariflow-plan-picker-plan-label.liquid
snippets/yariflow-plan-picker-allocations.liquid
assets/yariflow-plan-picker.css
assets/yariflow-plan-picker.js


Plan Picker code files

App Block or custom implementation

If none of the files or structures above exist, your store is likely using either:

• The Yari Flow App Block
• A custom Plan Picker implementation

Move the Liquid Component: yariflow-plan-picker.liquid

1. Copy the component files

Copy each file from the existing theme and add it to the corresponding folder in the new theme.

Maintain the same filenames and folder structure.

2. Copy the render statement

Find where the Plan Picker is rendered in the previous theme. This is usually inside the main product form. The code will include:

{% render 'yariflow-plan-picker' %}


Copy the complete render statement from the previous theme rather than adding only the basic line.

The existing implementation may pass additional parameters that are required for the Plan Picker to work correctly.

Move the Yari Flow App Block

If your store uses the Yariflow App Block, follow the Yari Flow App Block Installation Guide to add it to the new theme.

In most cases, this involves opening the Shopify theme editor and adding the Purchase options - Yari Flow app block to the relevant product templates.

Remember to review and copy the app block settings from the previous theme, including the product form ID and any customised labels or display options.

Test the new theme

After moving the Plan Picker, preview the new theme and confirm that:

• The Yari Flow Plan Picker appears on eligible subscription products
• One-time and subscription options are displayed correctly
• The selected product variant updates correctly
• Variant-specific prices update correctly
• Subscription products can be added to the cart
• The selected selling plan appears in the cart or checkout
• One-time purchases do not receive a selling plan
• The Plan Picker works across all relevant product templates

For additional help moving Yari Flow code to a new theme, contact the Yari Flow Support team at help@yariflow.com.

‍