This documentation is intended for merchants using Online Store 2.0 who had Skio installed by the Skio Launch team after February 1, 2024. If you aren't sure if this documentation applies to your theme, please reach out to help@skio.com !
What is the Shopify Customizer Tool?
The Shopify Customizer tool is available to all Shopify themes, and allows for non-developers to easily make changes to the layout, copy, and styling used in their Shopify theme, such as re-arranging sections on a page, updating the color of elements, and changing specific text / copy. You can find more about the Shopify theme customizer here: https://help.shopify.com/en/manual/online-store/themes/customizing-themes .
The Skio widget utilizes Online Store 2.0's "app blocks" functionality to allow merchants to easily customize the Skio widget on their Product pages via the Shopify Customizer Tool, all without writing any code!
How can I access the Skio widget using the Shopify Customizer Tool?
In order to access the Shopify Customizer Tool, navigate to your store's Shopify admin dashboard > click Online Store > click Themes > next to the theme you'd like to customize, click on the "Customize" button. This will open the Shopify Customizer Tool!
Once you have the Customizer open, click on the dropdown at the top of the page (it should say "Home page"). This will allow us to select the page type we're viewing. To navigate to the Product pages, click "Products", and then click "Default product". As a note, "Default product" is available on all themes, but the list may be populated with more options based on the product templates that are configured within the "templates" directory inside the theme codebase. If you have a specific Product page template setup for your subscription product, click on that template instead of "Default product".
Now that you're on the Product page, you should be able to see the Skio element on the page preview. If you look at the menu on the left-hand side of the page, you should also be able to see a block that has "Skio" in the name (ex. "Skio Plan Picker", "Skio App Block", or just "Skio Subscriptions"). Clicking on that element in the left-hand side menu will then show a list of options / settings on the right-hand side of the page!
What customizations can I make to the Skio widget via the Shopify Customizer tool?
The Skio widget offers a number of different layout, styling, and copy customizations that can be made directly within the Shopify Customizer Tool. Each setting displayed within the Customizer contains a description of what the setting is used for. Below is a list of a few of the most commonly used settings in the Customizer:
| Form ID | This should match the ID of the add to cart form. Set to the default for Dawn themes. Accepts liquid. |
| External Price Selector | This should match the ID or class of the price element. Set to the default for Dawn themes. Accepts liquid. For multiple items, separate each by a comma. |
| Show compare at price | Shows a slashed-through price on the Skio widget, which pulls from the variant's "compare_at" price in Shopify |
| Section title | If used, adds a title above the Skio widget |
| Widget layout | Allows user to change the layout of the Skio widget to either horizontal, vertical, or hidden |
| Default to one time purchase | When checked, Onetime purchase will be the selected option on page load (if available) |
| Display one time purchase first | When checked, Onetime purchase will be displayed before the Subscription options (if available) |
| Additional Subscription Content | Allows for adding custom HTML to the Skio element; renders underneath the displayed options |
Was this article helpful?
Articles in this section
- How to set up Prepaid Gifting
- Setting up the Skio Widget v2 (Customizer options available)
- Customizing the Skio widget via the Shopify Customizer tool
- Moving the Skio widget to a new theme
- Self-serve install + setup
- Going Live with Skio
- Guide for 3rd party for Static Box API
- Skio Universal Plan Picker V2: Lit.JS Component
- Skio Universal Plan Picker V1: Liquid, JS, CSS support
- Theme work scope
Add comment
Please sign in to leave a comment.