QCK Shopify Sync Plugin Guide

The QCK Shopify Sync plugin lets you dynamically display live Shopify products on your WordPress site using the Shopify Storefront API. No manual updates or expensive third-party tools needed.

---

🏠 What It Does

• Displays single products using [shopify_product product="handle"]
• Displays collections or multiple products using [shopify_products collection="handle" columns="3"]
• Automatically fetches live data from Shopify (title, image, price, variants)
• Uses a settings page for secure API key + store URL
• Mobile-friendly grid and featured layouts

---

⚙️ How to Set It Up

1. Install the Plugin

• Upload the qck-shopify-sync.zip file via Plugins > Add New > Upload
• Activate it

2. Enter Your Shopify Credentials

Go to Settings > QCK Shopify and fill out:

• Shopify Storefront API Key: Found under your Shopify admin > Apps > Develop apps > API credentials
• Shopify Store URL: Enter the base store URL only (e.g. https://yourshopify.com).

Do NOT include /api/2023-10/graphql.json — the plugin adds that for you.

---

🔐 How to Use the Shortcodes

1. Single Product Shortcode

[shopify_product product="gumbo-thca-exotic-indoor"]

• Displays one featured product with image, price, and a Shop Now button.

2. Multiple Products from a Collection

[shopify_products collection="exotic-indoor-thca-flower-auto" columns="3"]

• Displays a grid of products in 3 columns
• You can set columns="2", "4", etc.
• If only one product is in the collection, it will display in featured layout

3. All Products (if no collection specified)

[shopify_products limit="6"]

• Shows the first 6 products from your store

---

📊 Styling & Layout

The plugin includes built-in responsive CSS for:

• .shopify-product-grid (grid layout)
• .shopify-product-featured (single layout)
• .columns-2, .columns-3, etc. for dynamic column counts

You can override styles in your theme or enqueue your own CSS.

---

❌ Troubleshooting

• Shortcode showing on the page? Make sure you use straight quotes, not curly:
  • Correct: "product-name"
  • Wrong: “product-name”
• API not working?
  • Check that your store URL is just https://yourdomain.com
  • Ensure the Storefront API key has read_products access
• Blank or broken layout?
  • Make sure your theme loads the plugin CSS or manually enqueue it

---

🛠️ Developer Tips

• You can modify /includes/shopify-shortcodes.php to extend the logic
• Supports flexible HTML output for Elementor, Gutenberg, or any shortcode block
• Future plans: filters, AJAX load more, WooCommerce bridge

---

🌟 Need Help?

For support, contact the SitesByYogi team or the QCK development crew.

---

QCK Shopify Sync is maintained by SitesByYogi.com.