Isamu Takeda

<p>ITMAROON EC RELATE BLOCKS provides two Gutenberg blocks to integrate a headless Shopify commerce flow into a WordPress site:</p>
<ul>
<li>
<p><code>itmar/product-block</code></p>
<ul>
<li>Links a WordPress post type to Shopify products.</li>
<li>When the linked posts are published/updated, the plugin can create/update the corresponding Shopify product data (depending on your configuration and permissions).</li>
<li>Designed for WordPress as the content layer (product pages) while Shopify remains the commerce layer (inventory + checkout).</li>
</ul>
</li>
<li>
<p><code>itmar/cart-block</code></p>
<ul>
<li>Provides a cart UI powered by Shopify Storefront API Cart.</li>
<li>Sends shoppers to Shopify Checkout to complete payment.</li>
</ul>
</li>
</ul>
<p>Important concept (recommended operation):<br />
* Shopify is the source of truth for inventory and checkout.<br />
* WordPress is the source of truth for marketing/product content.<br />
* This plugin focuses on a smooth purchase flow from WordPress pages to Shopify Checkout.</p>
<h3>Security / Data Handling (Important)</h3>
<ul>
<li>Admin API Token and Storefront API Token are saved server-side in WordPress options via REST and are NOT embedded into post content or rendered into front-end HTML.</li>
<li>The editor UI no longer persists secret tokens as block attributes. Tokens should never be stored in post_content.</li>
</ul>
<h3>Block Overview</h3>
<p>= itmar/product-block =<br />
Use this block in the Site Editor (template) to enable Shopify connection and product linkage for a selected post type.</p>
<p>Main settings (Block Inspector <span aria-hidden="true" class="wp-exclude-emoji">→</span> “EC setting”):<br />
* Select Product Post Type<br />
* Store Site URL (Shopify domain)<br />
* Shop ID (for Customer Account API)<br />
* Channel Name (publication / sales channel display name)<br />
* Headless Client ID (Customer Account API client_id)<br />
* Admin API Token (saved server-side; not stored in post content)<br />
* Storefront API Token (saved server-side; not stored in post content)<br />
* Optional display controls (fields selector, display count, cart icon media ID, etc.)</p>
<h4>itmar/cart-block</h4>
<p>Use this block to show the cart UI. It uses Shopify Storefront API Cart endpoints to:<br />
* Create/update cart lines<br />
* Show totals<br />
* Provide a Checkout URL for completing purchase in Shopify Checkout</p>
<h3>Shopify Setup (Required)</h3>
<p>You need a Shopify store and API credentials.</p>
<p>1) Admin API Access Token (for product/customer management)<br />
* Create a Shopify app (Custom app) and generate an Admin API access token.<br />
* Grant only the minimum required permissions.</p>
<p>2) Storefront API Access Token (for product/cart/checkout flow)<br />
* Create a Storefront access token in Shopify.</p>
<p>3) Customer Accounts (Headless) (optional but recommended if you enable customer login)<br />
* Enable the new Customer Accounts / Customer Account API in Shopify.<br />
* Install Shopify “Headless” (sales channel) and obtain the “Client ID” used for OAuth (Customer Account API).<br />
* You will also need the “Shop ID”.<br />
  – Tip: You can derive Shop ID from the issuer value in:<br />
    https://{your-shop-domain}/.well-known/openid-configuration</p>
<h3>Quick Start (Recommended Workflow)</h3>
<p>1) Configure connection settings<br />
* Open the Site Editor.<br />
* Add <code>itmar/product-block</code> to a global template (e.g., Header, or a dedicated template used site-wide).<br />
* In the block Inspector <span aria-hidden="true" class="wp-exclude-emoji">→</span> “EC setting”, enter:<br />
  – Shopify domain (Store Site URL)<br />
  – Channel Name (e.g., “Online Store”)<br />
  – Headless Client ID / Shop ID (if using customer login)<br />
  – Admin API Token and Storefront API Token (saved to WordPress options)</p>
