@gem-sdk/components 2.1.17 → 2.1.20

package/dist/cjs/article/components/ArticleList.js

@@ -14,7 +14,7 @@ const ArticleList = ({ styles, setting, className, children, builderProps })=>{
     const { articleSetting, numberOfArticle } = setting ?? {};
     const { articleIds, articlePickType } = articleSetting ?? {};
     const articlesQuery = {
-        first: 10,
+        first: articleIds?.length ?? 50,
         where: {
             baseIDIn: [
                 ...articleSetting?.articleIds ?? []

package/dist/cjs/banner/components/hero-banner/index.liquid.js

@@ -134,6 +134,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         tablet: helpers$1.createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),
         mobile: helpers$1.createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
     };
+    const enableLazyLoad = !setting?.preload && enableLazyloadImage;
     const renderInnerHeroBanner = ()=>{
         return core.template /* liquid */ `
       <div
@@ -197,9 +198,10 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             'clip-path': index.getClipPath(borderBg?.width, cornerBg)
         }}"
             > 
-            <div class="${core.cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
+            <div class="${core.cls('hero-banner-bg-parallax gp-hero-banner-image-background', {
             'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
-            'gp-transition-transform': hoverEffect
+            'gp-transition-transform': hoverEffect,
+            gp_lazybg: enableLazyLoad
         })}"
               style="${{
             ...core.getStyleBackgroundByDevice(background, {
@@ -208,9 +210,9 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 liquid: true
             }),
             ...core.makeStyleResponsive('bgi', {
-                desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
-                tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
-                mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
+                desktop: `url('${bgiEnableByDevice['desktop'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
+                tablet: `url('${bgiEnableByDevice['tablet'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
+                mobile: `url('${bgiEnableByDevice['mobile'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
             }),
             '--duration': `${hoverEffectDuration ?? 0}s`,
             '--scale': hoverEffectScale ?? 1,
@@ -218,6 +220,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             ...index.getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
         }}"
             >
+            ${embed()}
             ${!setting?.preload ? getSrcSet.DEVICES.map((device)=>{
             return core.RenderIf(getEnableBgImageByDevice(device), NextImage_liquid.default({
                 src: getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, device), device),
@@ -227,8 +230,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 enableLazyloadImage
             }));
         }).join('') : ''}
