Code Shopify About

Shopify App and Theme Development tutorials for those who are familiar with code and want to dive into Shopify.

Hey Everyone!

🎒 I'd like to introduce Design Packs 🎒

I've created a Shopify app that let's you add Sections and Templates to your existing theme!

It's free to install and you can browse the "Packs" and purchase them (one time fee) to add to any theme in your shop. We've created packs for function and style. For example you could add a logo list to your homepage, or a pie chart. We've also created banners that only show up for certain locations or at certain times. Once added to your theme, you can customize them through the normal theme customizer to fit the styles of your store.

We're always in the market for new ideas, so if there's something you're looking for let us know!

Sign up for Shopify

Displaying Product Info In Your App With The Shopify API

Thursday, Apr 12, 2018

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

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

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

more posts