npm - @shopify/ui-extensions - Versions diffs - 2025.10.0-rc.9 → 2025.10.0 - Mend

@shopify/ui-extensions 2025.10.0-rc.9 → 2025.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1481) hide show

package/src/surfaces/admin/components/patterns/examples/details.html CHANGED Viewed

@@ -3,24 +3,18 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script>
+    <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
     <title>Pattern</title>
   </head>
   <body>
     <!-- === -->
     <!-- Details page pattern -->
     <!-- === -->
-    <form data-save-bar onSubmit="" onReset="">
-      <s-page>
-        <!-- === -->
-        <!-- Title Bar -->
-        <!-- Note: ui-title-bar requires AppBridge to render correctly -->
-        <!-- === -->
-        <ui-title-bar title="Mountain view">
-          <button variant="breadcrumb" href="/app/puzzles">Puzzles</button>
-          <button>Duplicate</button>
-          <button tone="critical">Delete</button>
-        </ui-title-bar>
+    <form data-save-bar>
+      <s-page heading="Mountain view">
+        <s-link slot="breadcrumb-actions" href="/app/puzzles">Puzzles</s-link>
+        <s-button slot="secondary-actions">Duplicate</s-button>
+        <s-button slot="secondary-actions">Delete</s-button>
         <!-- === -->
         <!-- Puzzle information -->
         <!-- === -->
@@ -83,7 +77,7 @@
               borderStyle="solid"
               overflow="hidden"
             >
-              <s-table fullwidth border="base" borderRadius="base" borderStyle="solid">
+              <s-table border="base" borderRadius="base" borderStyle="solid">
                 <s-table-header-row>
                   <s-table-header listSlot="primary">Template</s-table-header>
                   <s-table-header>
@@ -105,6 +99,7 @@
                           maxBlockSize="40px"
                         >
                           <s-image
+                            alt="16-pieces puzzle template"
                             src="https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png"
                           ></s-image>
                         </s-box>
@@ -138,6 +133,7 @@
                           maxBlockSize="40px"
                         >
                           <s-image
+                            alt="9-pieces puzzle template"
                             src="https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png"
                           ></s-image>
                         </s-box>
@@ -216,8 +212,12 @@
               <s-list-item>Pieces can be rotated</s-list-item>
               <s-list-item>No time limit</s-list-item>
               <s-list-item>
-                Current status:
-                <s-badge color="base" tone="success"> Active </s-badge>
+                <s-stack direction="inline" gap="small">
+                  <s-text>Current status:</s-text>
+                  <s-badge color="base" tone="success">
+                    Active
+                  </s-badge>
+                </s-stack>
               </s-list-item>
             </s-unordered-list>
           </s-section>
@@ -225,4 +225,4 @@
       </s-page>
     </form>
   </body>
-</html>
+</html>

package/src/surfaces/admin/components/patterns/examples/details.jsx CHANGED Viewed

