FROM CACHE - en_header
Promotion image

Code to add "AD" on collection list not working, how to adjust / fix? - Dawntheme

Code to add "AD" on collection list not working, how to adjust / fix? - Dawntheme

Brian-A
Pathfinder
107 0 22
‎03-17-2025 10:19 AM

Trying to add an ad half way through my product collection list page like this:

not sure what code I'm missing to split the product list into 2 and add an ad?

 

Dawn theme

 

www.extremekool.com

 

 

1111Capture.JPG

 

I added the metafield definitions: 

 

1111-2Capture.JPG

 

but not sure how to add the code to "collection-list.liquid"?

this is the code i added so far to the .liquid

{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.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;
    }
  }

  .two-column-ad {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    background-color: #f5f5f5;
  }
  .ad-image {
    flex: 1;
  }
  .ad-image img {
    max-width: 100%;
    height: auto;
  }
  .ad-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .ad-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    text-decoration: none;
  }
  .two-column-ad .placeholder {
    background-color: #eee;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
  }
  @media (max-width: 750px) {
    .two-column-ad {
      flex-direction: column;
      padding: 10px;
    }
    .two-column-ad .ad-image,
    .two-column-ad .ad-content {
      flex: none;
      width: 100%;
    }
  }
{%- 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
  assign half_count = section.blocks.size | divided_by: 2
-%}

<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 -%}

    <!-- First Half of Collection List -->
    <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--{{ half_count }}-items"
        id="Slider-{{ section.id }}-first"
        role="list"
      >
        {%- liquid
          assign columns = half_count
          if columns > 3
            assign columns = 3
          endif
        -%}
        {%- for block in section.blocks limit: half_count -%}
          <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>
        {%- 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">{{ half_count }}</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>

    <!-- Ad Section -->
    <div class="two-column-ad">
      <div class="ad-image">
        {% if section.settings.ad_collection.metafields.custom.ad_image != blank %}
          <img src="{{ section.settings.ad_collection.metafields.custom.ad_image | img_url: 'master' }}" alt="Advertisement">
        {% else %}
          <div class="placeholder">No ad image set</div>
        {% endif %}
      </div>
      <div class="ad-content">
        {% if section.settings.ad_collection.metafields.custom.ad_content != blank %}
          <p>{{ section.settings.ad_collection.metafields.custom.ad_content }}</p>
        {% elsif section.settings.ad_collection.metafields.custom.ad_content2 != blank %}
          <p>{{ section.settings.ad_collection.metafields.custom.ad_content2 }}</p>
        {% else %}
          <p>No ad content set</p>
        {% endif %}
        {% if section.settings.ad_collection.metafields.custom.ad_button_link != blank %}
          <a href="{{ section.settings.ad_collection.metafields.custom.ad_button_link }}" class="ad-button">Shop Now</a>
        {% endif %}
      </div>
    </div>

    <!-- Second Half of Collection List -->
    <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--{{ half_count }}-items"
        id="Slider-{{ section.id }}-second"
        role="list"
      >
        {%- liquid
          assign columns = half_count
          if columns > 3
            assign columns = 3
          endif
        -%}
        {%- for block in section.blocks offset: half_count -%}
          <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>
        {%- 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 | minus: half_count }}</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": "Collections",
      "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"
        }
      ],
      "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": "Ad Section"
    },
    {
      "type": "collection",
      "id": "ad_collection",
      "label": "Select Ad Collection"
    },
    {
      "type": "text",
      "id": "ad_namespace",
      "label": "Metafield Namespace",
      "default": "custom",
      "info": "The namespace for your ad metafields (usually 'custom')"
    },
    {
      "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"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.collection-list.presets.name",
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}

 

mainly: 

    <!-- Ad Section -->
    <div class="two-column-ad">
      <div class="ad-image">
        {% if section.settings.ad_collection.metafields.custom.ad_image != blank %}
          <img src="{{ section.settings.ad_collection.metafields.custom.ad_image | img_url: 'master' }}" alt="Advertisement">
        {% else %}
          <div class="placeholder">No ad image set</div>
        {% endif %}
      </div>
      <div class="ad-content">
        {% if section.settings.ad_collection.metafields.custom.ad_content != blank %}
          <p>{{ section.settings.ad_collection.metafields.custom.ad_content }}</p>
        {% elsif section.settings.ad_collection.metafields.custom.ad_content2 != blank %}
          <p>{{ section.settings.ad_collection.metafields.custom.ad_content2 }}</p>
        {% else %}
          <p>No ad content set</p>
        {% endif %}
        {% if section.settings.ad_collection.metafields.custom.ad_button_link != blank %}
          <a href="{{ section.settings.ad_collection.metafields.custom.ad_button_link }}" class="ad-button">Shop Now</a>
        {% endif %}
      </div>
    </div>

not sure what I'm missing?

 

245 Views
0 Likes
Report
Reply 1 (1)

Juleebiz
Shopify Partner
3 0 1
‎03-17-2025 11:28 AM

It looks like you're trying to insert an ad halfway through your product collection list on the Dawn theme in Shopify. You've already defined the metafiles and added some code to your collection list liquid file but need help ensuring the ad is correctly placed between the product listings.

Here’s what you need to check:

  1. Splitting the Collection List Properly

    • Ensure that your product collection is divided into two equal parts before inserting the ad.
    • You may need to use a loop counter or the filter to control where the break happens.

  2. Ad Placement

    • The ad should be inserted after the first half of the products and before the second half.
    • Your current approach of using metafiles to define the ad content is correct, but ensure that the metafiles references are correctly set up.

  3. Metafiles Setup

    • Confirm that the metafields used for the ad image, content, and button exist and are correctly assigned in your Shopify admin.
    • If they’re missing, the ad might not appear.

  4. Styling the Ad Section

    • Your CSS should ensure that the ad aligns properly with the products and doesn’t disrupt the grid layout.
    • If the ad doesn’t appear or is misaligned, check the CSS properties related to flexbox or grid.

  5. Testing Responsiveness

    • Make sure the ad placement doesn’t break the layout on mobile devices.
    • If the ad needs to appear differently on mobile, you may need a separate layout adjustment.

If the ad is still not showing or causing layout issues, you might need to tweak the structure of the collection list further. Let me know what’s happening when you test it!

219 Views
1 Like
Report

Community Blog Articles

JasonH_0-1743081651612.jpeg
Members of March '25

Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...

By JasonH Apr 1, 2025
427225466-7b141305-de27-48eb-8d38-643ba2ed8c3f.jpg
The power of automation: New Shopify Flow fundamentals learning path

Discover how to increase the efficiency of commerce operations with Shopify Academy's l...

By Jacqui Mar 26, 2025
shopp-e-1741972742895593780274096851.png
Canadian merchants: Update account details by March 24, 2025 to continue us...

Shopify and our financial partners regularly review and update verification requiremen...

By Jacqui Mar 14, 2025
Terms of Service Privacy Policy