Our app automatically supports all popular themes and auto-injects icons. However, if you want to place the quote icon or button in a specific section or page, you can do so by adding custom code directly to the respective file. This integration will work seamlessly, and we’re here to assist if needed.
1. Quick Icon/Button Integration #
Add a quote icon or button to your collection or home pages by inserting the following code into your card-product.liquid file:
- Quote Icon Example
htmlCopyEdit<div class="wfq-quotes-icon" product-id="{{ product.id }}" product-handle="{{ product.handle }}"></div>
- Quote Button Example
htmlCopyEdit<div class="wfq-quotes-button" product-id="{{ product.id }}" product-handle="{{ product.handle }}"></div>
Note: Replace
{{ product.id }}with your theme’s product ID variable as required.
2. Add Quote Icon Anywhere #
You can place the quote icon in any location (like the header) to trigger a Modal, Page, or Drawer. Just add the custom selector class below to your desired tag:
htmlCopyEdit<span class="wfq-custom-header-icon-box"></span>
3. Add Quote Button to Cart Page #
To include a quote button on the cart page or drawer, insert the following code in either main-cart-items.liquid or cart-drawer.liquid:
htmlCopyEdit<div id="wfq-custombasket-icon"></div>
Customize the placement of quote icons/buttons as per your design — and if you need help, you can reach us at support@webframez.com
