Basic question: How to add some custom UI elements below the cart button on front end product pages?

51 3 5

Hi, I'm getting started looking through the dev documentation, particularly the Storefront API and how my planned app might add a few HTML/CSS elements to the front end UI. All I'm seeing is back end / data related functionality though.


Are templates the only way to add front end UI elements? Or can Shopify Apps also add to the front end? If so, can someone link me to a page that shows how to add some UI elements just below the "Add to Cart" button on a product page?


In my case, I don't want my app to mandate the use of a special theme or template. Not a lot of store owners would be willing to make that change.


For added clarity, here's an example of how I would add some UI components just below the Add to Cart button of a product page in a WooCommerce store. They have a "hook" just for that:


function renderProductPageUi() {
require_once ('templates/someHtmlAndCssTemplate.php');
add_action('woocommerce_after_add_to_cart_button', 'renderProductPageUi');




To add custom UI element we need to customize product.template.liquid file.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
51 3 5

Thank you. I see the Asset API can modify themes through a Shopify App.


Problem: It seems to require a theme ID to work. But I want my app to work with all themes, with unknown theme IDs.


Is there a solution to allow using the Asset API without specifying a theme ID?