Re: collection list customization

Solved

collection list customization

modelworks
Tourist
11 0 3

How do i add a product to a collection list so a collection and product are side by side? 

Screenshot (51).png

 Sorry for the bad writing

meant to write collection

Accepted Solution (1)

namphan
Shopify Partner
1504 190 212

This is an accepted solution.

Hi @modelworks,

Please go to collection-list.liquid file and change all code:

{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
    assign show_mobile_slider = true
  endif
-%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="collection-list-wrapper page-width isolate{% if show_mobile_slider %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %} section-{{ section.id }}-padding">
    {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
        <h2
          id="SectionHeading-{{ section.id }}"
          class="collection-list-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
        >
          {{ section.settings.title }}
        </h2>

        {%- if section.settings.show_view_all and show_mobile_slider -%}
          <a
            href="{{ routes.collections_url }}"
            id="ViewAll-{{ section.id }}"
            class="link underlined-link large-up-hide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"
          >
            {{- 'sections.collection_list.view_all' | t -}}
          </a>
        {%- endif -%}
      </div>
    {%- endunless -%}

    <slider-component class="slider-mobile-gutter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
      <ul
        class="collection-list contains-card contains-card--collection{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %} collection-list--{{ section.blocks.size }}-items"
        id="Slider-{{ section.id }}"
        role="list"
      >
        {%- liquid
          assign columns = section.blocks.size
          if columns > 3
            assign columns = 3
          endif
        -%}
        {%- for block in section.blocks -%}
          {%- case block.type -%}
            {%- when 'featured_collection' -%}
              <li
                id="Slide-{{ section.id }}-{{ forloop.index }}"
                class="collection-list__item grid__item{% if show_mobile_slider %} slider__slide{% endif %}{% if block.settings.collection.featured_image == nil %} collection-list__item--no-media{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                {{ block.shopify_attributes }}
                {% if settings.animations_reveal_on_scroll %}
                  data-cascade
                  style="--animation-order: {{ forloop.index }};"
                {% endif %}
              >
                {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
                {%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
                {% render 'card-collection',
                  card_collection: block.settings.collection,
                  media_aspect_ratio: section.settings.image_ratio,
                  columns: columns,
                  placeholder_image: placeholder_image
                %}
              </li>
            {%- when 'featured_product' -%}
              <li
                id="Slide-{{ section.id }}-{{ forloop.index }}"
                class="grid__item{% if show_mobile_slider %} slider__slide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                {{ block.shopify_attributes }}
                {% if settings.animations_reveal_on_scroll %}
                  data-cascade
                  style="--animation-order: {{ forloop.index }};"
                {% endif %}
              >
                {% render 'card-product',
                  card_product: block.settings.product,
                  media_aspect_ratio: block.settings.image_ratio,
                  image_shape: block.settings.image_shape,
                  show_secondary_image: block.settings.show_secondary_image,
                  show_vendor: block.settings.show_vendor,
                  show_rating: block.settings.show_rating,
                  skip_styles: skip_card_product_styles,
                  section_id: block.id,
                  quick_add: block.settings.quick_add
                %}
              </li>
          {%- endcase -%}
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider -%}
        <div class="slider-buttons">
          <button
            type="button"
            class="slider-button slider-button--prev"
            name="previous"
            aria-label="{{ 'general.slider.previous_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ section.blocks.size }}</span>
          </div>
          <button
            type="button"
            class="slider-button slider-button--next"
            name="next"
            aria-label="{{ 'general.slider.next_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
        </div>
      {%- endif -%}
    </slider-component>

    {%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
      <div
        class="center collection-list-view-all{% if show_mobile_slider %} small-hide medium-hide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
        {% if settings.animations_reveal_on_scroll %}
          data-cascade
        {% endif %}
      >
        <a
          href="{{ routes.collections_url }}"
          class="button"
          id="ViewAllButton-{{ section.id }}"
          aria-labelledby="ViewAllButton-{{ section.id }} SectionHeading-{{ section.id }}"
        >
          {{- 'sections.collection_list.view_all' | t -}}
        </a>
      </div>
    {%- endif -%}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.collection-list.name",
  "tag": "section",
  "class": "section section-collection-list",
  "max_blocks": 15,
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "t:sections.collection-list.settings.title.default",
      "label": "t:sections.collection-list.settings.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        },
        {
          "value": "hxl",
          "label": "t:sections.all.heading_size.options__4.label"
        },
        {
          "value": "hxxl",
          "label": "t:sections.all.heading_size.options__5.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
        }
      ],
      "default": "square",
      "label": "t:sections.collection-list.settings.image_ratio.label",
      "info": "t:sections.collection-list.settings.image_ratio.info"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 3,
      "label": "t:sections.collection-list.settings.columns_desktop.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info",
      "default": "scheme-1"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": false,
      "label": "t:sections.collection-list.settings.show_view_all.label"
    },
    {
      "type": "header",
      "content": "t:sections.collection-list.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "1",
      "label": "t:sections.collection-list.settings.columns_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.collection-list.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "featured_collection",
      "name": "t:sections.collection-list.blocks.featured_collection.name",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
        }
      ]
    },
    {
      "type": "featured_product",
      "name": "Product",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "Product"
        },
        {
          "type": "header",
          "content": "t:sections.featured-collection.settings.header.content"
        },
        {
          "type": "select",
          "id": "image_ratio",
          "options": [
            {
              "value": "adapt",
              "label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
            },
            {
              "value": "portrait",
              "label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
            },
            {
              "value": "square",
              "label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
            }
          ],
          "default": "adapt",
          "label": "t:sections.featured-collection.settings.image_ratio.label"
        },
        {
          "type": "select",
          "id": "image_shape",
          "options": [
            {
              "value": "default",
              "label": "t:sections.all.image_shape.options__1.label"
            },
            {
              "value": "arch",
              "label": "t:sections.all.image_shape.options__2.label"
            },
            {
              "value": "blob",
              "label": "t:sections.all.image_shape.options__3.label"
            },
            {
              "value": "chevronleft",
              "label": "t:sections.all.image_shape.options__4.label"
            },
            {
              "value": "chevronright",
              "label": "t:sections.all.image_shape.options__5.label"
            },
            {
              "value": "diamond",
              "label": "t:sections.all.image_shape.options__6.label"
            },
            {
              "value": "parallelogram",
              "label": "t:sections.all.image_shape.options__7.label"
            },
            {
              "value": "round",
              "label": "t:sections.all.image_shape.options__8.label"
            }
          ],
          "default": "default",
          "label": "t:sections.all.image_shape.label",
          "info": "t:sections.all.image_shape.info"
        },
        {
          "type": "checkbox",
          "id": "show_secondary_image",
          "default": false,
          "label": "t:sections.featured-collection.settings.show_secondary_image.label"
        },
        {
          "type": "checkbox",
          "id": "show_vendor",
          "default": false,
          "label": "t:sections.featured-collection.settings.show_vendor.label"
        },
        {
          "type": "checkbox",
          "id": "show_rating",
          "default": false,
          "label": "t:sections.featured-collection.settings.show_rating.label",
          "info": "t:sections.featured-collection.settings.show_rating.info"
        },
        {
          "type": "select",
          "id": "quick_add",
          "default": "none",
          "label": "t:sections.main-collection-product-grid.settings.quick_add.label",
          "info": "t:sections.main-collection-product-grid.settings.quick_add.info",
          "options": [
            {
              "value": "none",
              "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
            },
            {
              "value": "standard",
              "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
            },
            {
              "value": "bulk",
              "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
            }
          ]
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.collection-list.presets.name",
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 12 (12)

suyash1
Shopify Partner
9952 1236 1574

@modelworks - it do not work like that, collection list will show you the collections only

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

namphan
Shopify Partner
1504 190 212

This is an accepted solution.

Hi @modelworks,

Please go to collection-list.liquid file and change all code:

{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
    assign show_mobile_slider = true
  endif
-%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="collection-list-wrapper page-width isolate{% if show_mobile_slider %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %} section-{{ section.id }}-padding">
    {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
        <h2
          id="SectionHeading-{{ section.id }}"
          class="collection-list-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
        >
          {{ section.settings.title }}
        </h2>

        {%- if section.settings.show_view_all and show_mobile_slider -%}
          <a
            href="{{ routes.collections_url }}"
            id="ViewAll-{{ section.id }}"
            class="link underlined-link large-up-hide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"
          >
            {{- 'sections.collection_list.view_all' | t -}}
          </a>
        {%- endif -%}
      </div>
    {%- endunless -%}

    <slider-component class="slider-mobile-gutter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
      <ul
        class="collection-list contains-card contains-card--collection{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %} collection-list--{{ section.blocks.size }}-items"
        id="Slider-{{ section.id }}"
        role="list"
      >
        {%- liquid
          assign columns = section.blocks.size
          if columns > 3
            assign columns = 3
          endif
        -%}
        {%- for block in section.blocks -%}
          {%- case block.type -%}
            {%- when 'featured_collection' -%}
              <li
                id="Slide-{{ section.id }}-{{ forloop.index }}"
                class="collection-list__item grid__item{% if show_mobile_slider %} slider__slide{% endif %}{% if block.settings.collection.featured_image == nil %} collection-list__item--no-media{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                {{ block.shopify_attributes }}
                {% if settings.animations_reveal_on_scroll %}
                  data-cascade
                  style="--animation-order: {{ forloop.index }};"
                {% endif %}
              >
                {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
                {%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
                {% render 'card-collection',
                  card_collection: block.settings.collection,
                  media_aspect_ratio: section.settings.image_ratio,
                  columns: columns,
                  placeholder_image: placeholder_image
                %}
              </li>
            {%- when 'featured_product' -%}
              <li
                id="Slide-{{ section.id }}-{{ forloop.index }}"
                class="grid__item{% if show_mobile_slider %} slider__slide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                {{ block.shopify_attributes }}
                {% if settings.animations_reveal_on_scroll %}
                  data-cascade
                  style="--animation-order: {{ forloop.index }};"
                {% endif %}
              >
                {% render 'card-product',
                  card_product: block.settings.product,
                  media_aspect_ratio: block.settings.image_ratio,
                  image_shape: block.settings.image_shape,
                  show_secondary_image: block.settings.show_secondary_image,
                  show_vendor: block.settings.show_vendor,
                  show_rating: block.settings.show_rating,
                  skip_styles: skip_card_product_styles,
                  section_id: block.id,
                  quick_add: block.settings.quick_add
                %}
              </li>
          {%- endcase -%}
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider -%}
        <div class="slider-buttons">
          <button
            type="button"
            class="slider-button slider-button--prev"
            name="previous"
            aria-label="{{ 'general.slider.previous_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ section.blocks.size }}</span>
          </div>
          <button
            type="button"
            class="slider-button slider-button--next"
            name="next"
            aria-label="{{ 'general.slider.next_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
        </div>
      {%- endif -%}
    </slider-component>

    {%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
      <div
        class="center collection-list-view-all{% if show_mobile_slider %} small-hide medium-hide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
        {% if settings.animations_reveal_on_scroll %}
          data-cascade
        {% endif %}
      >
        <a
          href="{{ routes.collections_url }}"
          class="button"
          id="ViewAllButton-{{ section.id }}"
          aria-labelledby="ViewAllButton-{{ section.id }} SectionHeading-{{ section.id }}"
        >
          {{- 'sections.collection_list.view_all' | t -}}
        </a>
      </div>
    {%- endif -%}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.collection-list.name",
  "tag": "section",
  "class": "section section-collection-list",
  "max_blocks": 15,
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "t:sections.collection-list.settings.title.default",
      "label": "t:sections.collection-list.settings.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        },
        {
          "value": "hxl",
          "label": "t:sections.all.heading_size.options__4.label"
        },
        {
          "value": "hxxl",
          "label": "t:sections.all.heading_size.options__5.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
        }
      ],
      "default": "square",
      "label": "t:sections.collection-list.settings.image_ratio.label",
      "info": "t:sections.collection-list.settings.image_ratio.info"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 3,
      "label": "t:sections.collection-list.settings.columns_desktop.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info",
      "default": "scheme-1"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": false,
      "label": "t:sections.collection-list.settings.show_view_all.label"
    },
    {
      "type": "header",
      "content": "t:sections.collection-list.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "1",
      "label": "t:sections.collection-list.settings.columns_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.collection-list.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "featured_collection",
      "name": "t:sections.collection-list.blocks.featured_collection.name",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
        }
      ]
    },
    {
      "type": "featured_product",
      "name": "Product",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "Product"
        },
        {
          "type": "header",
          "content": "t:sections.featured-collection.settings.header.content"
        },
        {
          "type": "select",
          "id": "image_ratio",
          "options": [
            {
              "value": "adapt",
              "label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
            },
            {
              "value": "portrait",
              "label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
            },
            {
              "value": "square",
              "label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
            }
          ],
          "default": "adapt",
          "label": "t:sections.featured-collection.settings.image_ratio.label"
        },
        {
          "type": "select",
          "id": "image_shape",
          "options": [
            {
              "value": "default",
              "label": "t:sections.all.image_shape.options__1.label"
            },
            {
              "value": "arch",
              "label": "t:sections.all.image_shape.options__2.label"
            },
            {
              "value": "blob",
              "label": "t:sections.all.image_shape.options__3.label"
            },
            {
              "value": "chevronleft",
              "label": "t:sections.all.image_shape.options__4.label"
            },
            {
              "value": "chevronright",
              "label": "t:sections.all.image_shape.options__5.label"
            },
            {
              "value": "diamond",
              "label": "t:sections.all.image_shape.options__6.label"
            },
            {
              "value": "parallelogram",
              "label": "t:sections.all.image_shape.options__7.label"
            },
            {
              "value": "round",
              "label": "t:sections.all.image_shape.options__8.label"
            }
          ],
          "default": "default",
          "label": "t:sections.all.image_shape.label",
          "info": "t:sections.all.image_shape.info"
        },
        {
          "type": "checkbox",
          "id": "show_secondary_image",
          "default": false,
          "label": "t:sections.featured-collection.settings.show_secondary_image.label"
        },
        {
          "type": "checkbox",
          "id": "show_vendor",
          "default": false,
          "label": "t:sections.featured-collection.settings.show_vendor.label"
        },
        {
          "type": "checkbox",
          "id": "show_rating",
          "default": false,
          "label": "t:sections.featured-collection.settings.show_rating.label",
          "info": "t:sections.featured-collection.settings.show_rating.info"
        },
        {
          "type": "select",
          "id": "quick_add",
          "default": "none",
          "label": "t:sections.main-collection-product-grid.settings.quick_add.label",
          "info": "t:sections.main-collection-product-grid.settings.quick_add.info",
          "options": [
            {
              "value": "none",
              "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
            },
            {
              "value": "standard",
              "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
            },
            {
              "value": "bulk",
              "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
            }
          ]
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.collection-list.presets.name",
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
modelworks
Tourist
11 0 3

THANK YOU SO MUCH, THIS HAS BEEN SUCH A PAIN!!!

namphan
Shopify Partner
1504 190 212

Hi @modelworks,

If you have any questions, you can contact me directly.
Happy to help you 😊

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
modelworks
Tourist
11 0 3

could you possibly add a page option to that too? My issue is i want a collection to act like a product so it can go next to other products and when you click on the collection it shows all the options/add ons to that product. when i tried to add another section under my products section it messed everything up! The product is modular and has a bunch of different attachment options/add ons. I am currently using the ride theme, is there maybe a better theme for this if worst comes to worst?

namphan
Shopify Partner
1504 190 212

Hi @modelworks,

It will be more complicated requirement and you need to hire expert for it.

Or you can contact me directly, I will check it for you 😊

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
modelworks
Tourist
11 0 3

@namphan i have emailed you about it, is there a different contact method you would like? perhaps discord? 

namphan
Shopify Partner
1504 190 212

Hi @modelworks,

I haven't received it yet, can you resend it via email: namphan992@gmail.com . I will check it.

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
modelworks
Tourist
11 0 3

@namphan i just sent it

namphan
Shopify Partner
1504 190 212

Hi @modelworks,

I replied, did you get it?

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
modelworks
Tourist
11 0 3

I don't not get it but I was able to solve the problem myself. Thank you for your time and efforts!

namphan
Shopify Partner
1504 190 212

If you have any questions, you can contact me directly. 

Nice to meet you

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com