Installation

Before getting started you'll need a Shopify store and a working concrete5 website. See the getting started page for a video walkthrough of the install process. 

1. Installing the c5 package

You can install the c5 package from the concrete5 marketplace or download the code and upload the hutman_shopify folder to your website in the packages folder.  

2. Create a product page

The system will automatically create a page on your website for each product in the Shopify store. You'll need to designate a page within your sitemap for these new pages to live. Once pages are created you can move them around the sitemap as needed. The top level product page and be any page type and content on the page is up to you. 

3. Connect to your Shopify store

In order to connect your c5 site to your Shopify store you will need to create a  private app in the Shopify dashboard. To create a private app, click Apps in the left hand columns, then click the Manage Private Apps link on the bottom of the page. 

manage-private-apps.png

Then click the Create New Private App button in the upper right. 

create-private-app.png

Complete the form by giving your app a name and providing an email address. You will want to enable read access permissions for products and product lists as well as enabling the storefront api. To enable the product lists permission expand the permission list and find that setting about 2/3 of the way through the list. When you're done, click save. Your setup should look like this: 

shopify-private-app.png

Copy and paste your API Key, password, and storefront token into your concrete5 Shopify settings page. 

4. Run your automated job

A new automated job will appear in your automated jobs dashboard page. You can get there by going to System & Settings -> Optimization -> Automated Jobs. Clicking the run icon for the Import Shopify Products job will fetch products from your Shopify store and automatically create pages on your website for each product.  See the concrete5 documentation or our automated jobs page for more information regarding scheduled tasks and concrete5. 

5. Add product list blocks

Once you have products imported into your site you may want to have a top level page which displays products in a filterable list view. Using a combination of the Product Filterable List and Product List Filtering blocks will allow you to create a flexible catalog landing page. 

See the Product Lists page for more information.