The membership widget is the box shoppers see on a membership product page. It shows your membership plan and its price, and lets shoppers choose a plan before they add the membership to their cart. In Widget Settings you change the widget’s wording, colors, spacing and tooltip without editing your theme. The same page holds the wording of the Membership box shown after checkout and the member price settings.
Open it in Appstle Memberships from More → Customizations → Widget Settings. The page has three tabs: Widget Customization, Member Price and Cart Widget. The settings apply to every membership product in your store.
Before you start
Turn on the app embed. In your theme editor (Online Store → Themes → Customize), open App embeds and switch on Appstle℠ Memberships. Without it the widget can’t load. See Get Started: Install Appstle℠ Memberships on Shopify.
Attach a membership plan to a product. The widget only appears on products that have a membership plan. On a product with several variants, it shows only while a variant that has a plan is selected. See Create a membership plan.
Keep the product in stock. The widget doesn’t appear when every variant of the product is sold out.
Know where it shows. The widget appears on product pages, near your theme’s Add to cart button. If your theme’s button isn’t recognized, the widget doesn’t appear. Add the Membership Widget app block to your product page in the theme editor and the widget loads there instead.
Change and save your widget settings
In your Shopify admin, open Apps → Appstle℠ Memberships.
Click More, then under Customizations click Widget Settings.
Pick a tab. On Widget Customization, click a card to open it. Opening one card closes the one that was open.
Make your changes. The Dummy Product Preview beside the cards (below them in a narrower window) updates as you type, so you can try wording and colors before you save. It uses sample prices and always shows a dropdown, even when radio buttons are on.
Click Save in the bar at the top of the page. You see Widget Settings Updated. To undo changes you haven’t saved, click Discard and confirm.
Open a membership product on your store. Changes appear within a few seconds. If you don’t see them, refresh the page.
What shoppers see
This is the widget on a product with one membership plan, with the default wording. The table below shows which setting controls each part.
What shoppers see | Setting |
Heading above the box (“Membership Options”) | Member Options Text |
Text next to the icon (“Join Now”) | Membership Options Text |
Round icon | Widget Image |
Price on the right | Selected Membership Plan Price Text |
Plan line (“Monthly Membership ($29.00/renewal)”) | Member Plan Title Text |
Label above the plan dropdown or radio buttons, shown when there’s more than one plan to choose from | Selling Plan Select Title |
“Membership detail” with an (i) icon | Tooltip Title |
Text inside the pop-up | Tooltip Description |
Savings badge next to the product price, when the selected plan has a discount | Selected Discount Format Text |
The extra fields under the plan box, such as “Name for your welcome card:”, come from the plan’s additional questions, not from Widget Settings. They use the widget’s colors. See Personalise Membership Experience with Form Fields.
Widget Customization tab
This tab has six cards, plus a Languages card in some stores. Widget Labels and Widget Tooltip & Save Badge Labels set the wording. Widget Button Colors and Widget Spacing change the look. Widget Configuration switches parts of the widget on or off. Thank You Page Membership Labels sets the wording of a box shown after checkout.
Languages
The Languages card shows when Enable Label Translation is on and your store has more than one language in Shopify. New installations have it on already. If your store doesn’t, open More → General Settings → Shop Settings, tick Enable Label Translation under Storefront Settings and click Enable in the pop-up. It also adds the Languages card to the Member Price tab and the member portal labels, and you can’t turn it off again.
Choose a language to see and edit the widget wording for it. Save or discard your changes before you switch to another language or tab. If you switch languages first, the changes you haven’t saved are lost.
Widget Labels
These five fields change the main wording of the widget. To add a variable, click Add Variable above the field and pick it from the list.
Field | What it changes |
Member Options Text | The heading above the widget. Default: Membership Options |
Membership Options Text | The text inside the widget, next to the icon. Variables: Discount Value, Selling Plan Name. Default: Join Now |
Selling Plan Select Title | The label above the plan dropdown or radio buttons. Default: DELIVERY FREQUENCY |
Member Plan Title Text | How each plan name and its price show. Variables: Selling Plan Name, Selling Plan Price, Second Selling Plan Price, Discount Text. Default: |
Selected Membership Plan Price Text | The price shown for the selected plan. Variables: Price, Compare Price. Default: |
The default Selling Plan Select Title, DELIVERY FREQUENCY, comes from subscriptions. For a membership, a label such as Choose your plan reads better.
Important: Keep the curly braces of a variable exactly as Add Variable inserts them. A broken variable can break the widget on your product pages. If that happens, put the variable back or restore the default text.
Widget Tooltip & Save Badge Labels
This card controls the savings badge and the tooltip. The tooltip is the small “Membership detail” link under the widget that opens a pop-up on hover.
Field | What it changes |
Selected Discount Format Text | The savings badge next to the product price. Variables: Discount Percentage, Price/Delivery. Default: |
Tooltip Title | The link text next to the (i) icon. If it’s empty, the hover tooltip doesn’t show. Default: Membership detail. To hide the tooltip, untick Show Tooltip? in Widget Configuration. |
Tooltip Description | The text in the pop-up, or in the static tooltip. |
Tooltip Description On Multiple Discount | Text added below the Tooltip Description for a plan with two discounts, for example an introductory discount followed by a different one after a number of renewals. Variables: |
The title and description fields accept simple HTML, such as <strong> and <br>. The default description uses both. It talks about deliveries, so rewrite it to describe what your members get.
This is the tooltip when a shopper hovers over the title. The pop-up has a dark gray background, and new stores also show a “POWERED BY APPSTLE” link at its bottom.
Widget Button Colors
Despite its name, this card colors the widget box, not the Add to cart button. Enter each color as a hex code, such as #FDF3E1, or pick it from the swatch. An empty field uses the default color, even though its swatch looks black.
Field | What it colors |
Change Background color of the Widget | The background of the widget boxes, including the box with the extra form fields. It also colors the static tooltip. |
Change text color of the Widget | The text in the widget: the heading, plan, price and form field labels. It doesn’t change the “Membership detail” link. |
Add Border Color to Widget | The border of the widget boxes. |
Add Border Color to Dropdown | The border of the plan dropdown, which shows when there’s more than one plan to choose from. |
This is the widget after saving the colors above.
Note: The hover tooltip pop-up keeps its dark gray background whatever you choose here. To change it, add your own CSS under Widget CSS, or contact support.
Widget Spacing
Use the two sliders to add space above and below the widget, from 0 to 100 px. The label next to each slider shows the value, or Default when no space is added.
Widget Configuration
This card switches parts of the widget on or off and sets the widget image.
Setting | What it does |
Widget enabled? | Shows or hides the widget on all your membership products. Turning it off doesn’t affect existing members. When it’s off, a banner on this page says the widget is disabled. Default: on. |
Show Tooltip? | Shows the tooltip under the widget. Untick it to remove the tooltip completely. Default: on. |
Show Static Tooltip? | Shows the Tooltip Description as a block that is always visible, instead of a hover pop-up. Show Tooltip? must be on too. Default: off. |
Show Radio buttons for membership options instead of a dropdown | Lists every plan as a radio button instead of a dropdown. It suits products with two to five plans. Plans are listed from the lowest price up, and the first one is selected. With one plan there’s nothing to choose, so the widget looks the same. Default: off. |
Widget Image | The URL of the round icon in the widget. Upload your image in Shopify under Content → Files, copy its URL and paste it here. Default: empty, which shows the Appstle icon. |
This is the static tooltip. It has a beige background unless you set a widget background color.
Thank You Page Membership Labels
These fields set the wording of the Membership box on the Thank you and Order status pages. The box shows on orders that include a membership product, and its button takes members to where they manage their membership. To show the box, add the Appstle Memberships Checkout block to both pages in Shopify’s checkout editor (Settings → Checkout → Customize).
Field | What it changes |
Manage Membership box title | The heading of the box. Default: Membership. |
Manage Membership box description | The text in the box. |
Manage Membership box Button text | The button label. Default: Manage your membership. |
Manage Membership Button Format | On stores with classic customer accounts, the Manage Membership link added to the customer’s Account page. Change only the words Manage Membership and leave the rest of the HTML, including the |
Note: All four fields are required. If you leave one empty, the page shows a “Please provide…” message and doesn’t save.
Member Price tab
The Member Price tab shows members’ prices next to the regular price on your product and collection pages, and can invite other shoppers to join. It needs a percentage or fixed amount discount perk on the plan and a snippet in your theme. To set it up, see Displaying Member vs Non-Member Pricing.
Cart Widget tab
This tab has no settings. It explains that Shopify shows the plan name under each product in the cart by default. If your theme is older, or you also want the membership price in the cart, it offers a guide and a contact us link for help adding the plan price to your theme.
Things to know
Theme editor preview. In the theme editor, the Membership Widget block shows a placeholder, and the widget may show an “Attention” message about the Add To Cart form. Shoppers see neither, so check the widget on your live store.
Clearing a field. If you empty a text field and click Save, its old text comes back. To hide the tooltip, untick Show Tooltip?. To remove other text, such as the heading, or to go back to the Appstle icon, contact support.
More styling. For changes these settings don’t cover, such as the colors of the hover tooltip, add your own CSS under More → Customizations → Widget CSS, or contact support.
Member portal wording. The member portal has its own pages under More → Customizations. See Member Portal Settings.
Troubleshooting
What you see | What to check |
The widget doesn’t show on a product | Check that the Appstle℠ Memberships app embed is on, Widget enabled? is ticked, the product has a membership plan, and not all of its variants are sold out. If all of that is right, your theme’s Add to cart button may not be recognized, which often happens after a theme change: add the Membership Widget app block to the product page, or contact support. |
Some shoppers don’t see a plan | Check the plan’s tag settings. With Require Specific Tags on, the plan is hidden from visitors who aren’t logged in and from customers who don’t have one of the listed tags. With Exclude Specific Tags on, it’s hidden from customers who have one of the listed tags. |
My changes don’t show | Click Save, then refresh the product page. If your store has more than one language, check that you edited the language you are viewing. |
The widget shows odd text or breaks after I edited a label | A variable lost a curly brace. Put it back with Add Variable, or paste back the default from the tables above. |
I changed a color and the tooltip pop-up looks the same | The hover pop-up keeps its own dark gray background. The static tooltip follows the widget background color. |
The Membership detail link doesn’t show | Check that Show Tooltip? is ticked in Widget Configuration and that Tooltip Title isn’t empty. With Show Static Tooltip? on, shoppers see the description as a block instead of the link. |
I only see one plan and no dropdown or radio buttons | The selected variant has one membership plan, so there is nothing to choose. If you sell options such as Monthly and Yearly as variants, shoppers choose by picking the variant. The dropdown or radio buttons appear only when two or more plans are linked to the same product or variant. |
The Membership box doesn’t show after an order | Check that the order includes a membership product. Then check in Shopify’s checkout editor (Settings → Checkout → Customize) that the Appstle Memberships Checkout block is added to the Thank you and Order status pages. |
FAQs
Can I use different wording on different products?
No. Widget Settings apply to every membership product in your store.
How do I remove the “POWERED BY APPSTLE” link from the tooltip?
Contact support and ask them to hide it. The link appears only in the hover tooltip, so ticking Show Static Tooltip? also removes it.
Can I show the widget on my home page or in a Featured product section?
Not from these settings, because the widget loads on product pages. Contact support to add it to another section of your theme.