I’m working on developing a Shopify application using Ruby on Rails framework and need guidance on creating an embeddable widget system. My goal is to build something that store owners can easily integrate into their themes, similar to how social sharing tools work.
The main challenge I’m facing is understanding how to properly connect the {% include 'snippet-name' %} Liquid template function to my hosted application. I want store owners to be able to add a simple include statement in their theme files that will render content from my app.
What’s the correct approach to set up this kind of integration? Do I need to create specific snippet files that communicate with my Rails backend, or is there a different method for handling this type of embedded functionality in Shopify themes?
liquid includes are meant for local snippets only, not external stuff. best way is to build a js widget. merchants can stick it in their theme and it’ll call your rails api to load content when needed.
Shopify’s architecture limits the {% include %} tag to local snippets within the theme; it cannot access external applications directly. To achieve the desired functionality for your Rails Shopify app, consider using the Script Tag API or App Blocks. Script Tags allow you to inject JavaScript that can make AJAX requests to your Rails backend, dynamically rendering content. Store owners will need to place a div with a specific ID for your widget, while the JavaScript fetches and populates that space. Alternatively, App Blocks, available for Shopify 2.0 themes, enable merchants to add your app’s features via the theme editor without modifying any code. In both cases, ensure your Rails backend is set up for CORS, as requests originate from the merchant’s domain. For immediate compatibility, I recommend starting with Script Tags, then exploring App Blocks for a more seamless integration.
I’ve dealt with this exact problem before. JavaScript is definitely the way to go here. Liquid templates run server-side, so they can’t call external resources directly. What worked for me was giving store owners a script tag that points to your hosted JavaScript file. The script pulls data from your Rails backend through AJAX calls and renders everything dynamically in their store. Just make sure you’ve got your API keys and requests locked down properly for security. Also, test it with different theme layouts since merchants all use different setups - you want it to work smoothly everywhere.
This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.