How to Integrate AstraFit with Shopify 2.0?

This document describes the steps necessary to integrate the AstraFit widget on a Shopify 2.0 store using the example of the Baseline 2.0 theme.

 

Step 1. Set up the loader

This step lays out a foundation for the widget’s work by connecting the page’s frontend with AstraFit API. The script we are going to install is a vanilla JS script and it doesn’t require any dependencies to work.

In order to do so, login to your AstraFit private cabinet at https://cabinet.astrafit.com/ and go to settings. You will find the link in the sidebar.

There you will find a link to the installation guide on the right:

______________2022-03-29___11.40.36.png

In the installation guide there is the JS code you need. There is a button to copy the code, but you can also use ctrl+c and ctrl+v.

______________2022-03-29___11.41.27.png

Now you need to locate the header template in your Shopify store.

 

In order to do so, go to ‘sales channel’ - ‘online store’ - ‘themes’. There you will find an ‘actions’ button that opens a dropdown. You need the ‘edit code’ link.

______________2022-03-29___11.42.10.png

Now that you’ve opened the code editor, search for the file that contain the <head>...</head> section. In Baseline 2.0 theme it is Layout folder => theme.liquid file.

 

Copy the script from your AstrFit cabinet into the <head> part of the page, preferrebly somewhere near the closing </head> tag and click save.

 

______________2022-03-29___11.42.22.png

 

Done! Now you are ready to move on to step 2.

 

Step 2. Prepare your AstraFit script

The widget is rendered on the page with the use of a dedicated <div> with a number of data attributes. The div template can be found in your AstraFit cabinet right under the framework script that we discussed in step 1.

______________2022-03-29___11.43.39.png

Please keep in mind that this script is filled with placeholder information and needs to be adjusted to Shopify to function!

 

Below the script you will find the description of the data attributes.

______________2022-03-29___11.44.28.png

In order to receive information from Shopify store you need to use the Shopify Liquid API which is essentially a template engine, similar to Twig or Blade.

 

Here are some examples of how you can fetch data for your AstraFit widget.

 

<div class="astrafit-wdgt"

     data-id="{{ product.id }}" <!-- Shopify product ID - a unique number string –>

data-brand="{{ product.vendor }}" <!-- Product vendor/manufacturer –>

data-kind="{{ product.type }}" <!-- Product category –>

data-sizes-list="{% for product_option in product.options_with_values %}{% if product_option.name == 'Size' %}{% for value in product_option.values %}{{ value }},{% endfor %}{% endif %}{% endfor %}" <!--Liquid code that fetches the size options if the size option is set for the product –>

     data-canonical="{{ request.host }}{{ product.url }}" <!-- Product URL –>

     data-img="https:{{ product.featured_image | img_url  }}" <!-- Product featured image via CDN –>

></div>

 

Please keep in mind that some Liquid functions are universal (like product.id), while some depend heavily on the settings of your store and need to be adjusted accordingly.

 

Step 3. Install the widget div

Now that you’ve prepared the widget code, you need to put it where you want to see it on the screen. In order to do so, locate the product template. In Baseline 2.0 theme it’s located in the Templates folder in the main-product.liquid file.

Simply copy the code from step 2 to where you want to see the widget. It will render automatically - the div needs to be empty and the class needs to be set as ‘astrafit-wdgt’ because this is how the framework locates the div to render the widget.

______________2022-03-29___11.45.44.png

Don’t forget to click the ‘Save’ button to apply the changes.

 

Please keep in mind that if the product hasn’t been digitized, the widget will be concealed. After you’ve opened the product for the first time, you’ll need to digitize it in your AstroFit cabinet, and then it will render the next time you open the page.

 

If you want to test out the widget, please use the sample code from Demo items in the AstraFit cabinet.

 

What to do if you have questions:

Please contact us at support@astrafit.com. We are always ready to help!

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.