@swell/apps-sdk 1.0.175 → 1.0.177

package/dist/index.cjs

@@ -50,7 +50,7 @@ __export(index_exports, {
   GEO_DATA: () => GEO_DATA,
   HtmlCache: () => HtmlCache,
   LANG_TO_COUNTRY_CODES: () => LANG_TO_COUNTRY_CODES,
-  LiquidSwell: () => LiquidSwell30,
+  LiquidSwell: () => LiquidSwell31,
   MAX_QUERY_PAGE_LIMIT: () => MAX_QUERY_PAGE_LIMIT,
   MockRecordResource: () => MockRecordResource,
   MockRecordSingleton: () => MockRecordSingleton,
@@ -4766,8 +4766,8 @@ var SORT_OPTIONS = Object.freeze([
   { value: "popularity", name: "Popularity", query: "popularity desc" },
   { value: "price_asc", name: "Price, low to high", query: "price asc" },
   { value: "price_desc", name: "Price, high to low", query: "price desc" },
-  { value: "date_asc", name: "Date, old to new", query: "date asc" },
-  { value: "date_desc", name: "Date, new to old", query: "date desc" },
+  { value: "date_asc", name: "Date, old to new", query: "date_created asc" },
+  { value: "date_desc", name: "Date, new to old", query: "date_created desc" },
   { value: "name_asc", name: "Product name, A-Z", query: "name asc" },
   { value: "name_desc", name: "Product name, Z-A", query: "name desc" }
 ]);
@@ -5560,23 +5560,58 @@ function getBlog(swell, id, query) {
 // src/easyblocks/config.ts
 var import_json53 = __toESM(require("json5"), 1);
 var import_lodash_es4 = require("lodash-es");
+
+// src/compatibility/drops/template.ts
+var import_liquidjs3 = require("liquidjs");
+var TemplateDrop = class extends import_liquidjs3.Drop {
+  constructor(name, directory, suffix) {
+    super();
+    this.name = name;
+    this.directory = directory;
+    this.suffix = suffix;
+  }
+  valueOf() {
+    return this.name;
+  }
+};
+
+// src/compatibility/shopify-objects/template.ts
+function ShopifyTemplate(instance, template) {
+  return new TemplateDrop(
+    instance.getPageType(template.name),
+    template.path,
+    template.alt_name
+  );
+}
+
+// src/easyblocks/config.ts
 var NO_INLINE = true;
 async function getEasyblocksPageTemplate(theme, pageId, altTemplate) {
   let templateConfig = null;
+  let templateData = {
+    name: pageId
+  };
+  if (theme.shopifyCompatibility) {
+    templateData = ShopifyTemplate(theme.shopifyCompatibility, templateData);
+  }
+  const { name } = templateData;
   templateConfig = await theme.getThemeTemplateConfigByType(
     "templates",
-    pageId,
+    name,
     altTemplate
   );
   if (templateConfig) {
-    if (templateConfig.file_path.endsWith(".liquid")) {
-      return templateConfig.file_data;
+    let result = templateConfig.file_data;
+    if (!templateConfig.file_path.endsWith(".liquid")) {
+      try {
+        result = import_json53.default.parse(templateConfig.file_data);
+      } catch {
+      }
     }
-    try {
-      return import_json53.default.parse(templateConfig.file_data);
-    } catch {
-      return templateConfig.file_data;
+    if (result && typeof result === "object") {
+      result.id = name;
     }
+    return result;
   }
 }
 function getAcceptedLayoutSections(allSections, groupType) {
@@ -11518,11 +11553,11 @@ __export(shopify_objects_exports, {
 });
 
 // src/compatibility/drops/image.ts
-var import_liquidjs4 = require("liquidjs");
+var import_liquidjs5 = require("liquidjs");
 
 // src/compatibility/drops/image-src.ts
-var import_liquidjs3 = require("liquidjs");
-var ImageSrcDrop = class extends import_liquidjs3.Drop {
+var import_liquidjs4 = require("liquidjs");
+var ImageSrcDrop = class extends import_liquidjs4.Drop {
   constructor(url, width, height) {
     super();
     this.url = url;
@@ -11545,7 +11580,7 @@ var ImageSrcDrop = class extends import_liquidjs3.Drop {
 };
 
 // src/compatibility/drops/image.ts
-var ImageDrop = class extends import_liquidjs4.Drop {
+var ImageDrop = class extends import_liquidjs5.Drop {
   id;
   alt;
   src;
@@ -11756,7 +11791,9 @@ function ShopifyVariant(instance, variant, productIn, depth = 0) {
     ),
     barcode: void 0,
     compare_at_price: defer(
-      () => instance.toShopifyPrice(variant.orig_price)
+      () => instance.toShopifyPrice(
+        getPriceField(product, variant, "orig_price")
+      )
     ),
     featured_image: deferWith(
       [product, variant],
@@ -11803,13 +11840,14 @@ function ShopifyVariant(instance, variant, productIn, depth = 0) {
     // Deprecated by Shopify
     option3: getOptionByIndex(product, variant, 2),
     // Deprecated by Shopify
-    price: deferWith([product, variant], (product2, variant2) => {
-      let price = product2.price;
-      if (variant2.price !== null && variant2.price !== void 0) {
-        price = variant2.price;
+    price: deferWith(
+      [product, variant],
+      (product2, variant2) => {
+        return instance.toShopifyPrice(
+          getPriceField(product2, variant2, "price")
+        );
       }
-      return instance.toShopifyPrice(price);
-    }),
+    ),
     product: deferWith(product, (product2) => {
       return ShopifyProduct(
         instance,
@@ -11848,7 +11886,11 @@ function ShopifyVariant(instance, variant, productIn, depth = 0) {
     store_availabilities: [],
     taxable: true,
     title: defer(() => variant.name),
-    unit_price: defer(() => instance.toShopifyPrice(variant.price)),
+    unit_price: defer(
+      () => instance.toShopifyPrice(
+        getPriceField(product, variant, "price")
+      )
+    ),
     unit_price_measurement: void 0,
     url: defer(() => product.url),
     weight: defer(() => variant.weight),
@@ -11872,6 +11914,9 @@ function getOptions(product, variant) {
     return variant2.option_value_ids.map((id) => optionValuesById[id]).filter(Boolean);
   });
 }
+function getPriceField(product, variant, field) {
+  return variant[field] ?? product[field];
+}
 function getOptionByIndex(product, variant, index) {
   return deferWith(
     [product, variant],
@@ -12299,7 +12344,12 @@ function ShopifyProduct(instance, product, depth = 0) {
         return instance.toShopifyPrice(product2.price);
       }
       const max = product2.variants.results.reduce(
-        (max2, variant) => Math.max(max2, variant.price),
+        (max2, variant) => {
+          if (variant.price === void 0 || variant.price === null) {
+            return max2;
+          }
+          return Math.max(max2, variant.price);
+        },
         0
       );
       return instance.toShopifyPrice(max);
@@ -12309,7 +12359,12 @@ function ShopifyProduct(instance, product, depth = 0) {
         return instance.toShopifyPrice(product2.price);
       }
       const min = product2.variants.results.reduce(
-        (min2, variant) => Math.min(min2, variant.price),
+        (min2, variant) => {
+          if (variant.price === void 0 || variant.price === null) {
+            return min2;
+          }
+          return Math.min(min2, variant.price);
+        },
         Infinity
       );
       return instance.toShopifyPrice(min);
@@ -12319,7 +12374,7 @@ function ShopifyProduct(instance, product, depth = 0) {
         return false;
       }
       return product2.variants.results.some(
-        (variant) => variant.price !== product2.price
+        (variant) => variant.price !== void 0 && variant.price !== null && variant.price !== product2.price
       );
     }),
     published_at: deferWith(
@@ -13058,8 +13113,8 @@ function ShopifyShippingMethod(instance, order) {
 }
 
 // src/compatibility/drops/money.ts
-var import_liquidjs5 = require("liquidjs");
-var MoneyDrop = class extends import_liquidjs5.Drop {
+var import_liquidjs6 = require("liquidjs");
+var MoneyDrop = class extends import_liquidjs6.Drop {
   constructor(value, decimals, currency) {
     super();
     this.value = value;
@@ -13443,10 +13498,13 @@ function ShopifyPredictiveSearch(instance, search) {
   if (search instanceof ShopifyResource) {
     return search.clone();
   }
+  if (search instanceof StorefrontResource) {
+    search = cloneStorefrontResource(search);
+  }
   return new ShopifyResource({
-    performed: defer(() => search.performed),
+    performed: deferWith(search, (search2) => search2.performed),
     resources: ShopifyPredictiveSearchResources(instance, search),
-    terms: defer(() => search.query),
+    terms: deferWith(search, (search2) => search2.query),
     types: ["product"]
   });
 }
@@ -13517,6 +13575,9 @@ function ShopifySearch(instance, search) {
   if (search instanceof ShopifyResource) {
     return search.clone();
   }
+  if (search instanceof StorefrontResource) {
+    search = cloneStorefrontResource(search);
+  }
   const resolveProducts = makeProductsCollectionResolve(
     instance,
     search,
@@ -13652,8 +13713,8 @@ function ShopifyShop(instance, store) {
 }
 
 // src/compatibility/drops/all_products.ts
-var import_liquidjs6 = require("liquidjs");
-var AllProductsDrop = class extends import_liquidjs6.Drop {
+var import_liquidjs7 = require("liquidjs");
+var AllProductsDrop = class extends import_liquidjs7.Drop {
   #instance;
   #map;
   constructor(instance) {
@@ -13695,8 +13756,8 @@ var AllProductsDrop = class extends import_liquidjs6.Drop {
 };
 
 // src/compatibility/drops/articles.ts
-var import_liquidjs7 = require("liquidjs");
-var ArticlesDrop = class extends import_liquidjs7.Drop {
+var import_liquidjs8 = require("liquidjs");
+var ArticlesDrop = class extends import_liquidjs8.Drop {
   #instance;
   #map;
   constructor(instance) {
@@ -13738,8 +13799,8 @@ var ArticlesDrop = class extends import_liquidjs7.Drop {
 };
 
 // src/compatibility/drops/blogs.ts
-var import_liquidjs8 = require("liquidjs");
-var BlogsDrop = class extends import_liquidjs8.Drop {
+var import_liquidjs9 = require("liquidjs");
+var BlogsDrop = class extends import_liquidjs9.Drop {
   #instance;
   #map;
   constructor(instance) {
@@ -13785,7 +13846,7 @@ var BlogsDrop = class extends import_liquidjs8.Drop {
 };
 
 // src/compatibility/drops/collections.ts
-var import_liquidjs9 = require("liquidjs");
+var import_liquidjs10 = require("liquidjs");
 var AllCategoryResource = class extends StorefrontResource {
   constructor(instance) {
     super(() => {
@@ -13799,7 +13860,7 @@ var AllCategoryResource = class extends StorefrontResource {
     });
   }
 };
-var CollectionsDrop = class extends import_liquidjs9.Drop {
+var CollectionsDrop = class extends import_liquidjs10.Drop {
   #instance;
   #map;
   constructor(instance) {
@@ -13916,8 +13977,8 @@ var SwellStorefrontProducts = class extends SwellStorefrontCollection {
 };
 
 // src/compatibility/drops/images.ts
-var import_liquidjs10 = require("liquidjs");
-var ImagesDrop = class extends import_liquidjs10.Drop {
+var import_liquidjs11 = require("liquidjs");
+var ImagesDrop = class extends import_liquidjs11.Drop {
   #instance;
   #map;
   constructor(instance) {
@@ -13971,8 +14032,8 @@ var SwellImage = class extends StorefrontResource {
 };
 
 // src/compatibility/drops/object-handles.ts
-var import_liquidjs11 = require("liquidjs");
-var ObjectHandlesDrop = class extends import_liquidjs11.Drop {
+var import_liquidjs12 = require("liquidjs");
+var ObjectHandlesDrop = class extends import_liquidjs12.Drop {
   #map;
   constructor(map) {
     super();
@@ -14012,8 +14073,8 @@ var ObjectHandlesDrop = class extends import_liquidjs11.Drop {
 };
 
 // src/compatibility/drops/pages.ts
-var import_liquidjs12 = require("liquidjs");
-var PagesDrop = class extends import_liquidjs12.Drop {
+var import_liquidjs13 = require("liquidjs");
+var PagesDrop = class extends import_liquidjs13.Drop {
   #instance;
   #map;
   constructor(instance) {
@@ -14712,29 +14773,6 @@ ${injects.join("\n")}</script>`;
   }
 };
 
-// src/compatibility/drops/template.ts
-var import_liquidjs13 = require("liquidjs");
-var TemplateDrop = class extends import_liquidjs13.Drop {
-  constructor(name, directory, suffix) {
-    super();
-    this.name = name;
-    this.directory = directory;
-    this.suffix = suffix;
-  }
-  valueOf() {
-    return this.name;
-  }
-};
-
-// src/compatibility/shopify-objects/template.ts
-function ShopifyTemplate(instance, template) {
-  return new TemplateDrop(
-    instance.getPageType(template.name),
-    template.path,
-    template.alt_name
-  );
-}
-
 // src/liquid/drops/render.ts
 var import_liquidjs14 = require("liquidjs");
 var import_lodash_es8 = require("lodash-es");
@@ -15393,12 +15431,12 @@ function bind11(liquidSwell) {
         });
       });
       if (output && schema && settings) {
-        const { shopify_compatibility: shopifyCompatibility } = liquidSwell.theme.globals;
         const tag = schema.tag || "div";
-        const id = `${shopifyCompatibility ? "shopify" : "swell"}-section-${settings.id || this.fileName}`;
-        const className = shopifyCompatibility ? "shopify-section" : "swell-section";
+        const sectionClassName = liquidSwell.theme.getSectionClassName();
+        const sectionIdPrefix = liquidSwell.theme.getSectionIdPrefix();
+        const id = `${sectionIdPrefix}-${settings.id || this.fileName}`;
         emitter.write(
-          `<${tag} id="${id}" class="${className} ${schema.class || ""}">${output}</${tag}>`
+          `<${tag} id="${id}" class="${sectionClassName} ${schema.class || ""}">${output}</${tag}>`
         );
       }
     }
@@ -15430,12 +15468,13 @@ function bind12(liquidSwell) {
         const sectionConfigs = yield liquidSwell.renderPageSections(
           sectionGroup
         );
-        const { shopify_compatibility: shopifyCompatibility } = liquidSwell.theme.globals;
+        const sectionClassName = liquidSwell.theme.getSectionClassName();
+        const sectionIdPrefix = liquidSwell.theme.getSectionIdPrefix();
         emitter.write(
           `<div id="swell-section-group__${this.fileName}">${sectionConfigs.map((section) => {
             const tag = section.tag || "div";
-            const id = `${shopifyCompatibility ? "shopify" : "swell"}-section-sections--${themeConfig.hash}__${section.id}`;
-            const className = shopifyCompatibility ? `shopify-section shopify-section-group-${this.fileName} section-${section.id}` : `swell-section swell-section-group-${this.fileName} section-${section.id}`;
+            const id = `${sectionIdPrefix}-sections--${themeConfig.hash}__${section.id}`;
+            const className = `${sectionClassName} ${sectionClassName}-group-${this.fileName} section-${section.id}`;
             return `<${tag} id="${id}" class="${className} ${section.class || ""}">${section.output}</${tag}>`;
           }).join("")}</div>`
         );
@@ -15620,7 +15659,7 @@ var tags = {
 };
 function bindTags(liquidSwell) {
   Object.entries(tags).forEach(
-    ([tag, bind65]) => liquidSwell.registerTag(tag, bind65(liquidSwell))
+    ([tag, bind66]) => liquidSwell.registerTag(tag, bind66(liquidSwell))
   );
 }
 
@@ -16173,8 +16212,17 @@ function bind46(_liquidSwell) {
   };
 }
 
+// src/liquid/filters/minus.ts
+function bind47(_liquidSwell) {
+  return (first, second) => {
+    const firstValue = isNumber(first) ? first : 0;
+    const secondValue = isNumber(second) ? second : 0;
+    return firstValue - secondValue;
+  };
+}
+
 // src/liquid/filters/money.ts
-function bind47(liquidSwell) {
+function bind48(liquidSwell) {
   return function filterMoney(value) {
     const amount = getMoneyAmount(liquidSwell, value);
     return liquidSwell.renderCurrency(amount);
@@ -16191,7 +16239,7 @@ function getMoneyAmount(liquidSwell, value) {
 }
 
 // src/liquid/filters/money_with_currency.ts
-function bind48(liquidSwell) {
+function bind49(liquidSwell) {
   return function filterMoneyWithCurrency(value) {
     const { currency } = liquidSwell.theme.swell.getStorefrontLocalization();
     const amount = getMoneyAmount(liquidSwell, value);
@@ -16200,7 +16248,7 @@ function bind48(liquidSwell) {
 }
 
 // src/liquid/filters/money_without_currency.ts
-function bind49(liquidSwell) {
+function bind50(liquidSwell) {
   return function filterMoneyWithoutCurrency(value) {
     const amount = getMoneyAmount(liquidSwell, value);
     return liquidSwell.renderCurrency(amount).replace(/[^0-9.,]/g, "");
@@ -16208,7 +16256,7 @@ function bind49(liquidSwell) {
 }
 
 // src/liquid/filters/money_without_trailing_zeros.ts
-function bind50(liquidSwell) {
+function bind51(liquidSwell) {
   return function filterMoneyWithoutTrailingZeros(value) {
     const amount = getMoneyAmount(liquidSwell, value);
     return liquidSwell.renderCurrency(amount).split(".")[0].split(",")[0];
@@ -16216,21 +16264,21 @@ function bind50(liquidSwell) {
 }
 
 // src/liquid/filters/script_tag.ts
-function bind51(_liquidSwell) {
+function bind52(_liquidSwell) {
   return function filterScriptTag(assetUrl) {
     return `<script src="${assetUrl}" type="text/javascript"></script>`;
   };
 }
 
 // src/liquid/filters/stylesheet_tag.ts
-function bind52(_liquidSwell) {
+function bind53(_liquidSwell) {
   return function filterStyleSheetTag(assetUrl) {
     return `<link href="${assetUrl}" rel="stylesheet" type="text/css" media="all" />`;
   };
 }
 
 // src/liquid/filters/time_tag.ts
-function bind53(_liquidSwell) {
+function bind54(_liquidSwell) {
   const dateFilter = bind33(_liquidSwell);
   return (dateValue, ...params) => {
     const date = ensureDate(dateValue);
@@ -16241,7 +16289,7 @@ function bind53(_liquidSwell) {
 }
 
 // src/liquid/filters/translate.ts
-function bind54(liquidSwell) {
+function bind55(liquidSwell) {
   return async function filterTranslate(key, params) {
     const props = params && paramsToProps(params);
     const str = await liquidSwell.renderTranslation(key, props);
@@ -16250,7 +16298,7 @@ function bind54(liquidSwell) {
 }
 
 // src/liquid/filters/where.ts
-function bind55(_liquidSwell) {
+function bind56(_liquidSwell) {
   return function* filterWhere(arr, property, expected) {
     const results = [];
     const list = yield resolveEnumerable(arr);
@@ -16304,7 +16352,7 @@ function getSizesFromParam(param) {
     height: height ? Number(height) : void 0
   };
 }
-function bind56(liquidSwell) {
+function bind57(liquidSwell) {
   return async function filterAssetImgUrl(assetPath, size = "small") {
     const imageUrl = await liquidSwell.getAssetUrl(assetPath).then((url) => url || "");
     const sizes = getSizesFromParam(size);
@@ -16320,14 +16368,14 @@ function bind56(liquidSwell) {
 }
 
 // src/liquid/filters/shopify/hex_to_rgba.ts
-function bind57(_liquidSwell) {
+function bind58(_liquidSwell) {
   return (color, alpha) => {
     return ThemeColor.get(color).rgba(alpha || 1);
   };
 }
 
 // src/liquid/filters/shopify/img_url.ts
-function bind58(_liquidSwell) {
+function bind59(_liquidSwell) {
   return function filterImgUrl(input, ...params) {
     if (!input) return "";
     let url;
@@ -16372,14 +16420,14 @@ var item_count_for_variant_default = {
 };
 
 // src/liquid/filters/shopify/payment_button.ts
-function bind59(_liquidSwell) {
+function bind60(_liquidSwell) {
   return (form) => {
     return null;
   };
 }
 
 // src/liquid/filters/shopify/payment_terms.ts
-function bind60(_liquidSwell) {
+function bind61(_liquidSwell) {
   return (form) => {
     return null;
   };
@@ -16481,7 +16529,7 @@ var svgs = {
 var placeholder_svgs_default = svgs;
 
 // src/liquid/filters/shopify/placeholder_svg_tag.ts
-function bind61(_liquidSwell) {
+function bind62(_liquidSwell) {
   return function filterPlaceholderSvgTag(name, className) {
     const svg = placeholder_svgs_default[name];
     if (typeof svg === "object" && svg !== null) {
@@ -16492,7 +16540,7 @@ function bind61(_liquidSwell) {
 }
 
 // src/liquid/filters/shopify/shopify_asset_url.ts
-function bind62(_liquidSwell) {
+function bind63(_liquidSwell) {
   return function filterShopifyAssetUrl(input) {
     if (typeof input === "string") {
       switch (input) {
@@ -16517,7 +16565,7 @@ function bind62(_liquidSwell) {
 }
 
 // src/liquid/filters/shopify/structured_data.ts
-function bind63(_liquidSwell) {
+function bind64(_liquidSwell) {
   return async function filterStructuredData(input) {
     let value = input;
     if (value instanceof StorefrontResource) {
@@ -16595,7 +16643,7 @@ function convertToSchemaOrgProductGroup(product) {
 }
 
 // src/liquid/filters/inline_editable.ts
-function bind64(_liquidSwell) {
+function bind65(_liquidSwell) {
   return (value, key) => {
     if (typeof value === "object" && "value" in value) {
       value = value.value;
@@ -16639,29 +16687,30 @@ var filters = {
   json: bind44,
   json_pretty: bind45,
   locale_flag: bind46,
-  money: bind47,
-  money_with_currency: bind48,
-  money_without_currency: bind49,
-  money_without_trailing_zeros: bind50,
-  script_tag: bind51,
-  stylesheet_tag: bind52,
-  time_tag: bind53,
-  translate: bind54,
-  t: bind54,
+  minus: bind47,
+  money: bind48,
+  money_with_currency: bind49,
+  money_without_currency: bind50,
+  money_without_trailing_zeros: bind51,
+  script_tag: bind52,
+  stylesheet_tag: bind53,
+  time_tag: bind54,
+  translate: bind55,
+  t: bind55,
   // alias
-  where: bind55,
+  where: bind56,
   // Shopify compatibility only
-  asset_img_url: bind56,
-  hex_to_rgba: bind57,
-  img_url: bind58,
+  asset_img_url: bind57,
+  hex_to_rgba: bind58,
+  img_url: bind59,
   item_count_for_variant: item_count_for_variant_default,
-  payment_button: bind59,
-  payment_terms: bind60,
-  placeholder_svg_tag: bind61,
-  shopify_asset_url: bind62,
-  structured_data: bind63,
+  payment_button: bind60,
+  payment_terms: bind61,
+  placeholder_svg_tag: bind62,
+  shopify_asset_url: bind63,
+  structured_data: bind64,
   // Swell only
-  inline_editable: bind64
+  inline_editable: bind65
 };
 function bindFilters(liquidSwell) {
   for (const [tag, handler] of Object.entries(filters)) {
@@ -16675,8 +16724,8 @@ function bindFilters(liquidSwell) {
     }
   }
 }
-function bindWithResolvedProps(liquidSwell, bind65, resolve = []) {
-  const handler = bind65(liquidSwell);
+function bindWithResolvedProps(liquidSwell, bind66, resolve = []) {
+  const handler = bind66(liquidSwell);
   if (!Array.isArray(resolve)) {
     return handler;
   }
@@ -16738,7 +16787,8 @@ var swellOperators = {
     if (isArray(l)) return l.some((i) => equal(i, r));
     if (isFunction(l?.indexOf)) return l.indexOf(toValue(r)) > -1;
     return false;
-  }
+  },
+  ",": (l, r) => `${l},${r}`
 };
 function equal(lhs, rhs) {
   if (isComparable(lhs)) return lhs.equals(rhs);
@@ -16893,7 +16943,7 @@ function isThemeColorLike(value) {
 }
 
 // src/liquid/index.ts
-var LiquidSwell30 = class extends import_liquidjs34.Liquid {
+var LiquidSwell31 = class extends import_liquidjs34.Liquid {
   theme;
   getThemeConfig;
   getThemeTemplateConfigByType;
@@ -17567,7 +17617,7 @@ var SwellTheme3 = class {
     this.resources = resources;
     this.dynamicAssetUrl = dynamicAssetUrl;
     this.shopifyCompatibilityClass = shopifyCompatibilityClass || ShopifyCompatibility2;
-    this.liquidSwell = new LiquidSwell30({
+    this.liquidSwell = new LiquidSwell31({
       theme: this,
       getThemeConfig: this.getThemeConfig.bind(this),
       getAssetUrl: this.getAssetUrl.bind(this),
@@ -18485,6 +18535,12 @@ ${content.slice(pos)}`;
   isShopify1HomePage(pageId, pageContent) {
     return Boolean(pageId === "index" && typeof pageContent === "string");
   }
+  getSectionClassName() {
+    return this.shopifyCompatibility ? "shopify-section" : "swell-section";
+  }
+  getSectionIdPrefix() {
+    return this.shopifyCompatibility ? "shopify-section" : "swell-section";
+  }
   async renderAllSections(sectionsIds, pageData) {
     const sections = typeof sectionsIds === "string" ? sectionsIds.split(/\s*,\s*/) : sectionsIds;
     const sectionsRendered = await Promise.all(
@@ -18492,18 +18548,14 @@ ${content.slice(pos)}`;
         return this.renderSection(sectionId, pageData);
       })
     );
+    const sectionClassName = this.getSectionClassName();
+    const sectionIdPrefix = this.getSectionIdPrefix();
     return sectionsRendered.reduce(
       (acc, section, index) => {
         const sectionId = sections[index];
-        if (this.shopifyCompatibility) {
-          acc[sectionId] = `
-          <div id="shopify-section-${sectionId}" class="shopify-section">${String(section)}</div>
+        acc[sectionId] = `
+          <div id="${sectionIdPrefix}-${sectionId}" class="${sectionClassName}">${String(section)}</div>
         `.trim();
-        } else {
-          acc[sectionId] = `
-          <div id="swell-section-${sectionId}" class="swell-section">${String(section)}</div>
-        `.trim();
-        }
         return acc;
       },
       {}