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:
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.
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.
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.
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.
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.
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.
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!
0 Comments