Portfolio Page with 180 items

Description

• add up to 180 items or more in Portfolio Page
• add Filter Category
• add Search Bar
• order items (A-Z, Z-A)
• …

#1. Install Code

if you use Personal/Basic Plan and your plan doesn’t support Injection, you can see #2.1.

#1.1. First, we will create second, third…portfolio pages and add up to maximium items (60)

#1.2. Find second, third…portfolio page url slug

Hover on Portfolio Page > Click Gear icon

You can find URL Slug here

#1.3. Hover on FIRST PORTFOLIO PAGE > Click Gear icon

Click Advanced > Paste this code

<!-- 583v2 (v2) Portfolio Filter - Multiple Pages -->
<script>
window.PortfolioConfig = {
  additionalPageUrls: ['/artists-h-q', '/artists-r-z'],
  initialDisplayCount: 180,
  loadMoreCount: 30,
  showLoadMore: false,
  loadMoreText: 'View more items',
  showFilter: true,
  showAllFilter: true,
  allFilterText: 'All',
  showSearch: true,
  searchPlaceholder: 'Search...',
  loadingText: 'Loading filters...',
  filterFontSize: '16px',
  searchFontSize: '14px',
  searchBorderColor: '#ccc',
  searchBorderRadius: '4px',
  sortOrder: 'az' // 'none' | 'az' | 'za'
};
</script>
<script src="https://code.beaverhero.com/portfolio/583v2v2portfolio180items.js"></script>

#1.4. Update SECOND, THIRD Portfolio Page URL Slug

additionalPageUrls: ['/artists-h-q', '/artists-r-z'],

#2. Customize

#2.1. if you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Section under Portfolio > Then add a Markdown Block.

Next, paste this code into Markdown

<script>
window.PortfolioConfig = {
  additionalPageUrls: ['/artists-h-q', '/artists-r-z'],
  initialDisplayCount: 180,
  loadMoreCount: 30,
  showLoadMore: false,
  loadMoreText: 'View more items',
  showFilter: true,
  showAllFilter: true,
  allFilterText: 'All',
  showSearch: true,
  searchPlaceholder: 'Search...',
  loadingText: 'Loading filters...',
  filterFontSize: '16px',
  searchFontSize: '14px',
  searchBorderColor: '#ccc',
  searchBorderRadius: '4px',
  sortOrder: 'az' // 'none' | 'az' | 'za'
};
</script>
<script src="https://code.beaverhero.com/portfolio/583v2v2portfolio180items.js"></script>

remember to update Second, Third Portfolio Page URL Slug

additionalPageUrls: ['/artists-h-q', '/artists-r-z'],

#2.2. To add Filter Category

You can hover on an item > Click 3 dots > Click Settings

Click SEO > Enter Category in SEO Description

#2.3. Other options

window.PortfolioConfig = {
  additionalPageUrls: ['/artists-h-q', '/artists-r-z'],
  initialDisplayCount: 180,
  loadMoreCount: 30,
  showLoadMore: false,
  loadMoreText: 'View more items',
  showFilter: true,
  showAllFilter: true,
  allFilterText: 'All',
  showSearch: true,
  searchPlaceholder: 'Search...',
  loadingText: 'Loading filters...',
  filterFontSize: '16px',
  searchFontSize: '14px',
  searchBorderColor: '#ccc',
  searchBorderRadius: '4px',
  sortOrder: 'az' // 'none' | 'az' | 'za'
};