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

52 3 8

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.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: | Skype : oscprofessionals-87
52 3 8

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?

New Member
2 0 0

Have you found any solutions?

Shopify Partner
3131 195 576

@shakh9006 , @seandz 

Use the scripttag api to add javascript to the frontend when customers load the website 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ or donate to
Confused? Busy? Buy a custom solution