Tooltips are essential elements in user interfaces that provide additional information when users hover over or click on an item. In the context of the Appstle Subscription widget, tooltips offer valuable details about subscription plans, discounts, and more. This guide will walk you through the tooltip customization options available in Appstle Subscription and explain how to effectively use them.
Let us thoroughly examine the process of this tooltip customization.
Tooltip Title
Purpose: The title of the tooltip.
Merchant Portal :
Product Page :
Default Tooltip Description:
Purpose: This is the general description that will appear in the tooltip.
Merchant Portal:
This field contains HTML code that defines the content and formatting of the tooltip description.
Explanation of the Code:
<strong>and</strong>tags: These tags are used to make the text bold.<strong>Have complete control of your subscriptions</strong>: This will display the text "Have complete control of your subscriptions" in bold.
<br/>tags: These tags are used to insert line breaks.<br/><br/>: Two line breaks are used here to create a space between the bold text and the next line.
Plain text: The rest of the text is plain and will be displayed as it is.
Skip, reschedule, edit, or cancel deliveries anytime, based on your needs.: This will display the text following the line breaks.
Product Page:
Prepaid Plan Description on the Tooltip:
Purpose: This section details the prepaid plan information.
Merchant Portal:
This field contains HTML code that defines the content and formatting of the Prepaid plan description on tooltip.
Explanation of the Code:
<b>and</b>tags: These tags are used to make the text bold.<b>Prepaid Plan Details </b>: This will display the text "Prepaid Plan Details" in bold.
<br/>tag: This tag is used to insert a line break.<br/>: This creates a new line after "Prepaid Plan Details".
Dynamic placeholders: The values within double curly braces
{{ }}are placeholders that will be replaced with actual values when the tooltip is rendered.{{totalPrice}}: This will be replaced with the total price. The total price is the base price of the product that is set in Shopify.{{pricePerDelivery}}: This will be replaced with the price for every delivery.
Plain text: The rest of the text is plain and will be displayed as it is.
Total price: {{totalPrice}} ( Price for every delivery: {{pricePerDelivery}}): This will display the total price and the price for each delivery.
Product Page:
Discount Tier explanation
Purpose: This section explains the discount tiers available.
Merchant Portal:
This field contains HTML code that defines the content and formatting of the Discount Tier Explanation on tooltip.
Explanation of the Code:
<b>and</b>tags: These tags are used to make the text bold.<b>Discount Details</b>: This will display the text "Discount Details" in bold.
<br/>tag: This tag is used to insert a line break.<br/>: This creates a new line after "Discount Details".
Dynamic placeholders: The values within double curly braces
{{{}} will be replaced with actual values when the tooltip is rendered.{{discountOne}}: This will be replaced with the initial discount.{{discountTwo}}: This will be replaced with the subsequent discount.
Plain text: The rest of the text is plain and will be displayed as it is.
Initial discount is {{discountOne}} and then {{discountTwo}}: This will display the initial discount and the next discount.
Product Page:
Tooltip Description Customization :
Purpose: Allows for a comprehensive customization of the tooltip description by combining different sections.
Merchant Portal:
This field contains HTML code that defines the content and formatting of the Tooltip Description Customization.
Explanation of the Code:
Dynamic placeholders: The values within triple curly braces
{{{ }}}are placeholders that will be replaced with actual values when the tooltip is rendered.{{{defaultTooltipDescription}}}: This will be replaced with the default tooltip description.{{{prepaidDetails}}}: This will be replaced with the prepaid plan details.{{{discountDetails}}}: This will be replaced with the discount details.
</br>tag: This tag is used to insert a line break.</br>: This creates a new line between each of the descriptions.
Product Page:
Conclusion
Customizing tooltips in Appstle Subscription is a powerful way to enhance user experience by providing detailed information directly within the widget. By carefully editing the tooltip labels and descriptions, you can ensure that your customers receive clear, accurate, and helpful information about their subscription options.
Remember to always double-check the format when editing dynamic tags to prevent any issues with the subscription widget.
With these tips, you'll be able to effectively communicate the value of your subscription plans and discounts, improving customer satisfaction and engagement.
If you are facing any trouble configuring the subscriptions, or are looking for more features, you can reach out to us at [email protected], or just ping us through our chat widget. Our 24x7x365 available experts will be happy to assist you further.