Featured image on Broadcast theme

[Chwhis]

Hi all,

Looking for some help.

Just launched with the Broadcast theme and it displays a feature image on every product page - which I'm happy with. But I do not want it to display on the collection page that this image is linked to.

Can anyone help with this?

Thanks

[ShanifAtApteo]

 Hi @Chwhis, glad to help you with your question. I’m sure, my given answer will help to solve your problem as adding the given code below in the section 

1: Go to Online Store > Actions > Edit Code > Sections  > collection-temlate.liquid

And replace featured image variable code with this

"{{  product.images[1] | img_url: 'large' }}”

Hopefully, that solves your problem. If not, please let me know if you're seeing any other issues.

[Chwhis]

Hi ShanifAtApteo,

Thanks for your reply. I'm afraid I have tried to swap this but I may have done it in the wrong place. I have provided the code within the section below. I would like this feature to work on all collections except the one with the class of "collection-valentines"

<!-- /sections/collections.liquid -->

{%- assign showReviews = section.settings.enable_reviews -%}
{%- assign showSort = section.settings.enable_sort -%}
{%- assign enableSwatches = settings.color_swatches -%}

{% comment %} Featured image {% endcomment %}
{%- assign showFeaturedImage = section.settings.show_featured_image -%}
{%- assign featuredImage = section.settings.featured_image -%}
{%- assign featuredHeader = section.settings.featured_heading -%}
{%- assign featuredText = section.settings.featured_text -%}
{%- assign featuredButtonText = section.settings.featured_button_text -%}
{%- assign featuredButtonLink = section.settings.featured_button_link -%}
{%- assign featuredColorText = section.settings.featured_color_text -%}
{%- assign featuredColorOverlay = section.settings.featured_color_overlay -%}
{%- assign featuredOverlayOpacity = section.settings.featured_overlay_opacity | times: 0.01 -%}

{% assign product_limit = section.settings.product_limit %}
{% if showFeaturedImage %}
  {% assign product_limit = product_limit | minus: 1 %}
{% endif %}

{%- assign showTags = false -%}
{%- assign showGroupTags = false -%}
{%- if collection.tags.size > 0 -%}
  {%- if section.settings.filter_mode == 'group' -%}
    {%- assign showGroupTags = true -%}
  {%- elsif section.settings.filter_mode == 'tag'-%}
    {%- assign showTags = true -%}
  {%- endif -%}
{%- endif -%}

{%- assign transparency_class = '' -%}
{%- if section.settings.transparent-%}
  {%- assign transparency_class = 'hero__content--transparent' -%}
{%- endif -%}


{%- case section.settings.grid -%}
  {%- when 2 -%}
    {%- assign grid_strings = 'large-up--one-half medium--one-half small--one-half' -%}
  {%- when 3 -%}
    {%- assign grid_strings = 'large-up--one-third medium--one-third small--one-half' -%}
  {%- when 4 -%}
    {%- assign grid_strings = 'large-up--one-quarter medium--one-half small--one-half' -%}
  {%- when 5 -%}
    {%- assign grid_strings = 'large-up--one-fifth medium--one-third small--one-half' -%}
  {%- else -%}
    {%- assign grid_strings = 'large-up--one-sixth medium--one-third small--one-half' -%}
{%- endcase -%}

{%- paginate collection.products by product_limit -%}