<p>2) Choose the linked post type<br />
* In <code>itmar/product-block</code>, select your product post type (e.g., “product”).</p>
<p>3) Add the cart<br />
* Add <code>itmar/cart-block</code> to a template/page where you want the cart UI to appear.</p>
<p>4) Publish product posts<br />
* Create or edit posts in the selected post type.<br />
* Publish/update them to trigger Shopify-side creation/update (based on your configuration).</p>
<h3>Related Links</h3>
<ul>
<li>ec-relate-blocks: GitHub<br />
https://github.com/itmaroon/itmaroon-ec-relate-blocks</li>
<li>block-class-package: GitHub<br />
https://github.com/itmaroon/block-class-package</li>
<li>block-class-package: Packagist<br />
https://packagist.org/packages/itmar/block-class-package</li>
<li>itmar-block-packages: npm<br />
https://www.npmjs.com/package/itmar-block-packages</li>
<li>itmar-block-packages: GitHub<br />
https://github.com/itmaroon/itmar-block-packages</li>
</ul>
<h3>Developer Notes</h3>
<ol>
<li>PHP class management is done using Composer.</li>
<li>Shared functions/components are published as an npm package and reused across plugins.</li>
</ol>
<h3>External Services</h3>
<p>This plugin connects to external services to provide e-commerce functionality.</p>
<h4>Shopify</h4>
<p>Service provider:<br />
* Shopify</p>
<p>Domains contacted:<br />
* The Shopify shop domain configured by the site administrator (e.g. *.myshopify.com or a custom Shopify domain) for Admin API / GraphQL Admin API requests.<br />
* shopify.com for authentication / OAuth token exchange (when customer login is enabled).<br />
* Shopify-operated domains used for checkout and storefront features (depending on configuration).</p>
<p>APIs used (depending on your configuration/features enabled):<br />
* Shopify Admin API (product/customer management)<br />
* Shopify GraphQL Admin API (graphql.json)<br />
* Shopify Storefront API (product/cart/checkout flow)<br />
* Shopify Customer Account API / OAuth endpoints (optional customer login)</p>
<p>Data that may be sent to Shopify:<br />
* Store domain, channel name, and API credentials / access tokens (server-side)<br />
* Product data required for creating/updating products (title, description, image, sales price, list price, quantity in stock)<br />
– The title is the title of the post data sent.<br />
– The description is an excerpt of the post data sent.<br />
– The image is the featured image, if one is set. Furthermore, if the ACF custom field has a gallery field named “gallery”, images in that field will also be added.<br />
– The sales price is the price set in the “prces” group set in the ACF custom field if “sales_price” is set as a member.<br />
– The list price is the price set in the above group if “list_price” is set.<br />
– The stock quantity is set as the default quantity if “quantity” is set in the ACF custom field. However, this does not reflect your sales history in Shopify, so do not use it outside of the initial setup.<br />
* Cart line items (variant IDs and quantities)<br />
* Customer authentication and identity linkage (OAuth code exchange, customer access tokens when enabled)<br />
* When uploading product images via Admin API: image data (or image URLs) and related metadata for Shopify product images.<br />
* For authentication / OAuth token exchange (when enabled): OAuth codes and token exchange parameters.</p>
<p>When data is sent:<br />
* When saving settings (admin only)<br />
* When rendering product/cart features or performing cart actions<br />
* When creating/updating Shopify products based on WordPress post changes<br />
* When performing customer authentication (if enabled)<br />
* When exchanging OAuth tokens (e.g. https://shopify.com/authentication/{shop_id}/oauth/token) if enabled.</p>
<p>Important:<br />
* Shopify is responsible for payment processing and checkout.<br />
* As with any HTTP request, the WordPress server’s IP address and user agent may be included in requests to Shopify.</p>
<p>Terms / Privacy:<br />
* Shopify Terms of Service: https://www.shopify.com/legal/terms<br />
* Shopify Privacy Policy: https://www.shopify.com/legal/privacy<br />
* Shopify API License and Terms of Use: https://www.shopify.com/legal/api-terms</p>
<h4>GitHub (raw.githubusercontent.com) – Shopify Product Taxonomy</h4>
<p>This plugin downloads a taxonomy text file hosted on GitHub (raw.githubusercontent.com) to provide a category list used by the plugin.</p>
<p>Domain contacted:<br />
* raw.githubusercontent.com</p>
<p>Data that may be sent and when:<br />
* When the taxonomy list is fetched/updated, the WordPress server requests a file such as:<br />
  https://raw.githubusercontent.com/Shopify/product-taxonomy/main/dist/ja/categories.txt<br />
* No user/customer data is intentionally sent for this action, but the WordPress server’s IP address and user agent may be included in the request.</p>
<p>Terms / Privacy:<br />
* GitHub Terms of Service: https://docs.github.com/site-policy/github-terms/github-terms-of-service<br />
* GitHub Privacy Statement: https://docs.github.com/site-policy/privacy-policies/github-privacy-statement</p>


ITMAROON EC RELATE BLOCKS

Gutenberg blocks that connect WordPress product pages to Shopify (inventory + checkout) using Shopify APIs.

Dashify

<p>Dashify brings a modern design and UI to the WooCommerce admin. Manage, search, and navigate orders faster.</p>
<p>Just activate Dashify, and you’re all set! Your existing WordPress admin turns into a beautiful, ecommerce-focused admin panel. No configuration necessary.</p>
<h3>Features</h3>
<p>Dashify doesn’t just give a fresh look to the WooCommerce admin—it also adds new functionality, marked with a star ⭐ below!</p>
<h4>WooCommerce-focused admin menu</h4>
<ul>
<li>Clear separation of WooCommerce from other WordPress menu items.</li>
<li>“Orders” and other WooCommerce submenu items are moved to the main admin menu, making them easier to find.</li>
<li>The navigation gets a modern style inspired by other popular apps (Shopify, Notion, Stripe).</li>
<li>Compatible with Admin Menu Editor.</li>
<li>If a plugin adds a menu item, you’ll find it in Dashify’s navigation too.</li>
<li>Doesn’t suit your store? You can turn it off without affecting the rest of Dashify.</li>
</ul>
<h4>⭐ Order trend graphs</h4>
<ul>
<li>See trends with a graph of total, refunded, and completed orders above the order list.</li>
<li>For WooCommerce Subscriptions, see subscription revenue, the number of new subscriptions, and the number of cancelled subscriptions.</li>
<li>Choose between Today, Last 24 hours, 7 and 30 day time periods.</li>
</ul>
<h4>Order list</h4>
<ul>
<li>Order status filters are big and easy to click.</li>
<li>Bulk actions appear only when at least one item is selected, and they are sticky as you scroll the order list.</li>
<li>The search bar and filters are grouped together, only visible when in use, and can be opened with the “F” keyboard shortcut.</li>
<li>Filters can be cleared all at once, or one at a time.</li>
<li>Table is fully responsive to screen size and works well on mobile devices.</li>
</ul>
<h4>Order view/edit</h4>
<ul>
<li>Switching from Shopify to WooCommerce? Manage orders in a <strong>Shopify-like UI</strong>.</li>
<li>⭐ <strong>Next and previous order buttons</strong> with keyboard shortcuts.</li>
<li>⭐ <strong>Jump to orders of the same status.</strong> Based on the order status selected in the order list, after clicking into an order, the next and previous buttons will go to the next or previous order of the same status.</li>
<li>⭐ Date and time formatted according to region.</li>
<li>⭐ Back button to get back to the order list.</li>
<li>Order number, status, and date are moved to the top for visibility.</li>
<li>Action and update buttons are grouped together at the top.</li>
<li>Order notes become a Timeline.</li>
<li>Timeline text box automatically expands as you type more.</li>
</ul>
<h3>Dashify Pro</h3>
<p><a href="https://getdashify.com/#pro" rel="nofollow ugc">Dashify Pro</a> brings even more improvements to the WooCommerce admin.</p>
<ul>
<li><strong>Get the Dashify theme on more WooCommerce pages.</strong> With Dashify Pro, the <strong>product list</strong> and <strong>WooCommerce settings</strong> are also styled. More pages coming soon! <a href="https://getdashify.com/roadmap/" rel="nofollow ugc">Check out the roadmap for details</a>.</li>
<li>⭐ <strong>Find orders quickly with global search.</strong> Dashify Pro adds a “Search orders” button to the WordPress admin toolbar, allowing you to find an order by ID, customer name, email, phone, or product SKU within an order. This AJAX search is faster because it doesn’t require a full page reload, unlike the standard WooCommerce order search. It also shows recent orders so you can jump to those quickly.</li>
<li>⭐ <strong>Hide specific custom fields in orders and subscriptions.</strong> You can mark custom fields as hidden, and then they won’t show in any order or subscription edit view.</li>
<li>⭐ <strong>Sort order line items by SKU.</strong> When packing orders with many items, this helps you find items faster if they’re also sorted by SKU in your warehouse or fulfillment center.</li>
<li>⭐ <strong>Sort order line items by product menu order.</strong> The items in a customer’s order can be sorted the same as they appear in the admin product list “Sorting” view and on the Shop page.</li>
</ul>
<p><a href="https://getdashify.com/#pro" rel="nofollow ugc">Screenshots</a> / <a href="https://getdashify.com/#pricing" rel="nofollow ugc">Pricing</a></p>
<h3>Compatibility</h3>
<p>Dashify should work with most plugins for the WooCommerce admin.</p>
<p>Here are the plugins we’ve extensively tested and designed Dashify to be compatible with:</p>
<ul>
<li>WooCommerce Subscriptions</li>
<li>Admin Menu Editor — Janis Elsts</li>
<li>PDF Invoices & Packing Slips for WooCommerce — WP Overnight</li>
<li>WooCommerce PDF Invoices, Packing Slips, Delivery Notes and Shipping Labels — WebToffee</li>
<li>Payment Plugins for Stripe WooCommerce — Payment Plugins</li>
<li>RD Order Modifier for WooCommerce — Robot Dwarf</li>
<li>Order Tags — 99w</li>
<li>PW WooCommerce Gift Cards — Pimwick, LLC</li>
<li>Smash Balloon Social Photo Feed — Smash Balloon</li>
<li>FiboSearch — FiboSearch Team</li>
<li>Ultimate Dashboard — David Vongries</li>
</ul>
<p>If you find a plugin that’s not compatible, leave a message in the <a href="https://wordpress.org/support/plugin/dashify/" rel="ugc">WordPress.org support forum</a> or contact us through the <a href="https://forms.gle/pRezSbdUcZmvZdX27" rel="nofollow ugc">Dashify Help Desk</a>, and we’ll gladly add compatibility for it.</p>
<p>You can turn Dashify on and off quickly through the WordPress screen options in case you have occasional plugins or workflows not currently supported by Dashify.</p>
<h3>Troubleshooting</h3>
<ul>
<li>If the order edit layout doesn’t look right, whether Dashify is on or off, turning it on/off again through the screen options will reset the layout.</li>
</ul>


Dashify: WooCommerce admin dashboard theme

A modern design and UI for the WooCommerce admin. Manage, search, and navigate orders faster. Make the WordPress admin dashboard ecommerce-focused.

ITMAROON EC RELATE BLOCKS vs Dashify: WooCommerce admin dashboard theme