This post assumes you have set up an embedded app and some basic routing. If you still need to set up your app check out this post. To get started with routing head here.

If you have already set up some basic routing and views for your app you may be wondering how to populate your views with information form your store. Today we will go through the process of using the Shopify API to populate a single product page.

Getting Started with the Product Resource

For some quick wins let's populate our view with some values on the Product. First make sure that you have the following in your app > controllers > home_controller.rb

#home_controller.rb
  def show
    @product = ShopifyAPI::Product.find(params[:id])
  end

Note: If you are not using the home resource controller or if you want to display your product info for a different action method (other than show) edit your code accordingly

In app > views > home > show.html.erb let's display some of our product info like this:

<%= @product.title %>
vendor: <%= @product.vendor%>
product type: <%= @product.product_type %>

If you want to know what info you have access to check out the Shopify API docs here.

Now let's add the product description like this:

<%= raw @product.body_html%>

We use the raw ActionView Helper to tell rails not to escape the html in the description. You can read more about the raw helper here

Displaying Product Images

Now that we have some basic text on our page let's loop through all of our product images and display them as well. The code looks like this:

<% @product.images.each do |image| %>
  
<% end %>

For all of the available product image properties check out the Shopify Api Documentation here

Displaying Product Price and Variants

Another important detail you likely want to know about your product is the price. In order to account for differing prices between variants this value is stored under the product variants. Let's loop through all of the variants and display each along with the corresponding price. The code will look something like this:

<% @product.variants.each do |v|%>
  <%= v.title %> - <%= v.price%>
<% end %>

You can also learn more about the variant properties here