> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yuko.so/llms.txt
> Use this file to discover all available pages before exploring further.

# Purchase Options Widget

> Show one-time and subscription purchase options, with the price and charge timing, on product pages.

<Note>
  **Where to find this:** Shopify admin → Apps → Yuko Loyalty → Membership → Widgets → Product page: Purchase options
</Note>

## Introduction

The **Product page: Purchase options** widget shows a product's purchase options on the product page: a one-time purchase plus each subscription plan, with its price and how often it's charged. It's the **Yuko: Purchase Options** theme app block.

## What problem this solves

Many themes don't show subscription options clearly, or don't show them at all. Without them, customers can't pick the subscription on your membership product. This widget lists every option with clear pricing and renewal terms.

## Where it appears

* Product pages, wherever you add the **Yuko: Purchase Options** block.
* It shows only on products that have subscription options (selling plans), such as your plans' linked membership products.

## Overview

* A one-time purchase option (unless the product is subscription-only) and one option per subscription plan.
* A summary under the options showing the charge, your renewal terms and a link to your subscription policy.
* Optionally changes the theme's buy button text when a subscription is selected.
* A **Custom CSS** field.

## Before you start

<Check>At least one plan exists in **Membership → Plans**, so its linked product has a subscription option.</Check>
<Check>The **Yuko App** embed is turned on in your theme. See [Theme App Embed](/installation-and-setup/theme-app-embed).</Check>

## Setup guide

### 1. Configure the widget in Yuko

<Steps>
  <Step title="Open the widget">
    Go to **Membership → Widgets** and click **Customize** on **Product page: Purchase options**.
  </Step>

  <Step title="Edit the text">
    | Field | Default |
    | - | - |
    | **Title** | `Purchase options` |
    | **One-time purchase label** | `One-time purchase` |
    | **Charge prefix** (under **Charge timing**) | `Billed`, shown before the frequency, as in "Billed every month" |
    | **Renewal terms** | `Auto-renews, skip or cancel anytime` |
    | **Subscription policy link label** | `View subscription policy`. Shown only when your store has a subscription policy in Shopify's legal settings. |
  </Step>

  <Step title="Set the buy button">
    Under **Buy button**, **Update the buy button text when a subscription is selected** is on by default. Set the **Subscription buy button label** (default `Add subscription to cart`), or turn the option off to keep your theme's button text.
  </Step>

  <Step title="Add Custom CSS (optional)">
    Use the **Custom CSS** field to adjust the widget's look.
  </Step>

  <Step title="Save and enable">
    Click **Save**, then switch the widget on with the toggle on its card in **Membership → Widgets**.
  </Step>
</Steps>

### 2. Add the block to your product template

<Steps>
  <Step title="Turn on the Yuko App embed">
    Theme blocks get their content from Yuko's storefront script, which loads through the **Yuko App** app embed. If you haven't already, enable it in **Online Store → Themes → Customize → App embeds**. See [Theme App Embed](/installation-and-setup/theme-app-embed).
  </Step>

  <Step title="Open the Theme Editor">
    In your Shopify admin, go to **Online Store → Themes**, find your active theme, and click **Customize**.
  </Step>

  <Step title="Pick the right template">
    Use the template selector at the top to open the page where this widget should appear (Product, Cart, a page template, and so on).
  </Step>

  <Step title="Add the Yuko app block">
    Click **Add block** in the section where you want the widget. Under **Apps**, select the Yuko block named for this widget (block names start with **Yuko:**).
  </Step>

  <Step title="Position and save">
    Drag the block to your preferred position and click **Save**.
  </Step>
</Steps>

Open the **Product** template used by your membership product and add **Yuko: Purchase Options**, usually just above the buy buttons. The block has no theme-editor settings.

### 3. Verify

Open your membership product on the storefront. Check that the options appear, that selecting the subscription shows the charge summary, and that the buy button text changes (if enabled).

## How it works

1. On a product with subscription options, the block lists the one-time option (if allowed) and each plan with its price.
2. When the customer selects a subscription, the summary shows the price with your charge prefix and frequency, your renewal terms and the policy link.
3. The selected plan is added to the cart with the product.

### Limitations

* Shows only on products with subscription options.
* In the theme editor, the block always shows so you can position it; on the live store it shows only when the widget is switched on.

## FAQs

<AccordionGroup>
  <Accordion title="The block doesn't appear on my product">
    Check that the product has a subscription option, the widget is switched on in Yuko, and the block is added to the product template that product uses.
  </Accordion>

  <Accordion title="Why is there no policy link?">
    The link appears only when your store has a subscription policy set in Shopify's legal policy settings.
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Cart Membership Upsell" icon="cart-plus" href="/memberships/widgets/cart-membership-upsell">
    Promote your plan in the cart drawer or cart page.
  </Card>

  <Card title="Checkout Membership Upsell" icon="cash-register" href="/memberships/widgets/checkout-membership-upsell">
    Offer your plan inside Shopify Checkout (Shopify Plus).
  </Card>

  <Card title="Profile Membership" icon="user" href="/memberships/widgets/profile-membership">
    Let members view and manage their plan in their account.
  </Card>

  <Card title="Purchase Options" icon="list-check" href="/memberships/widgets/purchase-options">
    Show one-time and subscription options on product pages.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Book a Free Setup Call" icon="phone" href="https://cal.com/rameshelamathi/yuko-demo">
    Talk to our team for personalised setup help.

    **Time:** 30 minutes
  </Card>

  <Card title="Contact Support" icon="life-ring" href="https://yuko.so/support/">
    Visit our support hub for help articles, live chat and ticket submission.
  </Card>

  <Card title="Browse the Guides" icon="book" href="/getting-started/welcome">
    Documentation across loyalty, referrals, memberships and more.
  </Card>

  <Card title="Install Yuko" icon="shop" href="https://apps.shopify.com/yuko">
    Add Yuko to your Shopify store from the Shopify App Store.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.