Devera Widget Integration in Shopify

  • Go to Shopify Admin and click on Online Shop -> Themes.

First step

  • Click on ... and then Edit code.

Second step

  • On the sidebar you click on templates/product.json

Third step

  • Add a new part in the JSON named devera as you can see in the image:
    "devera": {
  "type": "custom-product-block",
  "settings": {}
},

Fourth step

  • Add devera in the order list and save the changes to the file:

Five step

  • Go to sections and click on Add new section.

Sixth step

  • Copy and paste the code of the new block here and save the changes to the file.

Seventh step

    <devera-widget 
      product-id="{{ product.id }}" 
      client-id="<your-client-id>"
      token="<your-token>"
      language="{{ request.locale.iso_code }}">
    </devera-widget>
    <script src="https://dv-widget.devera-widget-front.pages.dev/widget.umd.js" async></script>
    {% schema %}
    {
      "name": "Custom Product Block",
      "settings": [],
      "presets": [
        {
          "name": "Devera"
        }
      ]
    }
    {% endschema %}

Congrats, you have the devera widget in your Shopify :tada: