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!
Outline
- What is the Shopify Customer Tool?
- How can I access the Skio Plan Picker?
- What customizations can I make?
Overview
Explains what the Shopify Customizer Tool is and how to use it with Skio.
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 Plan Picker utilizes Online Store 2.0's "app blocks" functionality to allow you to easily customize your Skio Plan Picker on your Product pages via the Shopify Customizer Tool, all without writing any code!
How can I access the Skio Plan Picker 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".
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, The Skio element will be on the page preview. On the left sidebar, there is a Skio-related option (ex. "Skio Plan Picker", "Skio App Block", or "Skio Subscriptions"). Click on that to show a list of options / settings for the Skio Plan Picker.
What customizations can I make to the Skio Plan Picker via the Shopify Customizer tool?
The Skio Plan Picker 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 Plan Picker, which pulls from the variant's "compare_at" price in Shopify |
| Section title | If used, adds a title above the Skio Plan Picker |
| Widget layout | Allows user to change the layout of the Skio Plan Picker 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 Plan Picker (Customizer options available)
- Customizing the Skio Plan Picker via the Shopify Customizer tool
- Moving the Skio Plan Picker 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.