AppmakerDeveloper

How to create a separate template for specific collections on app

To show different layouts for collections (like sub-collections, banners, or custom blocks), you can assign templates via metafields and conditionally render them on productList page using pageTypes.

To show different layouts for collections (like sub-collections, banners, or custom blocks), you can assign templates via metafields and conditionally render them on productList page using pageTypes.

Step 1: Add Custom Metafields

Define metafields to assign templates.

Example:

Create metafield.js in the helper folder:

import { fieldsHelper } from '@appmaker-xyz/shopify';

const addMetafields = () => {
  fieldsHelper.addFieldsToCollection({
    fields: {
      appmaker_collection_template: {
        __aliasFor: 'metafield',
        __args: {
          key: 'appmaker_template',
          namespace: 'custom',
        },
        value: true,
      },
    },
  });
};

export { addMetafields };

Update helper/index.js:

import { addMetafields } from './metafield';
const runHelpers = () => {
  addMetafields();
};

export { runHelpers };

Call runHelpers inside your theme's activate method.

Step 2: Create productList.js as the Default Page

Use pageTypes to switch layouts based on the metafield:

pageTypes: [
  {
    type: 'templateSwitcher',
    pageSource: 'pageId',
    pageId: 'CustomTemplate',
    condition: '{{ blockData.collection.appmaker_collection_template.value === "template1" }}',
  },
],

Example pages/productList.js:

import { ToolBarIcons as ICONS } from '@appmaker-xyz/shopify';

const pagesData = {
  title: 'Product list',
  attributes: {
    insideSafeAreaView: true,
    rootContainerStyle: { flex: 1 },
    contentContainerStyle: { flex: 1, backgroundColor: 'white' },
  },
  blocks: [
    {
      name: 'appmaker/banner',
      attributes: {
        __display: '{{checkIfTrueFalse(plugins.shopify.settings.show_collection_banner)}}',
        uri: '{{blockItem.collection.image.url}}',
        image: '{{ {url:blockItem.collection.image.url} }}',
      },
    },
    {
      name: 'appmaker/page-head',
      attributes: {
        title: '{{blockItem.collection.title}}',
        layoutSelector: false,
        viewSingle: true,
      },
    },
    {
      name: 'appmaker/shopify-product-list',
      attributes: {},
    },
  ],
  pageTypes: [
    {
      type: 'templateSwitcher',
      pageSource: 'pageId',
      pageId: 'CustomTemplate',
      condition: '{{ blockData.collection.appmaker_collection_template.value === "template1" }}',
    },
  ],
  stickyFooter: {
    blocks: [
      { name: 'shopify/collection-sort-filter', attributes: {} },
      {
        name: 'appmaker/floating-button',
        attributes: {
          __display: '{{checkIfTrueFalse(plugins.shopify.settings.enable_wishlist_floating_button)}}',
          iconName: 'heart',
          type: 'iconButton',
          visibilityStatus: true,
          appmakerAction: { action: 'OPEN_WISHLIST' },
        },
      },
    ],
  },
  _id: 'productList',
  uid: 'productListUid',
  toolBarItems: [ICONS.SEARCH, ICONS.WISHLIST, ICONS.CART],
};
export default pagesData;

Step 3: Create a Custom Template Page

Add CustomTemplate.js in the pages folder.

const pagesData = {
  title: 'Custom Collection View',
  attributes: {
    insideSafeAreaView: true,
    rootContainerStyle: { flex: 1 },
    contentContainerStyle: { flex: 1, backgroundColor: 'white', padding: 8 },
  },
  blocks: [
    {
      name: 'theme/custom-product-list',
      attributes: {},
    },
  ],
  _id: 'customTemplate',
  uid: 'customTemplateUid',
};
export default pagesData;

Step 4: Register Custom Block

Add your block in blocks/index.js:

import CustomProductList from '../blocks/components/CustomProductList';

const blocks = [
  {
    name: 'theme/custom-product-list',
    View: CustomProductList,
  },
];

export { blocks };

Step 5: Create the Component

Inside blocks/components/CustomProductList.js:

import React, { useState } from 'react';
import { View, Text, Pressable } from 'react-native';
import { ProductList } from '@appmaker-xyz/shopify';

const CustomProductList = (props) => {

  return (
    // your component code
    <View style={{ flex: 1 }}>
        <Text>Test</Text>
      </View>
  );
};

export default CustomProductList;

Step 6: Register Pages

Update pages/index.js:

import productList from './productList';
import CustomTemplate from './CustomTemplate';

const pages = {
  productList,
  CustomTemplate, // add your page id
};

export { pages };

Step 7: Final Theme Registration

In the theme’s index.js:

import { registerTheme } from '@appmaker-xyz/core';
import { pages } from './src/pages';
import { blocks } from './src/blocks';
import { runHelpers } from './src/helper';

export function activate() {
  runHelpers();
}

const Theme = {
  id: 'custom-collection-theme',
  activate,
  blocks,
  pages,
};

registerTheme(Theme);
export default Theme;

On this page

Step 1: Add Custom MetafieldsStep 2: Create productList.js as the Default PageStep 3: Create a Custom Template PageStep 4: Register Custom BlockStep 5: Create the ComponentStep 6: Register PagesStep 7: Final Theme Registration