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

seandz
Excursionist
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');

 

0 Likes

Hello 

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: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
seandz
Excursionist
52 3 8

Thank you. I see the Asset API can modify themes through a Shopify App. https://help.shopify.com/en/api/reference/online-store/asset

 

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?

0 Likes
shakh9006
New Member
2 0 0

Have you found any solutions?

0 Likes
PaulNewton
Shopify Partner
3131 195 576

@shakh9006 , @seandz 

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

https://shopify.dev/api/admin-rest/2021-07/resources/scripttag 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes