> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://supr-bundles-and-subscriptions.crisp.help/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Designing your own widget The custom widget designer lets you write the HTML and CSS of your subscription widget, your bundle options and the box around them yourself, so the widget looks exactly like the rest of your product page. It is in beta: ask us in the chat to turn it on for your store. ## Opening the designer 1. Go to **Supr Bundles & Subscriptions > Design**. 2. Click the **Custom (Liquid)** design. It opens the designer instead of switching your store's design. Nothing changes on your store until you click **Publish**. Every change you save or publish is kept under **Versions**, so you can always go back. ## The three tabs * **Subscription widget**: the subscription options and the one-time purchase row. * **Bundle options**: the bundle bar and each of its options, including build-a-box, fixed bundles, add-ons and free gifts. * **Layout**: everything the app block shows, in one box: the offer title, the subscription widget, the bundle options, and an add to cart button and quantity of your own. Each tab has a switch that says whether publishing draws that part with your design. You can design the subscription widget alone, the bundle options alone, or everything. A tab you leave switched off keeps the design chosen on the Design page. Each tab has a **Start from a template** list. A template replaces only that tab's markup and stylesheet, so you can start your bundle options from one template and your subscription widget from another. ## How a template works A template is ordinary HTML with Liquid strings in double braces, such as `{{ selling_plan.name }}` or `{{ tier.price | money }}`. Type `{{` in the editor to see every string the part you are editing accepts, with what it prints; the **Reference** section lists them too. Anything else in double braces, and any Liquid tag other than a comment, is refused with the line it is on. There are no conditions. To hide something that has no value, use CSS: an empty price or badge prints nothing, so `:empty` hides its element. The chosen subscription option has a checked radio (`.sss-liquid-row:has(> input:checked)`) and the chosen bundle option has the class `.sss-bundle-block__tier--selected`. The app keeps the parts your store needs to work: the radios, the variant pickers, the quantity steppers, and the data the storefront reads to keep prices current and add the right items to the cart. Your markup goes around and inside them. ## Subscription widget * **Wrapper**: everything around the options, such as a heading or a trust row. Place the options with `{{ sss.options }}`. You can also place `{{ sss.one_time }}`, `{{ sss.add_to_cart }}` and `{{ sss.quantity }}`. * **Offer group**: drawn once per offer. Show its options as rows with `{{ sss.group.options }}`, or make the whole offer one card with a select (`{{ sss.plan_picker }}`) or buttons (`{{ sss.plan_picker_pills }}`). * **Subscription option** and **One-time purchase**: one row each. * **Benefit line**, **Free gift** and **Loyalty reward**: what one benefit, gift or reward looks like, placed in an option with `{{ sss.benefits }}`, `{{ sss.gifts }}` and `{{ sss.rewards }}`. Prices include savings, the price per day, per serving and per unit, the price after the first orders, and the billing line. To show a price per serving, add the **Servings** field under **Product fields** and fill it in on each variant. ## Bundle options * **Bundle bar**: everything around the options. Place them with `{{ sss.tiers }}`. * **Bundle option**: one option, for example a pack size. It can show the option's title, badge, price, full price, price per unit and savings. Place the builder, a fixed bundle's products, add-ons, gifts and variant pickers where you want them with `{{ sss.tier.builder }}`, `{{ sss.tier.products }}`, `{{ sss.tier.addons }}`, `{{ sss.tier.gifts }}` and `{{ sss.tier.variant_pickers }}`. Anything you leave out follows your markup. * **Bundle product**: what one product looks like in a fixed bundle, a build-a-box option and the add-ons: its image, title, price, vendor and sticker. To show a sticker such as "Best seller" on a product, add the **Bundle sticker** field under **Product fields**, then fill it in on the product. Translate it with Shopify's Translate & Adapt. Stickers show for the first 20 bundle products on a page. Turn on **Show a builder one group at a time** to show a build-a-box option's groups as tabs, one group open at a time. Each tab shows the group's name and subtitle, which you set on the group in **Offers**. ## Labels and translations Your own words go under **Labels**, and you print one with `{{ sss.labels.name }}`. A label used inside a subscription option can include that option's values, such as `Billed {price} {billing_frequency}`, so the whole sentence stays one label in every language. Translate your labels under **Settings > Translations > Widgets**. A template's labels start in your store's language. When you publish, every label you have not reworded is also translated into your store's other languages, unless you have already translated it yourself. Labels you write yourself are yours to translate. ## Stylesheets Each tab has its own stylesheet. Every rule is limited to the part it styles when you save, so your CSS cannot change the rest of your theme. The stylesheet cannot load scripts or reach outside the widget. ## Previewing The preview beside the editor draws your design as the storefront will. Choose one of the example products, or click **Preview a product from your store** to see it on one of yours. Your theme's own fonts and styles show only once you publish. ## What the designer does not do * It runs no JavaScript. * A template cannot use the app's own class names or data attributes (such as `purchase-option-*` or `data-tier-total`); the editor tells you which one when it refuses. * We support the designer itself. Building and maintaining your design's markup and CSS is up to you or your developer.