{"id":5160,"date":"2025-12-16T14:12:50","date_gmt":"2025-12-16T05:12:50","guid":{"rendered":"https:\/\/storecrm.com\/help\/?p=5160"},"modified":"2026-09-04T12:46:13","modified_gmt":"2026-09-04T03:46:13","slug":"favorite-list-page-customize","status":"publish","type":"post","link":"https:\/\/storecrm.com\/help\/en\/setting\/favorite-list-page-customize\/","title":{"rendered":"Customize the favorite list page with Liquid \u2014 three examples"},"content":{"rendered":"

StoreCRM's Advanced mode (Liquid) lets you edit the favorite list page structure, displayed product and variant information, and appearance.<\/p>\n\n\n\n

This page explains the three input areas, values provided by StoreCRM, how to display more than 20 favorites, and customization examples you can copy.<\/p>\n\n\n\n

Using Simple mode<\/h2>

This page focuses on Advanced mode (Liquid). To adjust the list without editing code, use Simple mode on the [List screen] tab. Turn on [Standard display: show filtering and sorting] to provide sorting controls for both product-level and variant-level favorites.<\/p>

A storefront preview appears on the right side of the settings screen. Check placement and wording before saving. Continue to Advanced mode below to edit Liquid or CSS.<\/p>\n

\"Simple<\/figure>\n\n\n

Open Advanced mode<\/h2>\n\n\n\n

In StoreCRM, open Settings \u2192 Favorite settings \u2192 Favorite list page, then select Advanced mode (Liquid).<\/p>\n\n\n\n

Advanced mode can be edited only while the store's default language is selected.<\/p>\n\n\n\n

\"Page<\/figure>\n\n\n\n

Roles of the three input areas<\/h2>\n\n\n\n

The screen contains Page Liquid file, Item template, and Custom CSS input areas.<\/p>\n\n\n\n

Input area<\/th>Role<\/th>Main editable content<\/th><\/tr><\/thead>
Page Liquid file<\/td>Defines the overall favorite list page.<\/td>Edit the heading, empty-state message, item insertion point, and Load more button.<\/td><\/tr>
Item template<\/td>Defines each item displayed in the list.<\/td>Edit the product image, name, stock status, add-to-cart button, and remove-from-favorites button.<\/td><\/tr>
Custom CSS<\/td>Controls the appearance of the page and items.<\/td>Edit colors, spacing, font sizes, columns, and mobile layout.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Separate item templates are saved for product-level and variant-level favorites.<\/p>\n\n\n\n

The screen shows only the template for the currently selected favorite unit.<\/p>\n\n\n\n

For Product favorites edit the product template; for Variant favorites edit the variant template.<\/p>\n\n\n\n

Page Liquid file<\/h3>\n\n\n\n

This template wraps the entire page.<\/p>\n\n\n\n

StoreCRM uses the following three elements for rendering. Do not remove them.<\/p>\n\n\n\n

  • {{ custom_css }}<\/code>: insertion point for custom CSS<\/li>
  • {{ favorite_items }}<\/code>: insertion point for rendered item templates<\/li>
  • data-storecrm-items<\/code>: attribute used by StoreCRM to identify the item area<\/li><\/ul>\n\n\n\n

    {{ favorite_items }}<\/code>On the element containingdata-storecrm-items<\/code>also add<\/p>\n\n\n\n

    Item template<\/h3>\n\n\n\n

    Reference the array provided by StoreCRM using the sameindex<\/code>and render each item.<\/p>\n\n\n\n

    Item templates are not repeated automatically, so the template requires the following loop.<\/p>\n\n\n\n

    {% if storecrm_item_count and storecrm_item_count > 0 %}\n  {% for index in (0..storecrm_item_last_index) %}\n    {% assign item_title = storecrm_item_titles[index] %}\n    {{ item_title }}\n  {% endfor %}\n{% endif %}<\/code><\/pre>\n\n\n\n
    Custom CSS<\/h3>\n\n\n\n
    Style the page by targeting class names used in the Page Liquid file and item template.<\/p>\n\n\n\n
    <style><\/code>Enter CSS only without style tags.<\/p>\n\n\n\n
    Values passed from StoreCRM to Liquid<\/h2>\n\n\n\n
    Advanced mode provides synchronized display values and values for controlling the list.<\/p>\n\n\n\n
    Synchronized display values<\/h3>\n\n\n\n
    Variable<\/th>Description<\/th><\/tr><\/thead>
    storecrm_item_titles[index]<\/code><\/td>Product name. For variant-level favorites it can include the variant name.<\/td><\/tr>
    storecrm_item_urls[index]<\/code><\/td>Product page URL. For variant-level favorites it points to the selected variant.<\/td><\/tr>
    storecrm_item_thumbnail_urls[index]<\/code><\/td>Product image URL.<\/td><\/tr>
    storecrm_item_availables[index]<\/code><\/td>is used when available for purchase; otherwise'true'<\/code>is used'false'<\/code>It is.<\/td><\/tr>
    storecrm_item_product_ids[index]<\/code><\/td>Shopify product ID.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Use StoreCRM synchronized values for product name, URL, image, and stock status.<\/p>\n\n\n\n
    Use the sameindex<\/code>to correctly combine values for the same item.<\/p>\n\n\n\n
    {% assign item_title = storecrm_item_titles[index] | default: product.title %}\n{% assign item_url = storecrm_item_urls[index] | default: product.url %}\n{% assign item_thumbnail = storecrm_item_thumbnail_urls[index] %}\n{% assign item_available = storecrm_item_availables[index] %}<\/code><\/pre>\n\n\n\n
    default<\/code>The expression to the right ofproduct.title<\/code>and ... andproduct.url<\/code>is a fallback when the synchronized value is empty.<\/p>\n\n\n\n
    StoreCRM synchronized values are normally used, so the fallback can be omitted.<\/p>\n\n\n\n
    Keep the fallback to preserve display immediately after synchronization or when some data is empty.<\/p>\n\n\n\n
    Values for list control and actions<\/h3>\n\n\n\n
    Variable<\/th>Description<\/th>Main use<\/th><\/tr><\/thead>
    storecrm_favorite_total_count<\/code><\/td>Total number of favorites<\/td>Determines whether there are no favorites.<\/td><\/tr>
    storecrm_item_count<\/code><\/td>Number of items loaded this time<\/td>Determines whether the current page has items.<\/td><\/tr>
    storecrm_item_handles[index]<\/code><\/td>Product handle<\/td>Passes the product to the add-to-cart operation.<\/td><\/tr>
    storecrm_item_variant_ids[index]<\/code><\/td>Variant ID<\/td>Used for adding to cart and removing variant-level favorites.<\/td><\/tr>
    storecrm_item_last_index<\/code><\/td>Last index of the array loaded this time<\/td>0<\/code>Loop from the starting index through this value.<\/td><\/tr>
    storecrm_has_next_page<\/code><\/td>Whether another page exists<\/td>Determines whether the Load more button appears.<\/td><\/tr>
    storecrm_next_cursor<\/code><\/td>Cursor for retrieving the next page<\/td>Set this on the Load more button without modifying the value.<\/td><\/tr>
    mode<\/code><\/td>Favorite unit<\/td>product<\/code>orvariant<\/code>is determined.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Display more than 20 favorites<\/h2>\n\n\n\n
    Current Advanced mode can display more than 20 favorites while using StoreCRM synchronized values.<\/p>\n\n\n\n
    StoreCRM retrieves up to 20 items at a time and appends them to the same list.<\/p>\n\n\n\n
    Initial display and preview automatically load up to five pages or 100 items. The Load more button remains when more items exist.<\/p>\n\n\n\n
    {% if storecrm_has_next_page and storecrm_next_cursor != blank %}\n  <button\n    type=\"button\"\n    class=\"manual-favorites__more storecrm_customlist_load_more\"\n    data-storecrm-next-cursor=\"{{ storecrm_next_cursor }}\"\n    style=\"display:none;\"\n  >\n    Load more\n  <\/button>\n{% endif %}<\/code><\/pre>\n\n\n\n
    storecrm_next_cursor<\/code>identifies the next data set. Do not split or transform it.<\/p>\n\n\n\n
    The legacy single-template format is limited to 20 items.<\/p>\n\n\n\n
    If using the legacy format, migrate to the current separate Page Liquid file, Item template, and Custom CSS format.<\/p>\n\n\n\n
    How to modify the default code<\/h2>\n\n\n\n
    The default Advanced mode code works as a favorite list without modification.<\/p>\n\n\n\n
    You do not need to understand all of the code. Edit the relevant input area for the desired change.<\/p>\n\n\n\n
    • To change text, edit headings and button labels in the Page Liquid file or Item template.<\/li>
    • To change colors, spacing, or columns, edit Custom CSS.<\/li>
    • To reposition product images or names, edit the item template HTML.<\/li><\/ul>\n\n\n\n
      Required parts of the Page Liquid file<\/h3>\n\n\n\n
      StoreCRM uses the following three elements to display favorites.<\/p>\n\n\n\n
      • {{ custom_css }}<\/code>: loads the content entered in Custom CSS.<\/li>
      • {{ favorite_items }}<\/code>: displays favorite products.<\/li>
      • data-storecrm-items<\/code>: tells StoreCRM where to display products.<\/li><\/ul>\n\n\n\n
        {{ favorite_items }}<\/code>must bedata-storecrm-items<\/code>placed inside the element with the required attribute. Do not move these two parts separately.<\/p>\n\n\n\n
        The Load more section loads favorites after the first 20. Keep it to display more than 20 items.<\/p>\n\n\n\n
        Required parts of the item template<\/h3>\n\n\n\n
        The default code combines product name, URL, image, and stock status from StoreCRM for each item. You can rearrange the surrounding HTML or add class names.<\/p>\n\n\n\n
        the add-to-cart button'sdata-cart-<\/code>Keep attributes beginning with the required prefix and the remove button'sdata-product-id<\/code>, ,data-variant-id<\/code>. Removing them prevents buttons from identifying the target product.<\/p>\n\n\n\n
        Product-level and variant-level templates are saved separately. Review both when using both favorite units.<\/p>\n\n\n\n
        What you can change with custom CSS<\/h3>\n\n\n\n
        Custom CSS controls columns, image size, text color, spacing, and mobile layout. Edit only CSS when product information and button behavior should remain unchanged.<\/p>\n\n\n\n
        Three favorite list design examples<\/h2>\n\n\n\n
        For the three examples below, first use the shared Page Liquid and item template, then switch Custom CSS for each example.<\/p>\n\n\n\n
        Use StoreCRM synchronized values for name, URL, image, and stock status, with Shopify product information as a fallback for price and product type.<\/p>\n\n\n\n
        Store name, menu, currency, and search shown above each example come from the Shopify theme and are not included in the code.<\/p>\n\n\n\n
        Page Liquid shared by all three examples<\/h3>\n\n\n\n
        Paste the following code into Page Liquid file.<\/p>\n\n\n\n
        {% assign list_title = 'Favorites' %}\n{% assign list_title_suffix = '' %}\n{% assign item_unit_text = 'items' %}\n{% assign item_count_text = 'items' %}\n{% assign empty_text = 'There are currently no favorite items.' %}\n{% assign more_text = 'Load more' %}\n\n{{ custom_css }}\n\n<section class="manual-favorites">\n  <header class="manual-favorites__header">\n    <h1 class="manual-favorites__title">\n      {{ list_title }}<span class="manual-favorites__title-suffix">{{ list_title_suffix }}<\/span>\n    <\/h1>\n    <p class="manual-favorites__count">\n      <span>{{ storecrm_favorite_total_count }}<\/span>\n      <span class="manual-favorites__unit manual-favorites__unit--items">{{ item_unit_text }}<\/span>\n      <span class="manual-favorites__unit manual-favorites__unit--count">{{ item_count_text }}<\/span>\n    <\/p>\n  <\/header>\n\n  <nav class="manual-favorites__breadcrumb" aria-label="Breadcrumb">\n    <a href="\/help\/en\/">Home<\/a>\n    <span aria-hidden="true">\/<\/span>\n    <span>{{ list_title }}<\/span>\n  <\/nav>\n\n  {% if storecrm_favorite_total_count == 0 %}\n    <p class="manual-favorites__empty">{{ empty_text }}<\/p>\n  {% endif %}\n\n  <div class="manual-favorites__items" data-storecrm-items>\n    {{ favorite_items }}\n  <\/div>\n\n  {% if storecrm_has_next_page and storecrm_next_cursor != blank %}\n    <button\n      type="button"\n      class="manual-favorites__more storecrm_customlist_load_more"\n      data-storecrm-next-cursor="{{ storecrm_next_cursor }}"\n      style="display:none;"\n    >\n      {{ more_text }}\n    <\/button>\n  {% endif %}\n<\/section><\/code><\/pre>\n\n\n\n
        Item template shared by all three examples<\/h3>\n\n\n\n
        Next paste the following code into Item template.<\/p>\n\n\n\n
        This code checksmode<\/code>to determine the favorite unit and works for both product-level and variant-level templates.<\/p>\n\n\n\n
        {% if storecrm_item_count and storecrm_item_count > 0 %}\n  {% for index in (0..storecrm_item_last_index) %}\n    {% assign item_handle = storecrm_item_handles[index] %}\n    {% assign product = all_products[item_handle] %}\n    {% assign product_id = storecrm_item_product_ids[index] %}\n    {% assign variant_id = storecrm_item_variant_ids[index] %}\n    {% assign item_title = storecrm_item_titles[index] | default: product.title %}\n    {% assign item_url = storecrm_item_urls[index] | default: product.url | default: '#' %}\n    {% assign item_thumbnail = storecrm_item_thumbnail_urls[index] %}\n    {% assign item_available = storecrm_item_availables[index] %}\n    {% assign item_category = product.type | default: product.vendor %}\n    {% assign display_variant = product.selected_or_first_available_variant | default: product.variants.first %}\n\n    {% if mode == 'variant' and variant_id != blank and product != blank %}\n      {% for variant in product.variants %}\n        {% assign candidate_id = variant.id | append: '' %}\n        {% if candidate_id == variant_id %}\n          {% assign display_variant = variant %}\n          {% break %}\n        {% endif %}\n      {% endfor %}\n    {% endif %}\n\n    {% assign cart_variant_id = variant_id | default: display_variant.id %}\n    {% assign row_id = product_id %}\n    {% if mode == 'variant' and variant_id != blank %}\n      {% assign row_id = variant_id %}\n    {% endif %}\n\n    <article class="manual-favorite-item storecrm_customlist_id-{{ row_id }}">\n      <a class="manual-favorite-item__image" href="\/help\/en\/{{ item_url }}\/">\n        {% if item_thumbnail != blank %}\n          <img src="{{ item_thumbnail }}" alt="{{ item_title | escape }}" loading="lazy">\n        {% endif %}\n      <\/a>\n\n      <div class="manual-favorite-item__body">\n        {% if item_category != blank %}\n          <p class="manual-favorite-item__category">{{ item_category }}<\/p>\n        {% endif %}\n\n        <h2 class="manual-favorite-item__name">\n          <a href="\/help\/en\/{{ item_url }}\/">{{ item_title }}<\/a>\n        <\/h2>\n\n        {% if item_available == 'true' %}\n          <p class="manual-favorite-item__status is-available">In stock<\/p>\n        {% else %}\n          <p class="manual-favorite-item__status is-unavailable">Out of stock<\/p>\n        {% endif %}\n\n        {% if display_variant != blank %}\n          <p class="manual-favorite-item__price">\n            <span class="manual-favorite-item__price-current">{{ display_variant.price | money }}<\/span>\n            <span class="manual-favorite-item__price-tax">Tax included<\/span>\n            {% if display_variant.compare_at_price and display_variant.compare_at_price > display_variant.price %}\n              <span class="manual-favorite-item__price-before">{{ display_variant.compare_at_price | money }}<\/span>\n            {% endif %}\n          <\/p>\n        {% endif %}\n\n        <div class="manual-favorite-item__actions">\n          {% if item_available == 'true' and cart_variant_id != blank %}\n            <a\n              class="manual-favorite-item__cart"\n              href="\/help\/en\/{{ item_url }}\/"\n              data-cart-variant-id="{{ cart_variant_id }}"\n              data-cart-product-id="{{ product_id }}"\n              data-cart-product-handle="{{ item_handle }}"\n            >\n              Add to cart\n            <\/a>\n          {% endif %}\n\n          <a class="manual-favorite-item__view" href="\/help\/en\/{{ item_url }}\/">View product<\/a>\n\n          <a\n            class="manual-favorite-item__remove"\n            href="\/help\/en\/{{ item_url }}\/"\n            data-product-id="{{ product_id }}"\n            {% if mode ="=" 'variant' and variant_id != "blank" %}\n data-variant-id="{{ variant_id }}"\n            endif>\n            <span class="manual-favorite-item__heart" aria-hidden="true">♥<\/span>\n            <span class="manual-favorite-item__remove-label">Remove from favorites<\/span>\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/article>\n  {% endfor %}\n{% endif %}<\/code><\/pre>\n\n\n\n
        Simple card layout<\/h3>\n\n\n\n
        Displays products as three-column cards with image, name, price, stock status, and cart button.<\/p>\n\n\n\n
        \"Favorite<\/figure>\n\n\n\n
        Paste the following code into Custom CSS.<\/p>\n\n\n\n
        .manual-favorites {\n  max-width: 1200px;\n  margin: 32px auto 80px;\n  padding: 0 20px;\n  color: #222;\n}\n.manual-favorites__header {\n  display: flex;\n  align-items: flex-end;\n  gap: 12px;\n  margin-bottom: 18px;\n}\n.manual-favorites__title {\n  margin: 0;\n  font-size: 32px;\n}\n.manual-favorites__title-suffix {\n  display: none;\n}\n.manual-favorites__count {\n  margin: 0 0 3px;\n  font-size: 14px;\n  font-weight: 700;\n}\n.manual-favorites__unit--count {\n  display: none;\n}\n.manual-favorites__breadcrumb {\n  display: flex;\n  gap: 12px;\n  margin-bottom: 28px;\n  color: #777;\n  font-size: 13px;\n}\n.manual-favorites__breadcrumb a {\n  color: inherit;\n  text-decoration: none;\n}\n.manual-favorites__items {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 24px 20px;\n}\n.manual-favorite-item {\n  position: relative;\n  border: 1px solid #ececec;\n  background: #fff;\n}\n.manual-favorite-item__image {\n  display: block;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  background: #f6f6f6;\n}\n.manual-favorite-item__image img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.manual-favorite-item__body {\n  padding: 14px;\n}\n.manual-favorite-item__category {\n  display: none;\n}\n.manual-favorite-item__name {\n  margin: 0 0 12px;\n  font-size: 16px;\n}\n.manual-favorite-item__name a {\n  color: inherit;\n  text-decoration: none;\n}\n.manual-favorite-item__status {\n  display: inline-flex;\n  margin: 0 0 12px;\n  padding: 5px 8px;\n  border: 1px solid #ddd;\n  font-size: 12px;\n}\n.manual-favorite-item__status.is-unavailable {\n  border-color: #e9b4b4;\n  color: #b00020;\n  background: #fff7f7;\n}\n.manual-favorite-item__price {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  margin: 0 0 14px;\n}\n.manual-favorite-item__price-current {\n  font-size: 16px;\n  font-weight: 700;\n}\n.manual-favorite-item__price-tax,\n.manual-favorite-item__price-before {\n  color: #777;\n  font-size: 11px;\n}\n.manual-favorite-item__price-before {\n  text-decoration: line-through;\n}\n.manual-favorite-item__actions {\n  display: grid;\n  gap: 10px;\n}\n.manual-favorite-item__cart {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 46px;\n  padding: 10px 14px;\n  border: 1px solid #111;\n  color: #fff;\n  background: #111;\n  text-decoration: none;\n}\n.manual-favorite-item__view {\n  display: none;\n}\n.manual-favorite-item__remove {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  color: #dc2f3b;\n  text-decoration: none;\n}\n.manual-favorite-item__heart {\n  font-size: 24px;\n  line-height: 1;\n}\n.manual-favorite-item__remove-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n}\n.manual-favorites__more {\n  display: flex;\n  justify-content: center;\n  min-width: 180px;\n  margin: 32px auto 0;\n  padding: 12px 20px;\n}\n@media (max-width: 749px) {\n  .manual-favorites__items {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 18px 10px;\n  }\n  .manual-favorite-item__body {\n    padding: 10px;\n  }\n}<\/code><\/pre>\n\n\n\n
        Simple list layout<\/h3>\n\n\n\n
        Uses a smaller image with name, price, and action buttons in one row.<\/p>\n\n\n\n
        \"Favorite<\/figure>\n\n\n\n
        Paste the following code into Custom CSS.<\/p>\n\n\n\n
        .manual-favorites {\n  max-width: 900px;\n  margin: 32px auto 80px;\n  padding: 0 20px;\n  color: #222;\n}\n.manual-favorites__header {\n  display: flex;\n  align-items: flex-end;\n  gap: 12px;\n  margin-bottom: 18px;\n}\n.manual-favorites__title {\n  margin: 0;\n  font-size: 32px;\n}\n.manual-favorites__title-suffix {\n  display: none;\n}\n.manual-favorites__count {\n  margin: 0 0 3px;\n  font-size: 14px;\n  font-weight: 700;\n}\n.manual-favorites__unit--count {\n  display: none;\n}\n.manual-favorites__breadcrumb {\n  display: flex;\n  gap: 12px;\n  margin-bottom: 26px;\n  color: #777;\n  font-size: 13px;\n}\n.manual-favorites__breadcrumb a {\n  color: inherit;\n  text-decoration: none;\n}\n.manual-favorites__items {\n  border-top: 1px solid #ddd;\n}\n.manual-favorite-item {\n  position: relative;\n  display: grid;\n  grid-template-columns: 110px minmax(0, 1fr);\n  gap: 24px;\n  min-height: 165px;\n  padding: 14px 0;\n  border-bottom: 1px solid #ddd;\n}\n.manual-favorite-item__image {\n  display: block;\n  align-self: center;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  background: #f5f5f5;\n}\n.manual-favorite-item__image img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.manual-favorite-item__body {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 150px;\n  grid-template-rows: 1fr auto;\n  column-gap: 24px;\n}\n.manual-favorite-item__category,\n.manual-favorite-item__status {\n  display: none;\n}\n.manual-favorite-item__name {\n  grid-column: 1;\n  grid-row: 1;\n  margin: 0 0 8px;\n  font-size: 15px;\n}\n.manual-favorite-item__name a {\n  color: inherit;\n  text-decoration: none;\n}\n.manual-favorite-item__price {\n  grid-column: 1;\n  grid-row: 2;\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  margin: 0;\n}\n.manual-favorite-item__price-current {\n  font-size: 15px;\n  font-weight: 700;\n}\n.manual-favorite-item__price-tax,\n.manual-favorite-item__price-before {\n  color: #777;\n  font-size: 11px;\n}\n.manual-favorite-item__price-before {\n  text-decoration: line-through;\n}\n.manual-favorite-item__actions {\n  grid-column: 2;\n  grid-row: 1 \/ 3;\n  align-self: end;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.manual-favorite-item__cart {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 46px;\n  padding: 10px 14px;\n  border: 1px solid #111;\n  color: #fff;\n  background: #111;\n  text-decoration: none;\n}\n.manual-favorite-item__view {\n  display: none;\n}\n.manual-favorite-item__remove {\n  position: absolute;\n  top: 14px;\n  right: 8px;\n  color: #dc2f3b;\n  text-decoration: none;\n}\n.manual-favorite-item__heart {\n  font-size: 24px;\n  line-height: 1;\n}\n.manual-favorite-item__remove-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n}\n.manual-favorites__more {\n  display: flex;\n  justify-content: center;\n  min-width: 180px;\n  margin: 32px auto 0;\n  padding: 12px 20px;\n}\n@media (max-width: 749px) {\n  .manual-favorite-item {\n    grid-template-columns: 88px minmax(0, 1fr);\n    gap: 12px;\n  }\n  .manual-favorite-item__image {\n    grid-column: 1;\n    grid-row: 1 \/ 3;\n  }\n  .manual-favorite-item__body {\n    display: contents;\n  }\n  .manual-favorite-item__name {\n    grid-column: 2;\n    grid-row: 1;\n  }\n  .manual-favorite-item__price {\n    grid-column: 2;\n    grid-row: 2;\n  }\n  .manual-favorite-item__actions {\n    grid-column: 1 \/ -1;\n    grid-row: 3;\n    justify-content: stretch;\n    margin-top: 12px;\n  }\n  .manual-favorite-item__cart {\n    width: 100%;\n  }\n}<\/code><\/pre>\n\n\n\n
        Favorite list for a typical Japanese ecommerce site<\/h3>\n\n\n\n
        Places product information in a bordered box with stock status, price, and three action buttons.<\/p>\n\n\n\n
        \"Japanese<\/figure>\n\n\n\n
        Remove all in the image was provided by legacy code.<\/p>\n\n\n\n
        Current Advanced mode does not support bulk removal, so it is not included below.<\/p>\n\n\n\n
        Paste the following code into Custom CSS.<\/p>\n\n\n\n
        .manual-favorites {\n  max-width: 920px;\n  margin: 32px auto 80px;\n  padding: 0 20px;\n  color: #2f2f2f;\n}\n.manual-favorites__header {\n  display: flex;\n  align-items: baseline;\n  gap: 12px;\n  margin-bottom: 14px;\n  padding-bottom: 14px;\n  border-bottom: 1px solid #ddd;\n}\n.manual-favorites__title {\n  margin: 0;\n  font-size: 24px;\n}\n.manual-favorites__count {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 700;\n}\n.manual-favorites__unit--items,\n.manual-favorites__breadcrumb {\n  display: none;\n}\n.manual-favorites__items {\n  display: grid;\n  gap: 12px;\n}\n.manual-favorite-item {\n  display: grid;\n  grid-template-columns: 120px minmax(0, 1fr);\n  gap: 16px;\n  padding: 14px;\n  border: 1px solid #ddd;\n  background: #fff;\n}\n.manual-favorite-item__image {\n  display: block;\n  align-self: center;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  background: #f6f6f6;\n}\n.manual-favorite-item__image img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.manual-favorite-item__body {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 210px;\n  grid-template-rows: repeat(4, auto);\n  column-gap: 16px;\n  align-content: center;\n}\n.manual-favorite-item__category {\n  grid-column: 1;\n  grid-row: 1;\n  margin: 0 0 6px;\n  color: #777;\n  font-size: 12px;\n  text-transform: uppercase;\n}\n.manual-favorite-item__name {\n  grid-column: 1;\n  grid-row: 2;\n  margin: 0 0 8px;\n  font-size: 16px;\n  line-height: 1.6;\n}\n.manual-favorite-item__name a {\n  color: inherit;\n  text-decoration: none;\n}\n.manual-favorite-item__status {\n  grid-column: 1;\n  grid-row: 3;\n  align-self: flex-start;\n  justify-self: start;\n  margin: 0 0 8px;\n  padding: 5px 9px;\n  border: 1px solid #ddd;\n  color: #555;\n  font-size: 12px;\n}\n.manual-favorite-item__status.is-unavailable {\n  border-color: #e9b4b4;\n  color: #b00020;\n  background: #fff7f7;\n}\n.manual-favorite-item__price {\n  grid-column: 1;\n  grid-row: 4;\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  margin: 0;\n}\n.manual-favorite-item__price-current {\n  font-size: 19px;\n  font-weight: 800;\n}\n.manual-favorite-item__price-tax,\n.manual-favorite-item__price-before {\n  color: #777;\n  font-size: 11px;\n}\n.manual-favorite-item__price-before {\n  text-decoration: line-through;\n}\n.manual-favorite-item__actions {\n  grid-column: 2;\n  grid-row: 1 \/ 5;\n  align-self: center;\n  display: grid;\n  gap: 8px;\n}\n.manual-favorite-item__cart,\n.manual-favorite-item__view,\n.manual-favorite-item__remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 38px;\n  padding: 8px 14px;\n  text-decoration: none;\n}\n.manual-favorite-item__cart {\n  border: 1px solid #111;\n  color: #fff;\n  background: #111;\n}\n.manual-favorite-item__view {\n  border: 1px solid #333;\n  color: #222;\n  background: #fff;\n}\n.manual-favorite-item__remove {\n  border: 1px solid #ddd;\n  color: #777;\n  background: #fff;\n}\n.manual-favorite-item__heart {\n  display: none;\n}\n.manual-favorites__more {\n  display: flex;\n  justify-content: center;\n  min-width: 180px;\n  margin: 32px auto 0;\n  padding: 12px 20px;\n  border: 1px solid #2f2f2f;\n  color: #2f2f2f;\n  background: #fff;\n}\n@media (max-width: 749px) {\n  .manual-favorite-item {\n    grid-template-columns: 92px minmax(0, 1fr);\n    gap: 12px;\n    padding: 10px;\n  }\n  .manual-favorite-item__image {\n    grid-column: 1;\n    grid-row: 1 \/ 5;\n  }\n  .manual-favorite-item__body {\n    display: contents;\n  }\n  .manual-favorite-item__category,\n  .manual-favorite-item__name,\n  .manual-favorite-item__status,\n  .manual-favorite-item__price {\n    grid-column: 2;\n  }\n  .manual-favorite-item__actions {\n    grid-column: 1 \/ -1;\n    grid-row: 5;\n    margin-top: 10px;\n  }\n}<\/code><\/pre>\n\n\n\n
        Preview, save, and restore defaults<\/h2>\n\n\n\n
        Preview<\/h3>\n\n\n\n
        Click Preview to check the current Liquid and CSS before saving.<\/p>\n\n\n\n
        Preview does not save changes. Click Save after confirming the result.<\/p>\n\n\n\n
        Preview supports up to 100 products. Also test the published page with zero, one, and more than 20 items.<\/p>\n\n\n\n
        Restore defaults<\/h3>\n\n\n\n
        Restore defaults replaces the Page Liquid file, both product and variant item templates, and Custom CSS with default content.<\/p>\n\n\n\n
        This also resets the item template for the unit not currently shown.<\/p>\n\n\n\n
        Restoring defaults does not save automatically. Review the content and click Save.<\/p>\n\n\n\n
        To preserve customizations, copy the Page Liquid, both item templates, and CSS to a text file before restoring defaults.<\/p>\n\n\n\n
        Unsupported code and notes<\/h2>\n\n\n\n
        • Script tags are not supported.<\/li>
        • onclick<\/code>Inline event handlers on HTML elements are not supported.<\/li>
        • URLs that execute scripts are not supported.<\/li>
        • {{ custom_css }}<\/code>, ,{{ favorite_items }}<\/code>, ,data-storecrm-items<\/code>must not be removed.<\/li>
        • Attributes used for removing favorites or adding to cartdata-<\/code>must not be removed without checking their purpose.<\/li><\/ul>\n\n\n\n
          Before major Liquid or CSS changes, save the original content and verify appearance and behavior in both preview and the actual store.<\/p>","protected":false},"excerpt":{"rendered":"StoreCRM\u306e\u300c\u4e0a\u7d1a\u8005\u30e2\u30fc\u30c9\uff08Liquid\uff09\u300d\u3067\u306f\u3001\u304a\u6c17\u306b\u5165\u308a\u4e00\u89a7\u30da\u30fc\u30b8\u306e\u69cb\u9020\u3001\u5546\u54c1\u30fb\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u306e\u8868\u793a […]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-5160","post","type-post","status-publish","format-standard","hentry","category-setting"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/storecrm.com\/help\/en\/wp-json\/wp\/v2\/posts\/5160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/storecrm.com\/help\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/storecrm.com\/help\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/storecrm.com\/help\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/storecrm.com\/help\/en\/wp-json\/wp\/v2\/comments?post=5160"}],"version-history":[{"count":19,"href":"https:\/\/storecrm.com\/help\/en\/wp-json\/wp\/v2\/posts\/5160\/revisions"}],"predecessor-version":[{"id":6154,"href":"https:\/\/storecrm.com\/help\/en\/wp-json\/wp\/v2\/posts\/5160\/revisions\/6154"}],"wp:attachment":[{"href":"https:\/\/storecrm.com\/help\/en\/wp-json\/wp\/v2\/media?parent=5160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/storecrm.com\/help\/en\/wp-json\/wp\/v2\/categories?post=5160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/storecrm.com\/help\/en\/wp-json\/wp\/v2\/tags?post=5160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}