Add the product widget
Add the Subrise widget to your product pages in the theme editor, style it, and set what each option shows.
The product widget shows the subscription options on your product pages, so customers can choose between a one-time purchase and a subscription. It's an app block you add in Shopify's theme editor.
The widget only shows on products that are on a Subrise plan. On other products it stays hidden.
Add the widget to your theme
The quickest way is from Subrise:
- Go to Settings > Installation.
- Choose your Theme and click Add product widget.
- The theme editor opens on your product template with the widget already added. Move it if you like, then click Save.
The Add widget button in the Dashboard's Setup guide does the same for your live theme.
Add it by hand
- In your Shopify admin, go to Online Store > Themes and click Customize on your theme.
- Open a product template, such as Products > Default product.
- In the product information section, click Add block, open Apps, and choose Product Page Widget from Subrise.
- Drag the block to where the options should show, usually just above Add to cart.
- Click Save.
Tip
Preview a product that's on a plan while you work. On other products the theme editor shows a grey placeholder instead of the options. Customers don't see the placeholder.
Style the widget
Click the block in the theme editor to see its settings.
| Setting | What it does |
|---|---|
| Card Order | Show the subscription card first or second. |
| Show Add to Cart | Place your theme's Add to cart button inside the widget. |
| Widget Layout | Radio or Select. |
| Widget Card Layout | How the one-time and subscription cards sit: column or row, separated or connected. |
| Description/Bullet Points | Show bullet points, the description, both (in a row or a column), or neither. |
| Price Format | Money, with or without currency, or without trailing zeros. |
| Discount Display | How the saving shows, such as the original price crossed out or a "Save" badge. |
| Discount Position | Where the saving sits: above, below, left or right of the price, top or bottom of the card, or nowhere. |
| One-time purchase Title | The one-time card's heading. Default: "One-time purchase". |
| Subscription Title | The subscription card's heading. Default: "Subscribe and Save". |
| Plan View | How customers pick an option: Dropdown, Boxes, Buttons or Radio. |
| Primary Color, Secondary Color | The card colors. |
| Radio and Icon Colors | The radio buttons and bullet icons. |
| Border/Outline Color, Border Radius, Border Outline | The card borders. |
| Card Dropshadow | Small, Medium, Large or None. |
| Selection Background/Border Color, Selection Font Color | The selected option. |
| Font Color | The widget's text. |
| One-time purchase description | Text under the one-time purchase card. |
Click Save in the theme editor when you're done.
Set what each option shows
Each option on a plan can show up to three bullet points and a description in the widget. You set them in Subrise, on the plan.
- Go to Plans and open the plan.
- In the Options card, click the option.
- In the Product widget card:
- Click Add bullet point, enter the text, and pick an icon, such as Money, Shipping or Calendar. You can add up to three.
- Write a Description. You can use bold, italic and underline.
- Click Save.
The Product widget card appears once the plan and the option are saved.
The widget shows each option's Option name in the option picker. The text under it comes from this Product widget card, not from the Option description field.
Gift recipient email
For a single-charge gift option, check Show a recipient email field in the Product widget card. Customers can then enter the gift recipient's email address on the product page. This only works when the option's Maximum charges is 1.
Subscription-only products
When a product is set in Shopify to sell only with its purchase options, the widget hides the one-time purchase card and selects the subscription.
If the widget doesn't show
- Check that the product is on a plan. See Add products to a plan.
- Check that the block is on the template the product uses. Products can use different templates.
- Check that you saved in the theme editor, and on the theme that's live.