Manually Adding the Widget Code

When you first add BTA to your store the necessary code is automatically added to your theme. You may, however, want to add the app to an inactive or newly published version of the theme. This can be due to a variety of reasons such as testing out another theme, upgrading to a newer version of your current theme, or simply changing themes. This article will walk you through the process of adding the necessary code to your store.

Note: we are always happy to add the code for you. You can contact us via a support ticket or by using the Support/Chat button on the screen.

 

Adding the Widget Code to a Published Theme

If you have just changed or updated to a newer version of your theme you will notice that the widgets no longer appear in your store. This is a result of the widget's code not being present in the theme. 

 

1. In the app, select Developer Guide.

2. Select the Widgets tab from the top of the page. 

3. Select the Install Widget Code button. 

 

4. The widget code will automatically be added to your theme. This typically occurs in less than a minute, but you may need to wait a few minutes for the job to complete. 

 

Adding the Widget Code to an Inactive Theme

Adding the app to an inactive theme is one of the more common reasons to manually add the widget code. Below you will find steps to add the widget code based on a couple of scenarios. 

 

Scenario A 

The app is installed in the active theme and you want to install it in an inactive theme.

 

1. In the Shopify admin, navigate to the Online Store section. 

2. You will need to use 2 tabs in your web browser now.

a. Select the Actions drop-down menu for the active theme and open the Edit Code link in a new browser.

b. If you were redirected, return back to the original browser. Select the Actions drop-down menu for the inactive theme where you are adding the app and select the Edit Code link. 

 

3. In the inactive theme, scroll down to the Snippets section of files. If the section is not already expanded select Snippets to display the file list.

4.  Select the Add a new snippet link. 

5. Name the file exactly as seen here: bookthatapp-widgets.liquid 

6. Select Create snippet. 

7. Return to the tab where the active theme is present and navigate to Snippets. You are looking for the file with the same name as the file you just created in the inactive theme. 

8. Select the bookthatapp-widgets.liquid file to display its contents. 

9. Copy the entirety of the file. 

10. Return to the browser tab with the inactive version of the theme and access the bookthatapp-widgets.liquid if it is not already open. 

11. Paste the code that you previously copied. 

12. Select Save. 

13. While still viewing the inactive theme, scroll down to the Assets section. 

14. Select the Add a new asset link. 

15. Select the Create a blank file tab.

16. Name the file exactly as seen here: bta-widgets-bootstrap.min and select the .js option.

17. Select Add asset.

 

18. Return to the tab where the active theme is present and navigate to Assets. You are looking for the file with the same name as the file you just created in the inactive theme. 

19. Select the bta-widgets-bootstrap.min.js file to display its contents. 

20. Copy the entirety of the file. 

21. Return to the browser tab with the inactive version of the theme and access the bta-widgets-bootstrap.min.js if it is not already open. 

22. Paste the code that you previously copied. 

23. Select Save. 

24. While still viewing the inactive theme, scroll to the top of the theme files until you reach the Layout section and select the theme.liquid file. 

25. Scroll through the initial part of the file until you find the following:  </head>

26. On the line immediately before the line where </head> is present you will add the following code. If an empty line is not present you can create a new line first.

{% render 'bookthatapp-widgets' %}

27. Select Save.

 

Scenario B

The app is not present in the live theme and you want to test it using an inactive theme.

 

1. In the Shopify admin, navigate to the Online Store section. 

2. Select the Actions drop-down menu for the active theme and click on the Duplicate link. Wait a few moments for the task to complete. 

 

3. In a new browser tab, access the BTA admin. 

4. In the app, select Developer Guide.

5. Select the Widgets tab from the top of the page. 

6. Select the Install Widget Code button. 

 

7. The widget code will automatically be added to your theme. This typically occurs in less than a minute, but you may need to wait a few minutes for the job to complete. 

8. Return to the tab where the Shopify admin Online Store page is present. 

9. Scroll down the page and locate the duplicate version of your theme that you created previously. 

10. Select the Actions drop-down menu and click on the Publish link. 

Now your original theme, where the app is not present, will be live while the edited theme with the app's code will be inactive.