-            </div>  
-            ${embed()} </div>
+            </div></div>
           </div>
           ${core.RenderIf(overlayEnable, core.template`<div
               aria-label="Overlay"

package/dist/cjs/banner/components/hero-banner/utils/index.js

@@ -27,13 +27,14 @@ const getHeightHeroBanner = (background, enableParallax)=>{
         'tablet'
     ];
     DEVICES.forEach((device)=>{
+        const enableParallaxDevice = background?.[device]?.type === 'image' ? enableParallax : false;
         const isScale = isScaleImage({
-            enableParallax,
+            enableParallax: enableParallaxDevice,
             attachment: background[device]?.attachment
         });
         result = {
             ...result,
-            [device]: enableParallax ? '150%' : isScale ? '100vh' : '100%'
+            [device]: enableParallaxDevice ? '150%' : isScale ? '100vh' : '100%'
         };
     });
     return core.makeStyleResponsive('h', result);
@@ -46,8 +47,9 @@ const getWidthHeroBanner = (background, enableParallax)=>{
         'tablet'
     ];
     DEVICES.forEach((device)=>{
+        const enableParallaxDevice = background?.[device]?.type === 'image' ? enableParallax : false;
         const isScale = isScaleImage({
-            enableParallax,
+            enableParallax: enableParallaxDevice,
             attachment: background[device]?.attachment
         });
         result = {

package/dist/cjs/form/components/textarea/TextArea.liquid.js

@@ -6,10 +6,10 @@ var core = require('@gem-sdk/core');
 var helpers = require('../../../helpers.js');
 
 const FormTextarea = ({ setting, builderProps, className, builderAttrs, advanced, pageContext })=>{
-    const { text, name, placeholder, required, width, fullWidth, typography } = setting ?? {};
+    const { text, name, placeholder, required, width, fullWidth, typography, translate } = setting ?? {};
     const textAreaWidth = core.makeStyleResponsive('w', core.makeWidth(width, fullWidth));
     const defaultName = name === '' || name === undefined ? 'contact[note]' : name;
-    const { border, rounded, hasBoxShadow, boxShadow, pos, d, op, right, top, left, bottom, z, margin, padding, translate } = advanced ?? {};
+    const { border, rounded, hasBoxShadow, boxShadow, pos, d, op, right, top, left, bottom, z, margin, padding } = advanced ?? {};
     const spacingSetting = advanced?.['spacing-setting'];
     const inputStyle = core.composeAdvanceStyle({
         border,

package/dist/cjs/image/components/Image.js

@@ -80,7 +80,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                 style: {
                     ...core.getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
                     borderRadius: 'inherit',
-                    overflow: 'hidden',
                     ...core.makeStyleResponsive('jc', styles?.align)
                 },
                 children: [

package/dist/cjs/image/components/Image.liquid.js

@@ -50,7 +50,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         style="${{
         ...core.getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
         'border-radius': 'inherit',
-        overflow: 'hidden',
         ...core.makeStyleResponsive('jc', styles?.align)
     }}"
       >

package/dist/cjs/product/components/ProductImagesV2/jsx/ProductImages.js

@@ -42,7 +42,6 @@ const ProductImagesV2 = (productImageProps)=>{
     const extraClass = advanced?.cssClass;
     // State
     const [openLightBox, setOpenLightBox] = React.useState(false);
-    const [hasVariantAvailable, setHasVariantAvailable] = React.useState(true);
     const getFirstVideo = (product)=>{
         return product?.medias?.edges.find((item)=>[
                 'VIDEO',
@@ -57,24 +56,19 @@ const ProductImagesV2 = (productImageProps)=>{
     };
     const priorityFeatureImage = React.useMemo(()=>{
         if (setting?.typeDisplay === 'all-images') {
-            setHasVariantAvailable(true);
             let priorityItem;
             switch(setting?.preDisplay){
                 case '1st-images':
                     priorityItem = getFirstImage(product);
-                    setHasVariantAvailable(false);
                     break;
                 case '1st-3d-mode':
                     priorityItem = getFirst3DModal(product);
-                    setHasVariantAvailable(false);
                     break;
                 case '1st-video':
                     priorityItem = getFirstVideo(product);
-                    setHasVariantAvailable(false);
                     break;
                 case '1st-available-variant':
                     priorityItem = currentVariant?.media;
-                    setHasVariantAvailable(false);
                     break;
             }
             setProductFeaturedImage(priorityItem);
@@ -141,7 +135,7 @@ const ProductImagesV2 = (productImageProps)=>{
         }
     };
     React.useEffect(()=>{
-        if (currentVariant && hasVariantAvailable) {
+        if (currentVariant) {
             const index = galleryIndex[currentVariant?.mediaId];
             if (index !== undefined) {
                 const fImage = gallery[index] ?? product?.featuredImage;
@@ -155,8 +149,7 @@ const ProductImagesV2 = (productImageProps)=>{
         galleryIndex,
         gallery,
         product?.featuredImage,
-        setProductFeaturedImage,
-        hasVariantAvailable
+        setProductFeaturedImage
     ]);
     const isRenderLightBox = React.useMemo(()=>{
         const isRender = core.getResponsiveValueByScreen(setting?.ftClickOpenLightBox, currentDevice) === 'popup' || core.getResponsiveValueByScreen(setting?.clickOpenLightBox, currentDevice);

package/dist/cjs/product/setting/ProductButton.js

@@ -232,7 +232,7 @@ const config = {
                                     value: 'go-to-url'
                                 }
                             ],
-                            default: 'continue-shopping'
+                            default: 'open-cart-drawer'
                         },
                         {
                             id: 'customURL',

package/dist/cjs/sticky/setting/preset-config.js

@@ -761,7 +761,7 @@ const StickyPreset = {
                                                             settings: {
                                                                 label: 'Add to cart',
                                                                 outOfStockLabel: 'Out of stock',
-                                                                actionEffect: 'continue-shopping',
+                                                                actionEffect: 'open-cart-drawer',
                                                                 customURL: {
                                                                     link: '/cart',
                                                                     target: '_self'
@@ -1856,7 +1856,7 @@ const StickyPresetProduct = {
                                                             settings: {
                                                                 label: 'Add to cart',
                                                                 outOfStockLabel: 'Out of stock',
-                                                                actionEffect: 'continue-shopping',
+                                                                actionEffect: 'open-cart-drawer',
                                                                 customURL: {
                                                                     link: '/cart',
                                                                     target: '_self'

package/dist/cjs/third-party/components/ShopifySubscriptions.liquid.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@gem-sdk/core');
+var thirdParty = require('../helpers/thirdParty.js');
 
 const ShopifySubscriptions = ({ setting, advanced })=>{
-    const { align } = setting ?? {};
-    return core.template`
+    const { align, widgetType, appBlockId } = setting ?? {};
+    return widgetType === 'app-block' ? thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`) : core.template`
     <div
       class="${advanced?.cssClass}"
       style="${{

package/dist/cjs/third-party/setting/ShopifySubscriptions.js

@@ -42,6 +42,11 @@ const config = {
         {
             id: 'setting',
             controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
                 {
                     id: 'install',
                     type: 'open-link',
@@ -58,6 +63,23 @@ const config = {
                     href: 'https://admin.shopify.com/?redirect=/apps/subscriptions-remix',
                     appName: ShopifySubscriptions.AppConfig.label
                 },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    default: 'app-block',
+                    options: [
+                        {
+                            label: 'app block',
+                            value: 'app-block'
+                        }
+                    ]
+                },
+                {
+                    id: 'productHandle',
+                    type: 'product-handle',
+                    hide: true
+                },
                 {
                     id: 'align',
                     label: 'Alignment',

package/dist/esm/article/components/ArticleList.js

@@ -10,7 +10,7 @@ const ArticleList = ({ styles, setting, className, children, builderProps })=>{
     const { articleSetting, numberOfArticle } = setting ?? {};
     const { articleIds, articlePickType } = articleSetting ?? {};
     const articlesQuery = {
-        first: 10,
+        first: articleIds?.length ?? 50,
         where: {
             baseIDIn: [
                 ...articleSetting?.articleIds ?? []

package/dist/esm/banner/components/hero-banner/index.liquid.js

@@ -130,6 +130,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         tablet: createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),
         mobile: createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
     };
+    const enableLazyLoad = !setting?.preload && enableLazyloadImage;
     const renderInnerHeroBanner = ()=>{
         return template /* liquid */ `
       <div
@@ -193,9 +194,10 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             'clip-path': getClipPath(borderBg?.width, cornerBg)
         }}"
             > 
-            <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
+            <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background', {
             'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
-            'gp-transition-transform': hoverEffect
+            'gp-transition-transform': hoverEffect,
+            gp_lazybg: enableLazyLoad
         })}"
               style="${{
             ...getStyleBackgroundByDevice(background, {
@@ -204,9 +206,9 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 liquid: true
             }),
             ...makeStyleResponsive('bgi', {
-                desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
-                tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
-                mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
+                desktop: `url('${bgiEnableByDevice['desktop'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
+                tablet: `url('${bgiEnableByDevice['tablet'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
+                mobile: `url('${bgiEnableByDevice['mobile'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
             }),
             '--duration': `${hoverEffectDuration ?? 0}s`,
             '--scale': hoverEffectScale ?? 1,
@@ -214,6 +216,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             ...getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
         }}"
             >
+            ${embed()}
             ${!setting?.preload ? DEVICES.map((device)=>{
             return RenderIf(getEnableBgImageByDevice(device), NextImage({
                 src: getImageSrc(getResponsiveValueByScreen(srcSet, device), device),
@@ -223,8 +226,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 enableLazyloadImage
             }));
         }).join('') : ''}
-            </div>  
-            ${embed()} </div>
+            </div></div>
           </div>
           ${RenderIf(overlayEnable, template`<div
               aria-label="Overlay"

package/dist/esm/banner/components/hero-banner/utils/index.js

@@ -25,13 +25,14 @@ const getHeightHeroBanner = (background, enableParallax)=>{
         'tablet'
     ];
     DEVICES.forEach((device)=>{
+        const enableParallaxDevice = background?.[device]?.type === 'image' ? enableParallax : false;
         const isScale = isScaleImage({
-            enableParallax,
+            enableParallax: enableParallaxDevice,
             attachment: background[device]?.attachment
         });
         result = {
             ...result,
-            [device]: enableParallax ? '150%' : isScale ? '100vh' : '100%'
+            [device]: enableParallaxDevice ? '150%' : isScale ? '100vh' : '100%'
         };
     });
     return makeStyleResponsive('h', result);
@@ -44,8 +45,9 @@ const getWidthHeroBanner = (background, enableParallax)=>{
         'tablet'
     ];
     DEVICES.forEach((device)=>{
+        const enableParallaxDevice = background?.[device]?.type === 'image' ? enableParallax : false;
         const isScale = isScaleImage({
-            enableParallax,
+            enableParallax: enableParallaxDevice,
             attachment: background[device]?.attachment
         });
         result = {

package/dist/esm/form/components/textarea/TextArea.liquid.js

@@ -2,10 +2,10 @@ import { makeStyleResponsive, makeWidth, composeAdvanceStyle, composeTypographyC
 import { getDynamicSourceLocales } from '../../../helpers.js';
 
 const FormTextarea = ({ setting, builderProps, className, builderAttrs, advanced, pageContext })=>{
-    const { text, name, placeholder, required, width, fullWidth, typography } = setting ?? {};
+    const { text, name, placeholder, required, width, fullWidth, typography, translate } = setting ?? {};
     const textAreaWidth = makeStyleResponsive('w', makeWidth(width, fullWidth));
     const defaultName = name === '' || name === undefined ? 'contact[note]' : name;
-    const { border, rounded, hasBoxShadow, boxShadow, pos, d, op, right, top, left, bottom, z, margin, padding, translate } = advanced ?? {};
+    const { border, rounded, hasBoxShadow, boxShadow, pos, d, op, right, top, left, bottom, z, margin, padding } = advanced ?? {};
     const spacingSetting = advanced?.['spacing-setting'];
     const inputStyle = composeAdvanceStyle({
         border,

package/dist/esm/image/components/Image.js

@@ -76,7 +76,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                 style: {
                     ...getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
                     borderRadius: 'inherit',
-                    overflow: 'hidden',
                     ...makeStyleResponsive('jc', styles?.align)
                 },
                 children: [

package/dist/esm/image/components/Image.liquid.js

@@ -46,7 +46,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         style="${{
         ...getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
         'border-radius': 'inherit',
-        overflow: 'hidden',
         ...makeStyleResponsive('jc', styles?.align)
     }}"
       >

package/dist/esm/product/components/ProductImagesV2/jsx/ProductImages.js

@@ -38,7 +38,6 @@ const ProductImagesV2 = (productImageProps)=>{
     const extraClass = advanced?.cssClass;
     // State
     const [openLightBox, setOpenLightBox] = useState(false);
-    const [hasVariantAvailable, setHasVariantAvailable] = useState(true);
     const getFirstVideo = (product)=>{
         return product?.medias?.edges.find((item)=>[
                 'VIDEO',
@@ -53,24 +52,19 @@ const ProductImagesV2 = (productImageProps)=>{
     };
     const priorityFeatureImage = useMemo(()=>{
         if (setting?.typeDisplay === 'all-images') {
-            setHasVariantAvailable(true);
             let priorityItem;
             switch(setting?.preDisplay){
                 case '1st-images':
                     priorityItem = getFirstImage(product);
-                    setHasVariantAvailable(false);
                     break;
                 case '1st-3d-mode':
                     priorityItem = getFirst3DModal(product);
-                    setHasVariantAvailable(false);
                     break;
                 case '1st-video':
                     priorityItem = getFirstVideo(product);
-                    setHasVariantAvailable(false);
                     break;
                 case '1st-available-variant':
                     priorityItem = currentVariant?.media;
-                    setHasVariantAvailable(false);
                     break;
             }
             setProductFeaturedImage(priorityItem);
@@ -137,7 +131,7 @@ const ProductImagesV2 = (productImageProps)=>{
         }
     };
     useEffect(()=>{
-        if (currentVariant && hasVariantAvailable) {
+        if (currentVariant) {
             const index = galleryIndex[currentVariant?.mediaId];
             if (index !== undefined) {
                 const fImage = gallery[index] ?? product?.featuredImage;
@@ -151,8 +145,7 @@ const ProductImagesV2 = (productImageProps)=>{
         galleryIndex,
         gallery,
         product?.featuredImage,
-        setProductFeaturedImage,
-        hasVariantAvailable
+        setProductFeaturedImage
     ]);
     const isRenderLightBox = useMemo(()=>{
         const isRender = getResponsiveValueByScreen(setting?.ftClickOpenLightBox, currentDevice) === 'popup' || getResponsiveValueByScreen(setting?.clickOpenLightBox, currentDevice);

package/dist/esm/product/setting/ProductButton.js

@@ -228,7 +228,7 @@ const config = {
                                     value: 'go-to-url'
                                 }
                             ],
-                            default: 'continue-shopping'
+                            default: 'open-cart-drawer'
                         },
                         {
                             id: 'customURL',

package/dist/esm/sticky/setting/preset-config.js

@@ -759,7 +759,7 @@ const StickyPreset = {
                                                             settings: {
                                                                 label: 'Add to cart',
                                                                 outOfStockLabel: 'Out of stock',
-                                                                actionEffect: 'continue-shopping',
+                                                                actionEffect: 'open-cart-drawer',
                                                                 customURL: {
                                                                     link: '/cart',
                                                                     target: '_self'
@@ -1854,7 +1854,7 @@ const StickyPresetProduct = {
                                                             settings: {
                                                                 label: 'Add to cart',
                                                                 outOfStockLabel: 'Out of stock',
-                                                                actionEffect: 'continue-shopping',
+                                                                actionEffect: 'open-cart-drawer',
                                                                 customURL: {
                                                                     link: '/cart',
                                                                     target: '_self'

package/dist/esm/third-party/components/ShopifySubscriptions.liquid.js

@@ -1,8 +1,9 @@
 import { template, makeStyleResponsive } from '@gem-sdk/core';
+import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
 
 const ShopifySubscriptions = ({ setting, advanced })=>{
-    const { align } = setting ?? {};
-    return template`
+    const { align, widgetType, appBlockId } = setting ?? {};
+    return widgetType === 'app-block' ? getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`) : template`
     <div
       class="${advanced?.cssClass}"
       style="${{

package/dist/esm/third-party/setting/ShopifySubscriptions.js

@@ -38,6 +38,11 @@ const config = {
         {
             id: 'setting',
             controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
                 {
                     id: 'install',
                     type: 'open-link',
@@ -54,6 +59,23 @@ const config = {
                     href: 'https://admin.shopify.com/?redirect=/apps/subscriptions-remix',
                     appName: AppConfig.label
                 },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    default: 'app-block',
+                    options: [
+                        {
+                            label: 'app block',
+                            value: 'app-block'
+                        }
+                    ]
+                },
+                {
+                    id: 'productHandle',
+                    type: 'product-handle',
+                    hide: true
+                },
                 {
                     id: 'align',
                     label: 'Alignment',

package/dist/types/index.d.ts

@@ -2927,6 +2927,9 @@ type ShopifySubscriptionsProps = BaseProps<{
     align?: ObjectDevices<AlignProp>;
     openApp?: any;
     install?: any;
+    appBlockId?: string;
+    widgetType?: string;
+    productHandle?: string;
 }>;
 declare const ShopifySubscriptions$1: React.FC<ShopifySubscriptionsProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.1.17",
+  "version": "2.1.20",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
     "format": "prettier --write \"./src/**/*.{ts,tsx}\""
   },
   "devDependencies": {
-    "@gem-sdk/core": "2.1.17",
+    "@gem-sdk/core": "2.1.20",
     "@gem-sdk/styles": "2.1.0",
     "@types/react-transition-group": "^4.4.5"
   },