Creating a modal is easier than ever with the Spark Pay online store V3 themes.
NOTE: V3 themes are any of the default responsive themes on the Spark Pay online store platform. If your site changes the display based on the browser width, and you're using a stock theme from Spark Pay, then you are most likely on a V3 theme.
To have an item turn into a clickable modal, you just need to add the following three things to the HTML markup:
- class="quick-view"
- The "quick-view" class needs to be added into the element that you want the customer to click on.
- data-href="/"
- The item needs a data-href attribute, pointed to the page you want to show in a modal. Note: This will only work for pages on the same domain. Its not possible to link an external site into a modal in this manner.
- data-title="Modal Title"
- This is optional, but sets the title on the modal itself.
Here are a couple examples. Syntax from this KB will be in bold:
- <p class="quick-view" data-href="/schematic-drawing" data-title="Data Schematic">Click here to see a schematic of this item!</p>
- If you had a schematic drawing uploaded on the storefront, you could load this in a modal window with the above syntax. The data-href attribute would need to be updated to the correct path.
- <button class="quick-view" data-href="/store/shopcart.aspx" data-title="Shopping Cart">My Cart</button>
- This would be a way you can load the entire shopping cart page in a modal.
As you can see, it is relatively easy to use the modal functionality for the Spark Pay online stores platform.