How to implement the app using snippets
This article explains how to implement the app using snippets. By using snippets, you can display options in places that are difficult to show with app blocks, or in any position you like on older themes.
If you’re using an Online Store 2.0 compatible theme, you can use app blocks. Only use snippet settings if you’re in an environment where app blocks are not available.
Extending themes with apps · Shopify Help Center
Snippet setup procedure
First, refer to the following page to open the theme code editing screen.
Snippet setup steps
- Copy the following snippet:
- For product pages:
<div id="dw-product-gift-option"></div>
- For cart pages:
<div id="dw-cart-gift-option"></div>
- For product pages:
- Open the template of the page where you want to insert the snippet (see the next section for how to find templates).
- Paste the snippet.
How to find templates
Using the Debut theme as an example, we’ll explain how to find the snippet insertion point to change the widget’s display position.
- From the sidebar, open Templates > cart.liquid.
- The template is loaded by
{% section cart-template.liquid %}
, so look for Section > cart-template.liquid. By default, the snippet is automatically inserted just above</form>
. - Finally, paste the snippet in your preferred position. If you can confirm that the widget is displayed in the preview, you’re done.
Important notes
- The structure varies depending on the theme, so adjust the snippet placement according to your theme.
- The widget can only be displayed in one place. Inserting multiple snippets will not work.
- Even if you uninstall the gift option app, the snippet code you set will remain. It won’t affect functionality, but if you don’t need it, please remove it manually.
Conclusion
Were you able to place the widget in your desired position?
In the future, we’ll be transitioning to app blocks, and customization using the theme editor without coding will be recommended. However, there are still many stores using older themes, and there may be cases where the theme editor can’t handle certain customizations.
As for gift options, we’re developing to support a wide range of themes, both old and new. We hope you’ll choose the widget installation method that doesn’t compromise customizability and design.
This process may have required some knowledge of theme structure. And depending on the theme, file names and structures may differ, so some of you might have had trouble finding the right place to insert the snippet. If that’s the case, please don’t hesitate to contact us. We’re ready to provide full support, so please reach out to us through the app page.
That’s all. Thank you for reading to the end.