<section class="collection collection-{{ collection.handle }}"
  data-section-id="{{ section.id }}"
  data-section-type="collection"
  data-section-type="collection-grid"
  data-section-type="collection-hero"
  data-reviews="{{ showReviews }}"
  data-swatches="{{ enableSwatches }}"
  data-sort="{{ showSort }}"
  data-tags="{% if selected_tags != blank %}{{ selected_tags | split: '+' | json }}{% else %}[]{% endif %}"
  data-collection="{{ collection.url | default: '/collections/all' }}">

  {%- capture collectionContent -%}
    <div class="collection__title hero__content__wrapper {{ section.settings.flex_align }} {{ transparency_class }} {{ section.settings.text_color }}">
      {%- if section.settings.show_title or collection.description != '' and section.settings.show_description -%}
        <div class="hero__content preventOverflowContent">
          {%- if section.settings.show_title -%}
            <h1 class="hero__title">{{ collection.title }}</h1>
          {%- endif -%}
          {%- if collection.description != '' and section.settings.show_description -%}
            <div class="hero__description rte">{{ collection.description }}</div>
          {%- endif -%}
        </div>
      {%- endif -%}
    </div>
  {%- endcapture -%}

  {%- capture imageOverlay -%}
    <div class="image-overlay" style="background-color:{{ section.settings.overlay_color }} !important; opacity:{{ section.settings.overlay_opacity | times: 0.01 }};"></div>
  {%- endcapture -%}

  {%- if collection.image and section.settings.show_image -%}
    {%- assign img_url = collection.image.src | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

      {%- if section.settings.banner_layout == 'inline' -%}
        <div class="collection__image-inline">
      {%- endif -%}

      <div class="collection__image wide-image preventOverflow {{ section.settings.height }}" id="FeaturedImage-{{ section.id }}"
        {%- if section.settings.parallax -%}
          data-parallax-src="{{ collection.image | img_url: '18x'  }}"
          data-src="{{ img_url }}"
          data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
          data-aspectratio="{{  collection.image.aspect_ratio }}"
          data-sizes="auto"
        {%- endif -%}>

        {%- if section.settings.banner_layout == 'overlay' -%}
          {{ collectionContent }}
          {{ imageOverlay }}
        {%- endif -%}

        {%- if section.settings.height == 'image-height' -%}
          <img class="lazyload responsive-wide-image" {% if section.settings.parallax %} style="opacity: 0;"{% endif %}
            alt="{{ collection.image.alt | default: section.settings.title }}"
            src="{{ collection.image | img_url: '18x'  }}"
            data-src="{{ img_url }}"
            data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
            data-aspectratio="{{ collection.image.aspect_ratio }}"
            data-parent-fit="cover"
            data-sizes="auto"/>
        {%- endif -%}

        {%- if section.settings.parallax == false and section.settings.height != 'image-height' -%}
          <div class="background-size-cover lazyload"  data-bgset="{% render 'bgset', image: collection.image %}"></div>
        {%- endif -%}

        <noscript>
          <img src="{{ collection.image | img_url: '1440x' }}" alt="{{ collection.image.alt | default: collection.title }}" class="responsive-wide-image"/>
        </noscript>
      </div>

      {%- if section.settings.banner_layout == 'inline' -%}
          <div class="collection__title-wrapper {{ section.settings.height }}">
            {{ imageOverlay }}
            {{ collectionContent }}
          </div>
        </div>
      {%- endif -%}

  {%- else -%}
    <div class="collection__title collection__title--no-image {{ section.settings.flex_align }}">
      {%- if collection.handle != 'all' and section.settings.show_title -%}
        <h1 class="hero__title">{{ collection.title }}</h1>
      {%- endif -%}
      {%- if collection.description != '' and section.settings.show_description -%}
        <div class="hero__description rte">{{ collection.description }}</div>
      {%- endif -%}
    </div>
  {%- endif -%}

  {% assign align_classes = '' %}
  {%- if showSort -%}
    {% assign align_classes = align_classes | append: ' collection__nav--sort ' %}
  {%- endif -%}
  {%- if showGroupTags or showTags -%}
    {% assign align_classes = align_classes | append: ' collection__nav--filter ' %}
  {%- endif -%}

  {%- if showSort or showGroupTags or showTags -%}
    <nav class="collection__nav {{ align_classes }}">
      {%- if showTags -%}
        {% render 'collection-tags', collection: collection %}
      {%- endif -%}
      {%- if showGroupTags -%}
        <div class="popout--group">
          <button
            type="button"
            class="popout__toggle"
            aria-expanded="false"
            aria-controls="filter-groups"
            data-aria-toggle>
            {{ 'collections.general.filter' | t }}
            {%- if current_tags.size > 0 -%}
              <span>({{current_tags.size}})</span>
            {%- endif -%}
            {%- render 'icon-filter' -%}
          </button>
        </div>
      {%- endif -%}
      {%- if showSort -%}
        {% render 'collection-sorting', collection: collection %}
      {%- endif -%}
    </nav>
  {%- endif -%}

  <div class="collection__products">
    {%- if showGroupTags -%}
      <div class="collection__sidebar__slider" id="filter-groups">
        {%- render 'collection-tags-grouped', collection: collection -%}
      </div>
    {%- endif -%}
      <div class="product-grid" id="CollectionLoop">

      {%- if showFeaturedImage and paginate.current_page == 1 and collection.products.size > 0 -%}
        <style>
          .product-item__image-overlay { color: {{ featuredColorText }}; }
          .product-item__image-overlay::before { opacity: {{ featuredOverlayOpacity }}; background-color: {{ featuredColorOverlay }}; }
          .product-item__image-content .btn:hover { color: {{ featuredColorOverlay }}; background-color: {{ featuredColorText }}; border-color: {{ featuredColorText }}; }
        </style>
        <div class="product-item product-item--featured-image {{ grid_strings }}">
          {%- capture featuredImageContent -%}
            <div class="product-item__image-overlay">
              <div class="product-item__image-content">
                {%- if featuredHeader -%}
                  <h3>{{ featuredHeader }}</h3>
                {%- endif -%}

                {%- if featuredText -%}
                  {{ featuredText }}
                {%- endif -%}

                {%- if featuredButtonText -%}
                  <a href="{{ featuredButtonLink }}" class="btn btn--large btn--secondary caps aos-init aos-animate" data-aos="fade-up" data-aos-duration="700" data-aos-delay="200">{{ featuredButtonText }}</a>
                {%- endif -%}
              </div>
            </div>
          {%- endcapture -%}

          {%- unless featuredImage == blank -%}
            <div class="product-item__image">
              <div class="product-item__bg lazyload"
                data-aos="img-in"
                data-aos-anchor=".product-grid"
                data-aos-delay="{{ animation_delay | times: 150 }}"
                data-aos-duration="{{ animation_delay | times: 100 | plus: 800 }}"
                data-aos-easing="ease-out-quart"
                data-bgset="{% render 'bgset', image: featuredImage %}"></div>
              {{ featuredImageContent }}
            </div>

            <noscript>
              <div class="product-item__image no-js-image" style="background-image:url('{{ featuredImage | img_url: '540x' }}'); background-size: contain; background-position: center center; background-repeat: no-repeat;"
                >
                {{ featuredImageContent }}
              </div>
            </noscript>
          {%- else -%}
            <div class="product-item__image svg-placeholder">
              {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
              {{ 'collection-' | append: current | placeholder_svg_tag }}

              {{ featuredImageContent }}
            </div>
          {%- endunless -%}
        </div>
      {%- endif -%}

      {%- if collection.products.size > 0 -%}
        {%- for product in collection.products -%}
          {%- assign grid_int = section.settings.grid | times:1 -%}
          {%- assign animation_delay = forloop.index0  | modulo:grid_int | times:1 -%}
          {%- render 'product-grid-item', product: product, grid_strings: grid_strings, animation_delay: animation_delay -%}
        {%- endfor -%}
      {%- else -%}
        <div class="no-results">
          <p><strong>{{ 'collections.general.no_matches' | t }}</strong></p>
        </div>
      {%- endif -%}
    </div>
    {% render 'pagination', paginate: paginate %}
  </div>
</section>

{%- endpaginate -%}

{% schema %}
  {
    "name": "Collection page",
    "settings": [
      {
        "type": "checkbox",
        "id": "enable_sort",
        "label": "Show sorting",
        "default": false
      },
      {
        "type": "select",
        "label": "Filter mode",
        "id": "filter_mode",
        "info": "Filters by group requires specific tag formatting. [Learn more](https://help.shopify.com/manual/using-themes/themes-by-shopify/supply#product-tips-tips-specific)",
        "default": "tag",
        "options": [
          { "label": "Hidden", "value": "hidden" },
          { "label": "By tag", "value": "tag" },
          { "label": "By group", "value": "group" }
        ]
      },
      {
        "type": "header",
        "content": "Title and Description"
      },
      {
        "type": "checkbox",
        "id": "show_title",
        "label": "Show collection title",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_description",
        "label": "Show collection description",
        "default": true
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "default": "text-dark",
        "options": [
          { "value": "text-light", "label": "White"},
          { "value": "text-dark", "label": "Dark"}
        ],
        "info": "If no Collection image body text color will be used"
      },
      {
        "type": "select",
        "id": "flex_align",
        "label": "Text alignment",
        "default": "align--middle-left",
        "options": [
          { "value": "align--top-left", "label": "Top left" },
          { "value": "align--top-right", "label": "Top right" },
          { "value": "align--middle-left", "label": "Center left" },
          { "value": "align--middle-center", "label": "Center center" },
          { "value": "align--middle-right", "label": "Center right" },
          { "value": "align--bottom-left", "label": "Bottom left" },
          { "value": "align--bottom-right", "label": "Bottom right" }
        ]
      },
      {
        "type": "checkbox",
        "id": "transparent",
        "label": "Transparent text background",
        "default": false
      },
      {
        "type": "header",
        "content": "Collection image"
      },
      {
        "type": "checkbox",
        "id": "show_image",
        "label": "Show collection image",
        "default": true
      },
      {
        "type": "select",
        "id": "banner_layout",
        "label": "Layout",
        "default": "overlay",
        "options": [
          { "value": "inline", "label": "Inline" },
          { "value": "overlay", "label": "Overlay" }
        ]
      },
      {
        "type": "select",
        "id": "height",
        "label": "Image height",
        "default": "screen-height-one-third",
        "options": [
          { "value": "screen-height-one-half", "label": "1/2 of screen"},
          { "value": "screen-height-one-third", "label": "1/3 of screen"},
          { "value": "five-fifty-height-hero ", "label": "550px" },
          { "value": "four-fifty-height-hero", "label": "450px" },
          { "value": "three-fifty-height-hero", "label": "350px" },
          { "value": "two-fifty-height-hero", "label": "250px" },
          { "value": "image-height", "label": "Image height" }
        ]
      },
      {
        "type": "checkbox",
        "id": "parallax",
        "default": false,
        "label": "Enable parallax scroll"
      },
      {
        "type": "range",
        "id": "overlay_opacity",
        "label": "Opacity",
        "min": 0,
        "max": 90,
        "step": 5,
        "unit": "%",
        "default": 0
      },
      {
        "type": "color",
        "id": "overlay_color",
        "label": "Overlay color",
        "default": "#000"
      },
      {
        "type": "header",
        "content": "Products grid"
      },
      {
        "type":    "range",
        "id":      "grid",
        "min":     2,
        "max":     6,
        "step":    1,
        "label":   "Products per row",
        "default": 4
      },
      {
        "type":    "range",
        "id":      "product_limit",
        "min":     1,
        "max":     50,
        "step":    1,
        "label":   "Products per page",
        "default": 36
      },
      {
        "type": "checkbox",
        "id": "enable_reviews",
        "label": "Show review stars",
        "info": "Install Shopify's free [Product Reviews app](https://apps.shopify.com/product-reviews) before enabling this option.",
        "default": false
      },
      {
        "type": "header",
        "content": "Featured image"
      },
      {
        "type": "checkbox",
        "id": "show_featured_image",
        "default": false,
        "label": "Show featured image"
      },
      {
        "type": "image_picker",
        "id": "featured_image",
        "label": "Image"
      },
      {
        "type": "text",
        "id": "featured_heading",
        "label": "Heading",
        "default":"Use this image showcase promotional content."
      },
      {
        "type": "richtext",
        "id": "featured_text",
        "label": "Text",
        "default":"<p>Elaborate on it with rich text<p>"
      },
      {
        "type": "text",
        "id": "featured_button_text",
        "label": "Button label",
        "default":"Learn More"
      },
      {
        "type": "url",
        "id": "featured_button_link",
        "label": "Button link"
      },
      {
        "type": "color",
        "id": "featured_color_text",
        "label": "Text",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "featured_color_overlay",
        "label": "Overlay",
        "default": "#222222"
      },
      {
        "type": "range",
        "id": "featured_overlay_opacity",
        "label": "Overlay opacity",
        "step": 1,
        "max": 95,
        "min": 0,
        "unit": "%",
        "default": 10
      }
    ]
  }
{% endschema %}

Thanks again!