Shopify Checkout App
Table of contents
In short
Terms
| Method | When it makes sense |
|---|---|
| Component | An element that you place in the checkout section of an experience, such as a list of USPs or a shipping progress bar. |
| Experience | Rolling out a component. This could be an A/B test or a rollout to 100 percent of your visitors. |
| Results | This is where you analyze your A/B test results. |
| Deploy | An experience with a component that is delivered to all visitors—for example, the "winners" component from a test. |
Create a Component
You can add components in two places: under “Components” or directly in the experience flow, where you can choose between existing components and a new one. The steps are the same.
Step 1: Create a component
Open “Components” and click “Create component.” Then select the component template you want to use.
Step 2: Fill the component
Depending on the template, you'll have various text and icon fields available. Fill them with your content. On the right, you'll see a preview of how the component looks in the checkout.
Step 3: Save the component
Save the component by clicking “Save” in the top bar of Shopify. Every saved component is now available for use in Experiences.
Modify Saved Components
You can no longer edit a saved component. If you want to make changes, click “View” and then “Duplicate to edit.” Edit and save the duplicate just as you would a new component.
Create a Component Using AI
If the component you want isn't available as a template, you can describe it instead. The AI will create it, including text and icon fields. You can then edit these fields just as you would with any other component.
Create an Experience
Step 1: Create an Experience
Open “Experiences” and click “Create Experience.” Choose whether you want to create an A/B test or a deployment to 100 percent of your visitors.
Step 2: Select a component
Select a saved component or create a new one directly. The selected component is always Variant B.
Optionally, you can select a second component as Variant A and test both against each other. If you leave Variant A blank, your component will be tested against the checkout without a component.
Step 3: Name and launch the Experience
Give the experience a name and click “Start Experiment.” A pop-up will open to guide you through the next steps, which are also demonstrated in the video.
Step 4: Add Experience to the checkout
- Gehe in Shopify zu „Settings“ -> „Checkout“ und klicke auf „Customize“. Alternativ öffnest du den Editor direkt über „Open checkout editor“ im Popup.
- Klicke auf „+ Add app block“ und wähle „Varify“ -> „Experience block“.
- Paste the Experience ID into the “Experience ID” field in the block.
- Klicke im Checkout-Editor auf „Save“.
- Go live on ExperienceIn the pop-up, confirm that the experience has been added to the checkout and set it to “Live.”.
Important: As long as the experience isn't added during checkout, it won't be displayed to any visitor.
Evaluate the experience
