In addition to Boostrap there are a couple of CSS frameworks specifically for Shopify embedded apps - and

My preference is for uptown.css

Grab a copy of and put it into app/styles.

Edit app/views/layouts/embedded_app.html.erb and replace

<div class="app-wrapper">
  <div class="app-content">
    <main role="main">
      <%= yield %>


<main role="main">
  <%= yield %>

Edit app/views/home/index.html.erb to show a nice home page

<% content_for :javascript do %>
  <script type="text/javascript">
        title: "Home",
        icon: "<%= asset_path('favicon.ico') %>"
<% end %>

<div class="heading">
    <h1>Shopify Embedded App</h1>
    <h2>This is my really cool Shopify embedded app demo</h2>

    <div class="column">
        <div class="card columns twelve">
          <h4>Put some text here</h4>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p>


  <% @products.each do |product| %>
    <li><%= link_to product.title, "https://#{@shop_session.url}/admin/products/#{}", target: "_top" %></li>
  <% end %>

I like to add a little more styling to app/assets/stylesheets/application.css

.heading article {
  border-top: 5px solid #6aad32;
  border-radius: 5px;
  text-align: center;
.heading article h4 {
  color: #6aad32;
  font-size: 230%;
  padding-bottom: 20px;

Finally commit to version control

git add app
git commit -m "Added Uptown CSS to make it look pretty"