How do I migrate from OS1 automatic placement to OS2 theme sections placement?

This article covers how to upgrade from OS1 automatic placement to OS2 theme sections placement if you are a current customer using ShoppingGives. 

For our current customers, we want to ensure you have everything in your hands to ensure the transition is as seamless as possible to be able to complete real-time updates and customizations on all your ShoppingGives widgets.

Once you migrate to OS2 theme sections placement, you will be able to add our ShoppingGives donation widgets with simple drag-and-drop functionality, preview the widgets on your page, and customize areas of our widget all on your own!

How to Get Started

First, let's upgrade to a Shopify Online Store 2.0 Theme!

If you already are using a Shopify 2.0 theme, you can skip to this article instead!

Don't have a theme? Here's how to set one up!

1. Login to your store via the Shopify platform
   
   
2. Navigate to Sales Channels in the bottom left panel and choose Online Store - this will bring you to the Themes page, where you'll be able to add a new selection to your theme library:
   
   
   
   
3. Scroll down to the bottom of this page to access the Shopify Theme Store using the Visit Theme Store button shown below - this is where you can find the theme you want to use:
   
   
   
   
4. Once you have located the theme you wish to utilize, click Add to theme library. This will make a copy of your original theme, download the updated theme version, and also apply your theme editor customizations.
   
   
5. Once the updated theme has been added to your theme library, click Customize to load the updated theme into your theme editor:
   
   
   
   

Step by Step

 Next, let's add the script to your store, so you'll be able to preview your widgets before going live with them on your site.  

1. Login to your store via the Shopify platform and navigate to the ShoppingGives app
   
   
2. Go to Campaigns and choose the campaign widget you'd like to use - Store Donation on Purchase, Customer Round-Up, or Customer Add-On
   
   
   
   
3. Navigate to Widget Settings and select Theme Sections - be sure to hit Save!
   
   
   
4. Scroll down on this page until you see the Customize Widget button shown below - this will bring you into the theme editor:
   
   
   
   
5. At the top, you will find a banner that asks you to toggle on the App Embed for ShoppingGives:
   
   
   
   
6. Click the link within the banner and ensure the ShoppingGives app embed is toggled "on", then save your changes:
   
   

Now you are ready to preview your widgets!

1. Choose a page at the top of the theme editor in order to see a specific site page (Cart, Product, etc.)
   
   
   
   
2. Click Add block to add a widget to the chosen page - search under Apps to find the ShoppingGives widget you wish to place/customize:
   
   
   
   
3. Select the widget of your choice to further expand your customizable options! You'll now see a Preview version of your widget you can edit and save. 

Preview widget example for Theme Sections placement