CSS in Embedded App SDK

Shopify Partner
5 0 0

Hey,

I am creating an App using Embedded App SDK. My question is are there any kind of UI guidelines for creating Embedded Apps. It provides different GUI features but can the UI be different from Shopify CSS. Can I use Bootstrap as CSS. I am creating App in PHP.

Thanks in Advance.

0 Likes
Shopify Staff
Shopify Staff
582 0 45

You are still responsible for serving up your own assets, they just need to be served over SSL. I don't think we have a Shopify Widget kit yet, so embedded apps will still look different, and that's fine.

Your app is run from an iFrame, so it's all sandboxed and stuff. No need to worry about Shopifys styles clobbering your UI.

1 Like
Shopify Partner
5 0 0

Well thanks for this. But I think Tictail is doing some great thing with these Embedded Apps. They have listed UI guidelines. They also have a predefined CSS and JS UI Kit. I think Shopify should look at it. 

0 Likes
Highlighted
Tourist
36 0 2

+1 on the widget kit.

For example, CSS for the entire admin interface would be good, rather than making app developers clone it individually. Sample markup for all the admin components would be good, too.

At the very least, a widget to allow apps to use the "Date Range" widget. However, there are a bunch of UI widgets in the Shopify admin that would be nice to be able to work with.

0 Likes
Shopify Expert
3937 16 325

Personally I am glad I am given an iframe and NOT beholden to much of anything from Shopify in that iframe. I have the freedom to do whatever I want in my App. For now it's simple enough to be a Bootstrap clone dweeb but as Sass and JS improve rapidly, it's nice knowing you can adopt anything anytime.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
New Member
2 0 0

+1 for the Widget Kit. I like the fact we can use our own UI but I think it would be better for the user to have the same UI on each Embedd App he is using.

0 Likes
Shopify Partner
174 0 26

Until some widgets are available, how about publishing a shopify.css with admin styles? So far I've copied https://cdn.shopify.com/s/assets/admin/style-1aed50567ce7c3124c7916f41eed12cf.css, but this is 4mb (!!)

 

 

Streamline your shop and sell more http://www.suppleApps.com
0 Likes