create-magic-storefront 0.4.0 → 0.6.0

package/template/lib/theme-settings.ts

@@ -0,0 +1,36 @@
+import { loadThemeSettings } from '@magicstoreai/hydrogen/server';
+import type { SettingValues } from '@magicstoreai/hydrogen/theme';
+import { cache } from 'react';
+
+import { api, locale } from '@/lib/api';
+import { themePreview } from '@/lib/preview';
+import theme from '@/theme';
+import type { settings } from '@/theme/settings';
+
+export type GlobalSettings = SettingValues<typeof settings>;
+
+/**
+ * The theme's global settings (`theme/settings.ts`) as the merchant saved them, the admin's draft
+ * while it previews. Every value is resolved: a missing or unknown one falls back to its default.
+ * Read once per request, however many server components ask.
+ */
+export const globalSettings = cache(async (): Promise<GlobalSettings> => {
+  const preview = await themePreview();
+  return (await loadThemeSettings(api, theme, { locale, preview })) as GlobalSettings;
+});
+
+/**
+ * The visual settings as `data-*` attributes for <html>, read by `app/styles/tokens.css` and the
+ * component styles. An attribute is left out for its off state, never set to an empty string.
+ */
+export function themeAttributes(values: GlobalSettings): Record<`data-${string}`, string> {
+  return {
+    'data-radius': values.cornerRadius.toLowerCase(),
+    'data-image-ratio': values.productImageRatio.toLowerCase(),
+    'data-card-style': values.cardStyle.toLowerCase(),
+    'data-cart-type': values.cartType.toLowerCase(),
+    ...(values.stickyHeader && { 'data-sticky-header': '' }),
+    ...(values.showVendor && { 'data-show-vendor': '' }),
+    ...(values.showRating && { 'data-show-rating': '' }),
+  };
+}

package/template/lib/upstream.ts

@@ -10,3 +10,24 @@ export function upstreamBaseUrl(): string | null {
   const domain = process.env.MAGICSTORE_SHOP_DOMAIN;
   return domain ? `https://${domain}/api/v2/storefront` : null;
 }
+
+/**
+ * Who holds the buyer's credentials. `'server'` (the default): `app/storefront-api` keeps the session
+ * tokens and the cart and checkout ids in httpOnly cookies, and the browser only sees "current".
+ * `MAGICSTORE_CREDENTIALS=browser` opts out. A public storefront token sends the browser straight to
+ * the API, past the proxy, so it means `'browser'` — and asking for `'server'` with one is an error.
+ */
+export function credentialsMode(): 'browser' | 'server' {
+  const explicit = process.env.MAGICSTORE_CREDENTIALS || null;
+  const publicToken = Boolean(process.env.NEXT_PUBLIC_MAGICSTORE_STOREFRONT_TOKEN);
+  if (explicit !== null && explicit !== 'server' && explicit !== 'browser') {
+    throw new Error(`MAGICSTORE_CREDENTIALS must be "server" or "browser", not "${explicit}".`);
+  }
+  if (explicit === 'server' && publicToken) {
+    throw new Error(
+      'MAGICSTORE_CREDENTIALS=server needs every browser call to go through app/storefront-api: ' +
+        'unset NEXT_PUBLIC_MAGICSTORE_STOREFRONT_TOKEN, or set MAGICSTORE_CREDENTIALS=browser.',
+    );
+  }
+  return explicit === 'browser' || publicToken ? 'browser' : 'server';
+}

package/template/llms.txt

@@ -101,6 +101,18 @@ The cart id and the checkout id are credentials. Never log them and never put th
 query string. A guest proves an order with the `X-Checkout-Id` header. The same goes for tokens,
 OTP codes and full phone numbers.
 
