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

seandz
Excursionist
52 3 9

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

 

Replies 4 (4)
oscprofessional
Shopify Partner
11557 1809 2315

Hello 

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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
seandz
Excursionist
52 3 9

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?

shakh9006
New Member
2 0 0
PaulNewton
Shopify Partner
4211 303 901

@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 

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com