Customize the Product Detail Page Subscription Widget

While many of our customers enjoy the out-of-the-box design of our PDP widget, some may want to update the design to fit in better with their site style and branding. Below, we posted the method to customize subscription widget on a PDP page and some code snippets for several widget templates.

Once you install and complete initial setup of the Upscribe app on your store, you can find the  upscribe-subscription-options.liquid file under snippets directory. This file contains the style and layout code of the widget and you can customize the widget on this file. 

You can modify default style or insert any additional styles directly before, or you can add to your theme style file such as theme.css or style.css.

Original widget layout starts with the following code:

<code><section key="upscribe-subscription-product-{{upscribe_component_uid}}" v-if="product && componentMounted" id="upscribe-subscription-product-{{upscribe_component_uid}}" class="cu-purchaseTypes">
	

This is how the section ends:

<code></section>
	

Please reach out to support@upscribe.io if you encounter any issues customizing this code.