@@ -16,18 +16,10 @@ export default function DetailsPage() {
   return (
     <form data-save-bar onSubmit={handleFormSubmit} onReset={handleFormReset}>
-      <s-page>
-        {/* === */}
-        {/* Title Bar */}
-        {/* Note: ui-title-bar requires AppBridge to render correctly */}
-        {/* === */}
-        <ui-title-bar title="Mountain view">
-          <button variant="breadcrumb" href="/app/puzzles">
-            Puzzles
-          </button>
-          <button>Duplicate</button>
-          <button tone="critical">Delete</button>
-        </ui-title-bar>
+      <s-page heading="Mountain view">
+        <s-link slot="breadcrumb-actions" href="/app/puzzles">Puzzles</s-link>
+        <s-button slot="secondary-actions">Duplicate</s-button>
+        <s-button slot="secondary-actions">Delete</s-button>
         {/* === */}
         {/* Puzzle information */}
         {/* === */}
@@ -96,7 +88,6 @@ export default function DetailsPage() {
               overflow="hidden"
             >
               <s-table
-                fullwidth
                 border="base"
                 borderRadius="base"
                 borderStyle="solid"
@@ -125,7 +116,7 @@ export default function DetailsPage() {
                           maxInlineSize="40px"
                           maxBlockSize="40px"
                         >
-                          <s-image src="https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png"></s-image>
+                          <s-image alt="16-pieces puzzle template" src="https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png"></s-image>
                         </s-box>
                         16-pieces puzzle
                       </s-stack>
@@ -160,7 +151,7 @@ export default function DetailsPage() {
                           maxInlineSize="40px"
                           maxBlockSize="40px"
                         >
-                          <s-image src="https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png"></s-image>
+                          <s-image alt="9-pieces puzzle template" src="https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png"></s-image>
                         </s-box>
                         9-pieces puzzle
                       </s-stack>
@@ -248,10 +239,12 @@ export default function DetailsPage() {
               <s-list-item>Pieces can be rotated</s-list-item>
               <s-list-item>No time limit</s-list-item>
               <s-list-item>
-                Current status:{" "}
-                <s-badge color="base" tone="success">
-                  Active
-                </s-badge>
+                <s-stack direction="inline" gap="small">
+                  <s-text>Current status:</s-text>
+                  <s-badge color="base" tone="success">
+                    Active
+                  </s-badge>
+                </s-stack>
               </s-list-item>
             </s-unordered-list>
           </s-section>
@@ -259,4 +252,4 @@ export default function DetailsPage() {
       </s-page>
     </form>
   );
-}
+}

package/src/surfaces/admin/components/patterns/examples/emptyState.html ADDED Viewed

@@ -0,0 +1,27 @@
+<s-section accessibilityLabel="Empty state section">
+  <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
+    <s-box maxInlineSize="200px" maxBlockSize="200px">
+      <s-image
+        aspectRatio="1/0.5"
+        src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
+        alt="A stylized graphic of four characters, each holding a puzzle piece"
+      />
+    </s-box>
+    <s-grid
+      justifyItems="center"
+      maxInlineSize="450px"
+      gap="base"
+    >
+    <s-stack alignItems="center">
+      <s-heading>Start creating puzzles</s-heading>
+      <s-paragraph>
+        Create and manage your collection of puzzles for players to enjoy.
+      </s-paragraph>
+    </s-stack>
+    <s-button-group>
+      <s-button slot="secondary-actions" aria-label="Learn more about creating puzzles"> Learn more </s-button>
+      <s-button slot="primary-action" aria-label="Add a new puzzle"> Create puzzle </s-button>
+    </s-button-group>
+    </s-grid>
+  </s-grid>
+</s-section>

package/src/surfaces/admin/components/patterns/examples/homepage.html CHANGED Viewed

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script>
+    <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
     <title>Pattern</title>
     <script>
       // Simple global object to store handlers
@@ -62,19 +62,10 @@
     <!-- === -->
     <!-- Home page pattern -->
     <!-- === -->
-    <s-page inlineSize="small">
-      <!-- === -->
-      <!-- Title Bar -->
-      <!-- The ui-title-bar on the homepage should not have a title attribute -->
-      <!-- Note: ui-title-bar requires AppBridge to render correctly -->
-      <!-- === -->
-      <ui-title-bar>
-        <button variant="primary">Create puzzle</button>
-        <section>
-          <button>Browse templates</button>
-          <button>Import image</button>
-        </section>
-      </ui-title-bar>
+    <s-page>
+      <s-button slot="primary-action">Create puzzle</s-button>
+      <s-button slot="secondary-actions">Browse templates</s-button>
+      <s-button slot="secondary-actions">Import image</s-button>
       <!-- === -->
       <!-- Banner -->
       <!-- Use banners sparingly. Only one banner should be visible at a time. -->
@@ -118,16 +109,13 @@
             <s-paragraph>
               Use this personalized guide to get your store ready for sales.
             </s-paragraph>
-            <s-stack direction="inline" gap="small-200" alignItems="center">
-              <s-paragraph id="progress-text" tone="subdued">0 out of 3 steps completed</s-paragraph>
-            </s-stack>
+              <s-paragraph id="progress-text" color="subdued">0 out of 3 steps completed</s-paragraph>
           </s-grid>
           <!-- Steps Container -->
           <s-box id="steps-container" borderRadius="base" border="base" background="base">
             <!-- Step 1 -->
             <s-box>
-              <s-box padding="small">
-                <s-grid gridTemplateColumns="1fr auto" gap="base">
+                <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
                   <s-checkbox
                     label="Upload an image for your puzzle"
                     onInput="window.puzzleApp.updateProgress(this, document.getElementById('progress-text'))"
@@ -140,17 +128,16 @@
                     icon="chevron-down"
                   ></s-button>
                 </s-grid>
-              </s-box>
               <s-box id="step1-details" padding="small" paddingBlockStart="none" style="display: none;">
                 <s-box padding="base" background="subdued" borderRadius="base">
-                  <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base">
                     <s-grid gap="small-200">
                       <s-paragraph>
                         Start by uploading a high-quality image that will be used to create your
                         puzzle. For best results, use images that are at least 1200x1200 pixels.
                       </s-paragraph>
                       <s-stack direction="inline" gap="small-200">
-                        <s-button variant="primary" onClick="console.log('clicked')">
+                        <s-button variant="primary">
                           Upload image
                         </s-button>
                         <s-button variant="tertiary" tone="neutral"> Image requirements </s-button>
@@ -169,8 +156,7 @@
             <!-- Step 2 -->
             <s-divider></s-divider>
             <s-box>
-              <s-box padding="small">
-                <s-grid gridTemplateColumns="1fr auto" gap="base">
+                <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
                   <s-checkbox
                     label="Choose a puzzle template"
                     onInput="window.puzzleApp.updateProgress(this, document.getElementById('progress-text'))"
@@ -183,10 +169,9 @@
                     icon="chevron-down"
                   ></s-button>
                 </s-grid>
-              </s-box>
               <s-box id="step2-details" padding="small" paddingBlockStart="none" style="display: none;">
                 <s-box padding="base" background="subdued" borderRadius="base">
-                  <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base">
                     <s-grid gap="small-200">
                       <s-paragraph>
                         Select a template for your puzzle - choose between 9-piece (beginner),
@@ -210,8 +195,7 @@
             <!-- Step 3 -->
             <s-divider></s-divider>
             <s-box>
-              <s-box padding="small">
-                <s-grid gridTemplateColumns="1fr auto" gap="base">
+                <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
                   <s-checkbox
                     label="Customize puzzle piece shapes"
                     onInput="window.puzzleApp.updateProgress(this, document.getElementById('progress-text'))"
@@ -227,7 +211,7 @@
               </s-box>
               <s-box id="step3-details" padding="small" paddingBlockStart="none" style="display: none;">
                 <s-box padding="base" background="subdued" borderRadius="base">
-                  <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base">
                     <s-grid gap="small-200">
                       <s-paragraph>
                         Make your puzzle unique by customizing the shapes of individual pieces.
@@ -247,7 +231,6 @@
                       ></s-image>
                     </s-box>
                   </s-grid>
-                </s-box>
               </s-box>
             </s-box>
             <!-- Add additional steps here... -->
@@ -258,8 +241,7 @@
       <!-- Metrics cards -->
       <!-- Your app homepage should provide merchants with quick statistics or status updates that help them understand how the app is performing for them. -->
       <!-- === -->
-      <s-section padding="none">
-        <s-box padding="small">
+      <s-section padding="small">
           <s-grid
             gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
             gap="small"
@@ -309,7 +291,6 @@
               </s-grid>
             </s-clickable>
           </s-grid>
-        </s-box>
       </s-section>
       <!-- === -->
       <!-- Callout Card -->
@@ -327,12 +308,11 @@
               <s-paragraph>
                 Start by uploading an image to your gallery or choose from one of our templates.
               </s-paragraph>
-              <s-stack direction="inline" gap="small-200" wrap="nowrap">
-                <s-button onClick="console.log('clicked')"> Upload image </s-button>
+              <s-stack direction="inline" gap="small-200">
+                <s-button> Upload image </s-button>
                 <s-button tone="neutral" variant="tertiary"> Browse templates </s-button>
               </s-stack>
             </s-grid>
-            <s-stack alignItems="center">
               <s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">
                 <s-image
                   src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
@@ -340,7 +320,6 @@
                   aspectRatio="1/0.5"
                 ></s-image>
               </s-box>
-            </s-stack>
           </s-grid>
           <s-button
             onClick="window.puzzleApp.dismissSection(document.getElementById('callout-section'))"
@@ -363,7 +342,7 @@
               <s-image
                 aspectRatio="1/1"
                 objectFit="cover"
-                alt="Illustration of characters with a 4-piece puzzle"
+                alt="4-pieces puzzle template"
                 src="https://cdn.shopify.com/static/images/polaris/patterns/4-pieces.png"
               ></s-image>
             </s-clickable>
@@ -387,6 +366,7 @@
               <s-image
                 aspectRatio="1/1"
                 objectFit="cover"
+                alt="9-pieces puzzle template"
                 src="https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png"
               ></s-image>
             </s-clickable>
@@ -410,6 +390,7 @@
               <s-image
                 aspectRatio="1/1"
                 objectFit="cover"
+                alt="16-pieces puzzle template"
                 src="https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png"
               ></s-image>
             </s-clickable>
@@ -516,18 +497,11 @@
             accessibilityLabel="Download Shopify Flow"
           >
             <s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
-              <s-box
-                border="base"
-                borderRadius="base"
-                overflow="hidden"
-                maxInlineSize="40px"
-                maxBlockSize="40px"
-              >
-                <s-image
+                <s-thumbnail
+                  size="small"
                   src="https://cdn.shopify.com/app-store/listing_images/15100ebca4d221b650a7671125cd1444/icon/CO25r7-jh4ADEAE=.png"
                   alt="Shopify Flow icon"
-                ></s-image>
-              </s-box>
+                ></s-thumbnail>
               <s-box>
                 <s-heading>Shopify Flow</s-heading>
                 <s-paragraph>Free</s-paragraph>
@@ -552,18 +526,11 @@
             accessibilityLabel="Download Shopify Planet"
           >
             <s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
-              <s-box
-                border="base"
-                borderRadius="base"
-                overflow="hidden"
-                maxInlineSize="40px"
-                maxBlockSize="40px"
-              >
-                <s-image
+                <s-thumbnail
+                  size="small"
                   src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
                   alt="Shopify Planet icon"
-                ></s-image>
-              </s-box>
+                ></s-thumbnail>
               <s-box>
                 <s-heading>Shopify Planet</s-heading>
                 <s-paragraph>Free</s-paragraph>
@@ -584,4 +551,4 @@
       </s-section>
     </s-page>
   </body>
-</html>
+</html>

package/src/surfaces/admin/components/patterns/examples/homepage.jsx CHANGED Viewed

@@ -19,19 +19,10 @@ export default function HomePage() {
   });
   const [progress, setProgress] = useState(0);
   return (
-    <s-page inlineSize="small">
-      {/* === */}
-      {/* Title Bar */}
-      {/* The ui-title-bar on the homepage should not have a title attribute */}
-      {/* Note: ui-title-bar requires AppBridge to render correctly */}
-      {/* === */}
-      <ui-title-bar>
-        <button variant="primary">Create puzzle</button>
-        <section>
-          <button>Browse templates</button>
-          <button>Import image</button>
-        </section>
-      </ui-title-bar>
+    <s-page>
+      <s-button slot="primary-action">Create puzzle</s-button>
+      <s-button slot="secondary-actions">Browse templates</s-button>
+      <s-button slot="secondary-actions">Import image</s-button>
       {/* === */}
       {/* Banner */}
@@ -88,11 +79,9 @@ export default function HomePage() {
               <s-paragraph>
                 Use this personalized guide to get your store ready for sales.
               </s-paragraph>
-              <s-stack direction="inline" gap="small-200" alignItems="center">
-                <s-paragraph tone="subdued">
+                <s-paragraph color="subdued">
                   {progress} out of 3 steps completed
                 </s-paragraph>
-              </s-stack>
             </s-grid>
             {/* Steps Container */}
             <s-box
@@ -103,28 +92,24 @@ export default function HomePage() {
             >
               {/* Step 1 */}
               <s-box>
-                <s-box padding="small">
-                  <s-grid gridTemplateColumns="1fr auto" gap="base">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
                     <s-checkbox
                       label="Upload an image for your puzzle"
                       onInput={(e) =>
                         setProgress((prev) =>
-                          e.target.checked ? prev + 1 : prev - 1,
+                          e.currentTarget.checked ? prev + 1 : prev - 1,
                         )
                       }
                     ></s-checkbox>
                     <s-button
                       onClick={(e) => {
-                        console.log("Toggle step 1 details");
                         setExpanded({ ...expanded, step1: !expanded.step1 });
-                      }
-                      }
+                      }}
                       accessibilityLabel="Toggle step 1 details"
                       variant="tertiary"
                       icon={expanded.step1 ? "chevron-up" : "chevron-down"}
                     ></s-button>
                   </s-grid>
-                </s-box>
                 <s-box
                   padding="small"
                   paddingBlockStart="none"
@@ -164,13 +149,12 @@ export default function HomePage() {
               {/* Step 2 */}
               <s-divider></s-divider>
               <s-box>
-                <s-box padding="small">
-                  <s-grid gridTemplateColumns="1fr auto" gap="base">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
                     <s-checkbox
                       label="Choose a puzzle template"
                       onInput={(e) =>
                         setProgress((prev) =>
-                          e.target.checked ? prev + 1 : prev - 1,
+                          e.currentTarget.checked ? prev + 1 : prev - 1,
                         )
                       }
                     ></s-checkbox>
@@ -183,7 +167,6 @@ export default function HomePage() {
                       icon={expanded.step2 ? "chevron-up" : "chevron-down"}
                     ></s-button>
                   </s-grid>
-                </s-box>
                 <s-box
                   padding="small"
                   paddingBlockStart="none"
@@ -221,13 +204,12 @@ export default function HomePage() {
               {/* Step 3 */}
               <s-divider></s-divider>
               <s-box>
-                <s-box padding="small">
-                  <s-grid gridTemplateColumns="1fr auto" gap="base">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
                     <s-checkbox
                       label="Customize puzzle piece shapes"
                       onInput={(e) =>
                         setProgress((prev) =>
-                          e.target.checked ? prev + 1 : prev - 1,
+                          e.currentTarget.checked ? prev + 1 : prev - 1,
                         )
                       }
                     ></s-checkbox>
@@ -240,7 +222,6 @@ export default function HomePage() {
                       icon={expanded.step3 ? "chevron-up" : "chevron-down"}
                     ></s-button>
                   </s-grid>
-                </s-box>
                 <s-box
                   padding="small"
                   paddingBlockStart="none"
@@ -287,8 +268,7 @@ export default function HomePage() {
       {/* Metrics cards */}
       {/* Your app homepage should provide merchants with quick statistics or status updates that help them understand how the app is performing for them. */}
       {/* === */}
-      <s-section padding="none">
-        <s-box padding="small">
+      <s-section padding="small">
           <s-grid
             gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
             gap="small"
@@ -342,7 +322,6 @@ export default function HomePage() {
               </s-grid>
             </s-clickable>
           </s-grid>
-        </s-box>
       </s-section>
       {/* === */}
@@ -367,13 +346,9 @@ export default function HomePage() {
                   Start by uploading an image to your gallery or choose from one
                   of our templates.
                 </s-paragraph>
-                <s-stack direction="inline" gap="small-200" wrap="nowrap">
-                  <s-button onClick={() => console.log("Handle upload here")}>
-                    Upload image
-                  </s-button>
-                  <s-button tone="neutral" variant="tertiary">
-                    Browse templates
-                  </s-button>
+                <s-stack direction="inline" gap="small-200">
+                  <s-button> Upload image </s-button>
+                  <s-button tone="neutral" variant="tertiary"> Browse templates </s-button>
                 </s-stack>
               </s-grid>
               <s-stack alignItems="center">
@@ -419,7 +394,7 @@ export default function HomePage() {
               <s-image
                 aspectRatio="1/1"
                 objectFit="cover"
-                alt="Illustration of characters with a 4-piece puzzle"
+                alt="4-pieces puzzle template"
                 src="https://cdn.shopify.com/static/images/polaris/patterns/4-pieces.png"
               ></s-image>
             </s-clickable>
@@ -454,6 +429,7 @@ export default function HomePage() {
               <s-image
                 aspectRatio="1/1"
                 objectFit="cover"
+                alt="9-pieces puzzle template"
                 src="https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png"
               ></s-image>
             </s-clickable>
@@ -488,6 +464,7 @@ export default function HomePage() {
               <s-image
                 aspectRatio="1/1"
                 objectFit="cover"
+                alt="16-pieces puzzle template"
                 src="https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png"
               ></s-image>
             </s-clickable>
@@ -613,18 +590,11 @@ export default function HomePage() {
                 alignItems="stretch"
                 gap="base"
               >
-                <s-box
-                  border="base"
-                  borderRadius="base"
-                  overflow="hidden"
-                  maxInlineSize="40px"
-                  maxBlockSize="40px"
-                >
-                  <s-image
+                  <s-thumbnail
+                    size="small"
                     src="https://cdn.shopify.com/app-store/listing_images/15100ebca4d221b650a7671125cd1444/icon/CO25r7-jh4ADEAE=.png"
                     alt="Shopify Flow icon"
-                  ></s-image>
-                </s-box>
+                  ></s-thumbnail>
                 <s-box>
                   <s-heading>Shopify Flow</s-heading>
                   <s-paragraph>Free</s-paragraph>
@@ -655,18 +625,11 @@ export default function HomePage() {
                 alignItems="stretch"
                 gap="base"
               >
-                <s-box
-                  border="base"
-                  borderRadius="base"
-                  overflow="hidden"
-                  maxInlineSize="40px"
-                  maxBlockSize="40px"
-                >
-                  <s-image
+                  <s-thumbnail
+                    size="small"
                     src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
                     alt="Shopify Planet icon"
-                  ></s-image>
-                </s-box>
+                  ></s-thumbnail>
                 <s-box>
                   <s-heading>Shopify Planet</s-heading>
                   <s-paragraph>Free</s-paragraph>
@@ -688,4 +651,4 @@ export default function HomePage() {
       )}
     </s-page>
   );
-}
+}