Agency / Developer Guide

🧑‍💻 Installing the Subscription Plan Selector locally

Often developers want to install the plan selector (aka Subscription Widget) in order to speed up the load time or customize the UI or functionality. It can also be necesary when the theme you're working on is a bit different than a standard Shopify theme or if the product page works a bit differently. You can find a guide on this simple installation here.

Follow this guide to switch from a subscription frequency dropdown to subscription frequency buttons.

🎨 Custom styles

It's easy to update the way any aspect of your subscriptions looks; from the subscription plan selector to the customer portal to the build-a-box UI. Any styles in the theme can override the default CSS for those user experiences but its important to use the proper selectors. This short guide explains what selectors to avoid and how to get started if you're not sure.

📧 Customizing notifications

You can update the basic styles in Awtomic notifications. Here's a guide on those customizations. If you'd like total control over the notifications then you might want to use our Klaviyo integration instead of Awtomic's emails. Here's our guide on the Klaviyo integration.

You should also make sure to properly authenticate your custom domain when sending from one. Follow these guides to set up custom email FROM domains when sending emails from Awtomic.

📦 Build-a-box customizations

There are a lot of different ways to customize the build-a-box experience. Here's a collection of guides:

• Single page UI: If you'd like to link directly to the build-a-box UI and avoid the need for a product page in the flow you can do so by showing the box size and frequency buttons at the top of the page.
• Hide hidden properties in the cart: Awtomic build-a-box uses hidden properties on line items. Some themes don't hide those properties in the cart UI by default but you can hide them easily yourself.
• Advanced Build-a-box Progress Bar: Add custom CSS to show the advanced progress bar on your Awtomic build-a-box pages
• If you're interested in building your own custom build-a-box UI instead of using the Awtomic box UI you can do that. Here are guides for adding the classic and dynamic build-a-box items to the cart:
  • Adding a classic box to the cart
  • Adding a dynamic box to the cart
• Preselecting box items: its often nice to open the build-a-box UI with a prefilled box and then letting customers edit the selections.
• Dynamic box cart rollup: When a dynamic box is added to the cart, each item in the box is added to the cart. In order to prevent customers from editing the quantities in the cart and to enforce box sizes its nice to add some customization to the cart to protect those box selections.
• Cart redirect override: If you want to go directly to checkout or open a special cart UI after the box is added to cart you can do that with this custom setting.
• Product subtitles: Some merchants like to add subtitles to product cards in the box UI. You can do that with these custom metafields.