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.

Yulio Aleman Jimenez

jorgelbg

<p>This WordPress plugin allows add some shortcodes on post to insert Shopify products. Also allow to retrieve/update/remove automatically all products from the shopify store (like a sync function).</p>
<h3>Smart Shopify Product</h3>
<p>This WordPress plugin allows add some shortcodes on post to insert Shopify products. Also allow to retrieve/update/remove automatically all products from the shopify store (like a sync function).</p>
<h3>Shortcodes</h3>
<ul>
<li><strong>[shopify_basic_product product_id=”ID”]:</strong> Allows to insert all product basic information and an <strong>add to cart</strong> button. This last, change its appearance accordingly the choices of the product variants that customers selects. this view is ideal for a product detail page.</li>
<li><strong>[shopify_info_product product_id=”ID” product_link=”src_of_product_detail”]:</strong> Insert a basic product card with the main image, title and price. Ideal for a collection page.</li>
</ul>
<h3>Button for shopping cart</h3>
<p>To get access to the shopping cart you can insert this code on the place of your preference:<br />
Note: You must have <code>Font Awesome</code> to get the <code>fa-shopping-cart</code> icon.</p>
<pre><code><button class="btn--cart-tab js-prevent-cart-listener">
    <span class="btn__counter"></span>
    <span class="fa fa-shopping-cart"></span>
</button>
</code></pre>
<h3>Shopify Cart</h3>
<p>To get a Shopify Cart where to see all products added to cart, you can insert this code on the place of your preference. It’s a good practice to locate it just next to the open <code><body></code> HTML tag:</p>
<pre><code>



<div class="cart">


<div class="cart-section cart-section--top">
    <h2 class="cart-title">Your cart</h2>
    <button class="btn--close">
        <span aria-role="hidden">×</span>
        <span class="visuallyhidden">Close</span>
    </button>
</div>



<div class="cart-form">
    <div class="cart-item-container cart-section">
    </div>
    
    <div class="cart-bottom">
        <div class="cart-info clearfix cart-section">
            <div class="type--caps cart-info__total cart-info__small">Total</div>
            <div class="cart-info__pricing">
                <span class="cart-info__small cart-info__total">CAD</span>
                <span class="pricing pricing--no-padding"></span>
            </div>
        </div>
        <div class="cart-actions-container cart-section type--center">
            <div class="cart-discount-notice cart-info__small">Shipping and discount codes are added at checkout.</div>
            <input type="submit" class="btn--cart-checkout" id="checkout" name="checkout" value="Checkout">
        </div>
    </div>
    
</div>


</div>


<script id="CartItemTemplate" type="text/template">
    <div class="cart-item">
        <div id="cart-item-id" class="hidden"></div>
        <div class="cart-item__img"></div>
        <div class="cart-item__content">
            <div class="cart-item__content-row">
                <div class="cart-item__variant-title"></div>
                <span class="cart-item__title"></span>
            </div>
            <div class="cart-item__content-row">
                <div class="cart-item__quantity-container">
                    <button class="btn--seamless quantity-decrement" type="button"><span>-</span><span class="visuallyhidden"></span></button>
                    <input class="cart-item__quantity" type="number" min="0" aria-label="Quantity">
                    <button class="btn--seamless quantity-increment" type="button"><span>+</span><span class="visuallyhidden"></span></button>
                </div>
                <span class="cart-item__price"></span>
            </div>
        </div>
    </div>
</script>



</code></pre>
<h3>Settings</h3>
<p>You can access to the Smart Shopify Product setting through the <strong>S. Shopify Product</strong> item menu in the WordPress admin menu.</p>
<h4>Shopify Tag</h4>
<p>On this section you will configure the main params to connect the WordPress website to the Shopify store, through the Shopify API credentials and the number of the app.</p>
<ul>
<li><strong>API url:</strong> The url of Shopify API for your Shopify app. This look like: <code>https://apikey:password@my-shop.myshopify.com</code>.</li>
<li><strong>Shop url:</strong> The url of your Shopify store. This look like: <code>my-shop.myshopify.com</code>.</li>
<li><strong>Access Token:</strong> This is a long random string of your Shopify app. This is knew as the <code>API Key</code> too.</li>
<li><strong>App ID Number:</strong> Usually this number is <code>6</code>, for the Buy Button.</li>
</ul>
<h4>Post Type of Product Tag</h4>
<p>On this section you will configure the post type in your WordPress website you use to represent a Shopify product. It usually works fine with post types created with Toolset plugin (the free version of this, allow to create this post types :)).</p>
<ul>
<li><strong>Post Type Slug:</strong> Slug of the Post Type for Products you have had created, using <code>Toolset</code> or another plugin for management of custom Post Type. <strong>Eg:</strong> product, shopify-product, sh-product. </li>
<li><strong>Product ID Meta Slug:</strong> Slug of the custom field type (or meta) of Shopify Product ID, for the Product Post Type you have had created, using Toolset or another plugin for management of custom Post Type. <strong>Eg:</strong> product-id, shopify-product-id, sh-product-id. <strong>Note:</strong> Custom field created with Toolset plugin have a “wpcf-” prefix. Eg: wpcf-product-id.</li>
</ul>
<h4>Shopify fields options Tag</h4>
<p>On this sections you will be capable to set some settings about the view of some fields of the Shopify products, like price, buy buttons and variant option selectors.</p>
<ul>
<li><strong>Show Shopify price field:</strong> Mean that the price of Shopify products will be shown or not.</li>
<li><strong>Replacing text for Shopify price field:</strong> If it’s not empty, the price of the Shopify products will be replaced with your replacing text. It’s ideal when you don’t want to show the prices to users.</li>
<li><strong>Show card Buy Button:</strong> If checked, the Buy Button will be shown on the product cards, for collection views or sections.</li>
<li><strong>Show details page Buy Button:</strong> If checked, the Buy Button will be shown on product detail pages.</li>
<li><strong>Show Variant Options selector:</strong> If checked, the selector of the Variant Options for Shopify products will be shown.<br />
                                 Note: Be careful. If checked and the product that is currently shown has no items available in stock for the first Variant Option, it will cause you not able to choice another variant to make shop.</li>
</ul>
<h3>Refresh function</h3>
<p>You can make some kind on <strong>sync</strong> with the products of your Shopify store. On the setting of the plugin, you will find a <strong>Refresh Shopify Product</strong> button, it will retrieve all Shopify products and will remove of your website the Shopify products that don’t exist anymore.<br />
* If you check the <code>Publish new products right away (set to Pending Review if unchecked)</code> option, post types created from Shopify products will publish automatically.</p>
<h3>Browser Testing</h3>
<p>We are using <a href="https://www.browserstack.com" rel="nofollow ugc">BrowserStack</a> for testing the plugin’s functions in the most popular moders browsers.<br />
With BrowserStack you can automate all web and mobile browser tests. It offers you a chance to keep attention to the real functionalities of your products and to fit the needs of your customers without worrying about browser testings.</p>

Smart Shopify Product

This Wordpress plugin allows add some shortcodes on post to insert Shopify products. Also allow to retrieve/update/remove automatically all products f …

ITMAROON EC RELATE BLOCKS vs Smart Shopify Product