+Who holds them is a choice (`MagicStoreProvider credentials`):
+
+- `'server'` — the starter's default. Every browser call goes through a same-origin
+  `createStorefrontProxy({ credentials: 'server' })` (`/server`; the starter's
+  `app/storefront-api`). It keeps the access and refresh tokens and the cart and checkout ids in
+  httpOnly cookies; JavaScript, `localStorage` and every body it sees hold the literal `"current"`
+  instead (`cart.id === 'current'`, `checkoutsStore({ body: { cartId: cart.id } })` just works). A
+  401 the proxy flags with `x-session-expired` refreshes once and retries once; the proxy never
+  refreshes on its own.
+- `'browser'` — the tokens and the cart id live in `localStorage`. Required when a public
+  storefront token sends the browser straight to the API (the proxy is not in the path).
+
 ## Cart → checkout → payment
 
 1. The first `useCart().addLine(…)` creates the cart; its id is stored for you. Every cart answer
@@ -142,6 +154,7 @@ for buyers), quote `error.requestId` when reporting. GET calls retry on 429 / 5x
 | `OTP_INVALID`                                    | Let the buyer re-type the code.                              |
 | `OTP_EXPIRED`                                    | Ask for a new code.                                          |
 | `NETWORK_ERROR`, `ABORTED`                       | No answer (client-side): offer to try again.                 |
+| `INVALID_RESPONSE`                               | The API answered 2xx with an unreadable body: report it.     |
 
 The full list, with the `meta` each code carries, is in the backend's `docs/api/v2/standards.md`.
 

package/template/theme/index.ts

@@ -1,9 +1,11 @@
 import { defineTheme, type SectionComponents } from '@magicstoreai/hydrogen/theme';
 
+import { CollapsibleContent, collapsibleContent } from './sections/collapsible-content';
 import { CollectionList, collectionList } from './sections/collection-list';
 import { FeaturedCollection, featuredCollection } from './sections/featured-collection';
 import { Hero, hero } from './sections/hero';
 import { ImageWithText, imageWithText } from './sections/image-with-text';
+import { Multicolumn, multicolumn } from './sections/multicolumn';
 import { pageContent } from './sections/page-content';
 import { PlatformHome, platformHome } from './sections/platform-home';
 import { ProductShelf, productShelf } from './sections/product-shelf';
