🔍 Overview
The below steps will walk you through how to integrate Skio to your theme. This will include: syncing Skio's code snippets, syncing your products, rendering the subscription widget, rendering the cart labels, and setting up a customer login redirect.
🔄 Sync Code Snippets
You will first want to sync Skio's code snippets to your live theme. You can accomplish this by visiting dashboard.skio.com/theme and clicking on step one's Sync button. Once clicked, the snippet files + skio-head render will be automatically added to your LIVE theme (it can take 1 - 2 minutes for the files/code to appear).
For your reference, here are the snippet files you should expect to find after the sync is complete:
skio-account-redirect.liquid
skio-card-label.liquid
skio-head.liquid
skio-plan-picker.liquid
skio-plan-picker-rewrites.liquid
skio-head.liquid
Additionally, the following code will be added to layout/theme.liquid after the <head> tag:
{%if content_for_header contains'skiocheck.com' %}{% render'skio-head' %}{% endif%}✨ Duplicate Your Live Theme
At this point, you will want to duplicate your live theme and rename it. This duplicated theme will be where you add subscription option(s) to product pages, subscription label(s) to cart, and set a Skio subscription management login redirect. Ideally, as a best practice, you should rename your theme to something that references Skio and the date that you duplicated the theme - this way you or other members of your team can easily find and reference the original theme code at a later time.
🧰 Shopify CLI (Optional)
As an optional step, you should install Shopify CLI (Theme Kit is fine for non-Shopify 2.0 stores) to modify your theme code and pull the theme you duplicated in the previous step. It would be ideal to use Shopify CLI, however, you can always modify your theme code via the Shopify admin, but if you are a more experienced developer it would be better to try using your own IDE for a faster setup.
Useful Reference Commands:
shopify login --store shopify-store-name.myshopify.com
After running the Shopify login command, your web browser will open where you will be prompted to login in order to securely access your theme code. If you encounter any issues with the above command, try logging out of your account on the web browser before running it.
If you need to verify your store's Shopify url you can simply view the page's source code by going to: view-source:https://www.[my website's url].com (put this in your search bar)
Once you've done that, you can use cmd + f and search for Shopify.shop which will be equal to your Shopify's store name "my-shopify-store.myshopify.com";
When you run Shopify theme pull you will be prompted to select a theme, select the theme you renamed by simply entering the associated number value (example input: 2).
❗When you run Shopify theme push be careful not to push to your LIVE theme if you are still setting things up. If you do accidentally push to your LIVE theme, you can revert any changes by going to your Shopify admin and reverting the code to a previous version (example image below).
Comments
0 comments
Please sign in to leave a comment.