By default, the Customily's Shopify app is loaded after the store page has finished loading. If you want the app to load at the same time the store page is loaded to reduce the waiting time for your customers you need to insert the Customily's scripts in your Shopify theme. 
 
There are 2 ways of adding the scripts to your theme:

After adding the script to your theme, you need to enable the load scripts from store's theme setting in Customily. This step is very important as it will disable the loading of the script from dynamically from the app, as it knows they will be loaded from the theme instead. If this step is not done, the script will be loading twice and you will see your Customily Options duplicated.

 

Important

If you insert the Customily scripts into your Shopify theme you will need to re-add them if you switch to a different theme.

 

Adding scripts via the app block

Important

App blocks are only available for themes 2.0. If your theme is not on Shopify 2.0 you won't be able to add app blocks. You should add the tags to your theme files instead.

 

  1. Open your Online Store sales channel, go to Themes and find the theme you want to modify. Click Customize.
    customize theme.png
  2. Open your Default Product Page
    default product customize.png
  3. On the left menu locate the Template section, and click Add Section. Go to Apps and choose Add Scripts to theme by Customily. Click to add the App Block.
    Add scripts to theme product page.png
  4. The App block will be added to the product page, and you will see the Customily personalization options displayed on top of the Add to cart button.
    Customily App Block.png

    Important

    If you see the options double, it means that the script is also being loaded by the app. Continue with the next steps, we'll  disable the script from loading via the app on your settings on step 8.

  5. Now switch to your Cart Page and repeat the process.
    cart page.png
  6. On the left menu locate the Template section, and click Add Section. Go to Apps and choose Add Scripts to theme by Customily. Click to add the App Block.Add scripts to theme.png
  7. The App block will be added to the cart page, although no changes are visible on the cart, this is what will ensure that when a customized item is added to the cart, the personalized preview will be visible in the product thumbnail.
  8. Now it's time to disable the script from loading on via the app. Open Customily app navigate to Store > Settings > Developer Settings tab:developer settings.png
  9. Scroll down to the Store Theme section, and look for the option that says Load scripts from store's theme optionStore theme section.png
  10. Enable the setting.load script from theme.png
  11. Scroll to the bottom and hit Save to save the settings. The app will be now loaded from the script tags in your theme

Tip

After the setting is activated, wait a couple seconds, then refresh your product page to check if it's working correctly. If you see options are duplicated, wait a couple of minutes and try again, as these changes might take some time to populate. If you still see them double, reach out to our support team.

Adding the script tags on your theme files

  1. Open your Online Store sales channel, go to Themes and find the theme you want to modify. Click the ... next to Customize, and select Edit Code.Edit code.png
  2. Find the file called theme.liquid and open it.
    theme.liquid.png
  3. Within this file, locate the HTML tag </body>. It's always at the end of the file.image (4).png
  4. Insert the following script tags just above the line where </body> is defined:
  5. Check that the scripts were added in the correct position and save the file.image (5).png
  6. Open Customily app navigate to Store > Settings > Developer Settings tab:developer settings.png
  7. Scroll down to the Store Theme section, and look for the option that says Load scripts from store's theme optionStore theme section.png
  8. Enable the setting.load script from theme.png
  9. Scroll to the bottom and hit Save to save the settings. The app will be now loaded from the script tags in your theme

 

Tip

After the setting is activated, wait a couple seconds, then refresh your product page to check if it's working correctly. If you see options are duplicated, wait a couple of minutes and try again, as these changes might take some time to populate. If you still see them double, reach out to our support team.

Share

Was this article helpful?

2 out of 7 found this helpful
Have more questions? Submit a request