@@ -20,7 +22,7 @@ import page from './templates/page.json';
  */
 const theme = defineTheme({
   name: 'starter',
-  version: '1.0.0',
+  version: '1.2.0',
   sections: [
     hero,
     richText,
@@ -29,6 +31,8 @@ const theme = defineTheme({
     collectionList,
     testimonials,
     productShelf,
+    multicolumn,
+    collapsibleContent,
     pageContent,
     platformHome,
   ],
@@ -49,5 +53,7 @@ export const components: SectionComponents<typeof theme.sections> = {
   'collection-list': CollectionList,
   testimonials: Testimonials,
   'product-shelf': ProductShelf,
+  multicolumn: Multicolumn,
+  'collapsible-content': CollapsibleContent,
   'platform-home': PlatformHome,
 };

package/template/theme/sections/collapsible-content.tsx

@@ -0,0 +1,75 @@
+import { defineBlock, defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
+
+import { Accordion } from '@/components/ui/accordion';
+
+import { label } from '../text';
+
+export const rowBlock = defineBlock({
+  type: 'row',
+  name: label('Row', 'Строка', 'Qator'),
+  settings: [
+    {
+      id: 'heading',
+      type: 'TEXT',
+      label: label('Question or heading', 'Вопрос или заголовок', 'Savol yoki sarlavha'),
+      maxLength: 200,
+      default: '',
+    },
+    { id: 'content', type: 'RICHTEXT', label: label('Answer', 'Ответ', 'Javob'), default: '' },
+  ],
+});
+
+export const collapsibleContent = defineSection({
+  type: 'collapsible-content',
+  name: label('Collapsible content', 'Раскрывающийся текст', 'Ochiladigan matn'),
+  icon: 'TEXT',
+  category: 'TEXT',
+  maxBlocks: 30,
+  settings: [
+    { id: 'heading', type: 'TEXT', label: label('Heading', 'Заголовок', 'Sarlavha'), default: '' },
+    {
+      id: 'openFirst',
+      type: 'CHECKBOX',
+      label: label('Open the first row', 'Раскрыть первую строку', 'Birinchi qatorni ochish'),
+      default: false,
+    },
+  ],
+  blocks: [rowBlock],
+  presets: [
+    {
+      name: label('FAQ', 'Вопросы и ответы', 'Savol va javoblar'),
+      blocks: [{ type: 'row' }, { type: 'row' }, { type: 'row' }],
+    },
+  ],
+});
+
+/** Rows that open one at a time (a FAQ, delivery terms); a row without both parts is left out. */
+export function CollapsibleContent({
+  id,
+  settings,
+  blocks,
+}: SectionProps<typeof collapsibleContent>) {
+  const rows = blocks.filter((block) => block.settings.heading && block.settings.content);
+  if (rows.length === 0) {
+    return null;
+  }
+  return (
+    <section className="collapsible-content">
+      {settings.heading && (
+        <div className="section-header">
+          <h2>{settings.heading}</h2>
+        </div>
+      )}
+      {rows.map(({ id: rowId, settings: row }, index) => (
+        <Accordion
+          key={rowId}
+          title={row.heading}
+          name={`collapsible-${id}`}
+          open={settings.openFirst && index === 0}
+        >
+          <div className="prose" dangerouslySetInnerHTML={{ __html: row.content }} />
+        </Accordion>
+      ))}
+    </section>
+  );
+}

package/template/theme/sections/collection-list.tsx

@@ -2,7 +2,8 @@ import { MagicStoreError } from '@magicstoreai/storefront-client';
 import { defineBlock, defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
 
 import { CollectionTiles } from '@/components/sections/collections';
-import { api } from '@/lib/api';
+import { api, locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 import { label } from '../text';
 
@@ -22,6 +23,25 @@ export const collectionList = defineSection({
   maxBlocks: 8,
   settings: [
     { id: 'heading', type: 'TEXT', label: label('Heading', 'Заголовок', 'Sarlavha'), default: '' },
+    {
+      id: 'columns',
+      type: 'RANGE',
+      label: label('Columns on desktop', 'Колонок на компьютере', 'Kompyuterda ustunlar'),
+      min: 2,
+      max: 6,
+      step: 1,
+      default: 4,
+    },
+    {
+      id: 'showCount',
+      type: 'CHECKBOX',
+      label: label(
+        'Show product count',
+        'Показывать число товаров',
+        "Mahsulotlar sonini ko'rsatish",
+      ),
+      default: false,
+    },
   ],
   blocks: [collectionBlock],
   presets: [
@@ -56,9 +76,17 @@ export async function CollectionList({ settings, blocks }: SectionProps<typeof c
     return null;
   }
   return (
-    <section className="stack">
-      {settings.heading && <h2>{settings.heading}</h2>}
-      <CollectionTiles collections={found} />
+    <section>
+      {settings.heading && (
+        <div className="section-header">
+          <h2>{settings.heading}</h2>
+        </div>
+      )}
+      <CollectionTiles
+        collections={found}
+        columns={settings.columns}
+        count={settings.showCount ? messages(locale).productsCount : undefined}
+      />
     </section>
   );
 }

package/template/theme/sections/featured-collection.tsx

@@ -32,11 +32,30 @@ export const featuredCollection = defineSection({
       step: 1,
       default: 8,
     },
+    {
+      id: 'layout',
+      type: 'SELECT',
+      label: label('Layout', 'Вид', "Ko'rinish"),
+      default: 'GRID',
+      options: [
+        { value: 'GRID', label: label('Grid', 'Сетка', 'Panjara') },
+        { value: 'SLIDER', label: label('Slider', 'Карусель', 'Karusel') },
+      ],
+    },
+    {
+      id: 'showViewAll',
+      type: 'CHECKBOX',
+      label: label('Link to the collection', 'Ссылка на коллекцию', "To'plamga havola"),
+      default: true,
+    },
   ],
   presets: [{ name: label('Featured collection', 'Подборка из коллекции', "To'plamdan tanlov") }],
 });
 
-/** Products of the collection the merchant picked; nothing until one is picked. */
+/**
+ * Products of the collection the merchant picked, as a grid or a sideways row, with a link to the
+ * collection; nothing until one is picked.
+ */
 export async function FeaturedCollection({ settings }: SectionProps<typeof featuredCollection>) {
   const { collection } = settings;
   if (collection === null) {
@@ -49,8 +68,9 @@ export async function FeaturedCollection({ settings }: SectionProps<typeof featu
   return (
     <Shelf
       title={settings.heading || collection.title}
-      href={`/collections/${collection.handle}`}
+      href={settings.showViewAll ? `/collections/${collection.handle}` : undefined}
       products={data}
+      slider={settings.layout === 'SLIDER'}
     />
   );
 }

package/template/theme/sections/hero.tsx

@@ -1,6 +1,7 @@
 import { Image } from '@magicstoreai/hydrogen';
 import { defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
 import Link from 'next/link';
+import type { CSSProperties } from 'react';
 
 import { api } from '@/lib/api';
 
@@ -69,23 +70,109 @@ export const hero = defineSection({
         { value: 'CENTER', label: label('Center', 'По центру', 'Markazda') },
       ],
     },
+    {
+      id: 'layout',
+      type: 'SELECT',
+      label: label('Text', 'Текст', 'Matn'),
+      info: label(
+        'Below the image suits a banner that already has text on it.',
+        'Под изображением — для баннера, на котором уже есть текст.',
+        'Rasm ostida — ustida matni bor banner uchun.',
+      ),
+      default: 'OVERLAY',
+      options: [
+        { value: 'OVERLAY', label: label('Over the image', 'Поверх изображения', 'Rasm ustida') },
+        { value: 'STACKED', label: label('Below the image', 'Под изображением', 'Rasm ostida') },
+      ],
+    },
+    {
+      id: 'stackOnMobile',
+      type: 'CHECKBOX',
+      label: label(
+        'Text below the image on phones',
+        'На телефонах текст под изображением',
+        'Telefonlarda matn rasm ostida',
+      ),
+      default: true,
+    },
+    {
+      id: 'contentPosition',
+      type: 'SELECT',
+      label: label('Text position', 'Положение текста', 'Matn joylashuvi'),
+      default: 'BOTTOM',
+      options: [
+        { value: 'TOP', label: label('Top', 'Сверху', 'Yuqorida') },
+        { value: 'MIDDLE', label: label('Middle', 'По центру', "O'rtada") },
+        { value: 'BOTTOM', label: label('Bottom', 'Снизу', 'Pastda') },
+      ],
+    },
+    {
+      id: 'overlayOpacity',
+      type: 'RANGE',
+      label: label('Image overlay', 'Затемнение изображения', 'Rasm qoraytirilishi'),
+      info: label(
+        'Darkens the image under the text, in %.',
+        'Затемняет изображение под текстом, в %.',
+        'Matn ostidagi rasmni qoraytiradi, %.',
+      ),
+      min: 0,
+      max: 80,
+      step: 10,
+      default: 40,
+    },
+    {
+      id: 'height',
+      type: 'SELECT',
+      label: label('Height', 'Высота', 'Balandlik'),
+      default: 'MEDIUM',
+      options: [
+        { value: 'ADAPT', label: label('As the image', 'Как у изображения', 'Rasmdagidek') },
+        { value: 'SMALL', label: label('Small', 'Низкий', 'Past') },
+        { value: 'MEDIUM', label: label('Medium', 'Средний', "O'rta") },
+        { value: 'LARGE', label: label('Large', 'Высокий', 'Baland') },
+      ],
+    },
   ],
   presets: [{ name: label('Hero', 'Главный баннер', 'Asosiy banner') }],
 });
 
-/** The page's opening: the merchant's heading over their image, the shop's name when left empty. */
+/**
+ * The page's opening (Dawn's image banner): the merchant's image full width with the heading,
+ * text and button over it — or below it, for a banner that already carries its own text, and on
+ * phones by default. The shop's name and description stand in for an empty heading and text.
+ */
 export async function Hero({ settings }: SectionProps<typeof hero>) {
   const { data: shop } = await api.shop();
   const heading = settings.heading || shop.name;
   const subheading = settings.subheading || shop.description;
+  const classes = [
+    'hero',
+    `hero--${settings.alignment.toLowerCase()}`,
+    `hero--${settings.contentPosition.toLowerCase()}`,
+    `hero--${settings.height.toLowerCase()}`,
+    settings.image ? `hero--${settings.layout.toLowerCase()}` : 'hero--no-image',
+    settings.stackOnMobile && 'hero--stack-mobile',
+  ].filter(Boolean);
   return (
-    <section className={`hero hero-${settings.alignment.toLowerCase()}`}>
-      {settings.image && <Image data={settings.image} alt={settings.imageAlt} loading="eager" />}
-      <div className="hero-text stack">
-        <h1>{heading}</h1>
-        {subheading && <p>{subheading}</p>}
+    <section
+      className={classes.join(' ')}
+      style={{ '--hero-overlay': settings.overlayOpacity / 100 } as CSSProperties}
+    >
+      {settings.image && (
+        <div className="hero__media">
+          <Image
+            data={settings.image}
+            alt={settings.imageAlt}
+            loading="eager"
+            fetchPriority="high"
+          />
+        </div>
+      )}
+      <div className="hero__content">
+        <h1 className="hero__heading">{heading}</h1>
+        {subheading && <p className="hero__text">{subheading}</p>}
         {settings.buttonLabel && settings.buttonLink && (
-          <Link href={settings.buttonLink} className="button primary">
+          <Link href={settings.buttonLink} className="button button--primary button--lg">
             {settings.buttonLabel}
           </Link>
         )}

package/template/theme/sections/image-with-text.tsx

@@ -41,6 +41,18 @@ export const imageWithText = defineSection({
         { value: 'IMAGE_RIGHT', label: label('Right', 'Справа', "O'ngda") },
       ],
     },
+    {
+      id: 'imageRatio',
+      type: 'SELECT',
+      label: label('Image shape', 'Форма изображения', 'Rasm shakli'),
+      default: 'ADAPT',
+      options: [
+        { value: 'ADAPT', label: label('As the image', 'Как у изображения', 'Rasmdagidek') },
+        { value: 'PORTRAIT', label: label('Portrait', 'Вертикальная', 'Vertikal') },
+        { value: 'SQUARE', label: label('Square', 'Квадрат', 'Kvadrat') },
+        { value: 'LANDSCAPE', label: label('Landscape', 'Горизонтальная', 'Gorizontal') },
+      ],
+    },
   ],
   presets: [{ name: label('Image with text', 'Изображение с текстом', 'Rasm va matn') }],
 });
@@ -52,10 +64,14 @@ export function ImageWithText({ settings }: SectionProps<typeof imageWithText>)
   }
   return (
     <section
-      className={`image-with-text ${settings.layout === 'IMAGE_RIGHT' ? 'image-right' : ''}`}
+      className={`image-with-text image-with-text--${settings.imageRatio.toLowerCase()} ${settings.layout === 'IMAGE_RIGHT' ? 'image-with-text--image-right' : ''}`}
     >
-      {settings.image && <Image data={settings.image} alt={settings.imageAlt} />}
-      <div className="stack">
+      {settings.image && (
+        <div className="image-with-text__media">
+          <Image data={settings.image} alt={settings.imageAlt} />
+        </div>
+      )}
+      <div className="image-with-text__text">
         {settings.heading && <h2>{settings.heading}</h2>}
         {settings.body && (
           <div className="prose" dangerouslySetInnerHTML={{ __html: settings.body }} />

package/template/theme/sections/multicolumn.tsx

@@ -0,0 +1,113 @@
+import { Image } from '@magicstoreai/hydrogen';
+import { defineBlock, defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
+import Link from 'next/link';
+import type { CSSProperties } from 'react';
+
+import { label } from '../text';
+
+export const columnBlock = defineBlock({
+  type: 'column',
+  name: label('Column', 'Колонка', 'Ustun'),
+  settings: [
+    { id: 'image', type: 'IMAGE', label: label('Image', 'Изображение', 'Rasm') },
+    {
+      id: 'imageAlt',
+      type: 'TEXT',
+      label: label('Image description', 'Описание изображения', 'Rasm tavsifi'),
+      default: '',
+    },
+    {
+      id: 'heading',
+      type: 'TEXT',
+      label: label('Heading', 'Заголовок', 'Sarlavha'),
+      maxLength: 120,
+      default: '',
+    },
+    { id: 'text', type: 'RICHTEXT', label: label('Text', 'Текст', 'Matn'), default: '' },
+    {
+      id: 'linkLabel',
+      type: 'TEXT',
+      label: label('Link text', 'Текст ссылки', 'Havola matni'),
+      maxLength: 40,
+      default: '',
+    },
+    { id: 'link', type: 'URL', label: label('Link', 'Ссылка', 'Havola') },
+  ],
+});
+
+export const multicolumn = defineSection({
+  type: 'multicolumn',
+  name: label('Multicolumn', 'Колонки', 'Ustunlar'),
+  icon: 'TEXT',
+  category: 'TEXT',
+  maxBlocks: 8,
+  settings: [
+    { id: 'heading', type: 'TEXT', label: label('Heading', 'Заголовок', 'Sarlavha'), default: '' },
+    {
+      id: 'columns',
+      type: 'RANGE',
+      label: label('Columns on desktop', 'Колонок на компьютере', 'Kompyuterda ustunlar'),
+      min: 2,
+      max: 4,
+      step: 1,
+      default: 3,
+    },
+    {
+      id: 'alignment',
+      type: 'SELECT',
+      label: label('Alignment', 'Выравнивание', 'Tekislash'),
+      default: 'LEFT',
+      options: [
+        { value: 'LEFT', label: label('Left', 'Слева', 'Chapda') },
+        { value: 'CENTER', label: label('Center', 'По центру', 'Markazda') },
+      ],
+    },
+  ],
+  blocks: [columnBlock],
+  presets: [
+    {
+      name: label('Multicolumn', 'Колонки', 'Ustunlar'),
+      blocks: [{ type: 'column' }, { type: 'column' }, { type: 'column' }],
+    },
+  ],
+});
+
+/**
+ * Columns of the merchant's image, heading, text and link (delivery, returns, guarantees); a row
+ * that scrolls sideways on phones. A column with neither heading nor text is left out.
+ */
+export function Multicolumn({ settings, blocks }: SectionProps<typeof multicolumn>) {
+  const columns = blocks.filter((block) => block.settings.heading || block.settings.text);
+  if (columns.length === 0) {
+    return null;
+  }
+  return (
+    <section className={`multicolumn multicolumn--${settings.alignment.toLowerCase()}`}>
+      {settings.heading && (
+        <div className="section-header">
+          <h2>{settings.heading}</h2>
+        </div>
+      )}
+      <ul className="multicolumn__list" style={{ '--columns': settings.columns } as CSSProperties}>
+        {columns.map(({ id, settings: column }) => (
+          <li key={id} className="multicolumn__item">
+            {column.image && (
+              <div className="multicolumn__media">
+                <Image data={column.image} alt={column.imageAlt} />
+              </div>
+            )}
+            {column.heading && <h3 className="multicolumn__heading">{column.heading}</h3>}
+            {column.text && (
+              <div className="prose" dangerouslySetInnerHTML={{ __html: column.text }} />
+            )}
+            {column.linkLabel && column.link && (
+              <Link href={column.link} className="multicolumn__link">
+                {column.linkLabel}
+              </Link>
+            )}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/template/theme/sections/page-content.tsx

@@ -1,6 +1,7 @@
 import type { Schema } from '@magicstoreai/storefront-client';
 import { defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
 
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
 import { locale } from '@/lib/api';
 import { messages } from '@/lib/i18n';
 
@@ -32,13 +33,18 @@ export function PageContent({
   page,
   settings,
 }: SectionProps<typeof pageContent> & { page: Schema<'PageDetail'> }) {
+  const t = messages(locale);
   return (
-    <article className="stack">
-      {settings.showTitle && <h1>{page.title}</h1>}
+    <article className="content-page">
+      <Breadcrumbs
+        items={[{ name: t.home, href: '/' }, { name: page.title }]}
+        label={t.breadcrumbs}
+      />
+      {settings.showTitle && <h1 className="content-page__title">{page.title}</h1>}
       {page.body ? (
-        <div dangerouslySetInnerHTML={{ __html: page.body }} />
+        <div className="prose" dangerouslySetInnerHTML={{ __html: page.body }} />
       ) : (
-        <p className="muted">{messages(locale).nothingHere}</p>
+        <p className="muted">{t.nothingHere}</p>
       )}
     </article>
   );

package/template/theme/sections/product-shelf.tsx

@@ -54,6 +54,26 @@ export const productShelf = defineSection({
       step: 1,
       default: 8,
     },
+    {
+      id: 'layout',
+      type: 'SELECT',
+      label: label('Layout', 'Вид', "Ko'rinish"),
+      default: 'GRID',
+      options: [
+        { value: 'GRID', label: label('Grid', 'Сетка', 'Panjara') },
+        { value: 'SLIDER', label: label('Slider', 'Карусель', 'Karusel') },
+      ],
+    },
+    {
+      id: 'showViewAll',
+      type: 'CHECKBOX',
+      label: label(
+        'Link to the collection (products from a collection)',
+        'Ссылка на коллекцию (для товаров из коллекции)',
+        "To'plamga havola (to'plam mahsulotlari uchun)",
+      ),
+      default: true,
+    },
   ],
   presets: [{ name: label('Product shelf', 'Полка товаров', 'Mahsulotlar qatori') }],
 });
@@ -62,18 +82,19 @@ export const productShelf = defineSection({
 export async function ProductShelf({ settings }: SectionProps<typeof productShelf>) {
   const t = messages(locale);
   const perPage = settings.limit;
+  const slider = settings.layout === 'SLIDER';
   switch (settings.source) {
     case 'NEW_ARRIVALS': {
       const { data } = await api.productsIndex({ query: { sort: '-createdAt', perPage } });
-      return <Shelf title={settings.heading || t.newArrivals} products={data} />;
+      return <Shelf title={settings.heading || t.newArrivals} products={data} slider={slider} />;
     }
     case 'ON_SALE': {
       const { data } = await api.productsIndex({ query: { 'filter[onSale]': 'true', perPage } });
-      return <Shelf title={settings.heading || t.onSale} products={data} />;
+      return <Shelf title={settings.heading || t.onSale} products={data} slider={slider} />;
     }
     case 'BESTSELLERS': {
       const { data } = await api.productsIndex({ query: { sort: '-bestSellers', perPage } });
-      return <Shelf title={settings.heading || t.bestsellers} products={data} />;
+      return <Shelf title={settings.heading || t.bestsellers} products={data} slider={slider} />;
     }
     case 'COLLECTION': {
       const { collection } = settings;
@@ -87,8 +108,9 @@ export async function ProductShelf({ settings }: SectionProps<typeof productShel
       return (
         <Shelf
           title={settings.heading || collection.title}
-          href={`/collections/${collection.handle}`}
+          href={settings.showViewAll ? `/collections/${collection.handle}` : undefined}
           products={data}
+          slider={slider}
         />
       );
     }