How to use a Product in Collection as an Ad, no Click through!

Tourist
10 0 1

Hi there, I'm looking to get help with coding the following:

I want to have a product with a collection show up as an Ad, or basically a message w/o a click through to the product page. 

It will be used this way:

If i have 4 prouducts per row on my collection page,

product 1 of each 4 will be an Ad describing the 3 to it's right.

 

There must be a way to use a products tags, and then code within collection.liquid to hide 1) Product Title, 2) Product Price below the image, AND disable a click-through to a product detail page.

 

Any help?  Thanks!

 

0 Likes
Shopify Expert
9807 92 1560

Hey Jaki,

So the advert would still be a product in the Shopify admin? You're just using the product image as the advert right?

Just trying to get a sense for your use so I can better answer the question.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Tourist
10 0 1

Hi Jason,

Yes - we'd load the product in as if it was any normal product.  The only important information is the Image - we don't need a product Title, Description, or Price, and want to hide those.   It's basically an identifier/ad that describes the real products that will sit directly to the right of it in a collection.

Here's a link to the collection we are building that needs the ads/identifier products: http://jakimac.com/collections/valentines-day-love-you-to-pieces-gift-sets

We have gift sets, with 3 tiers each.   We want to identify the start of a 3 Tier (3 different products) set with an ad so that the 1st image (the ad) of the 4 in each row describes/identifies the 3 different products/tiers of that set next to it.

Does that make sense?    Otherwise our customers will be confused - a different set starts on the same row of products because our theme's collections automatically do 4 rows of products.

Thank you!

 

0 Likes
Shopify Expert
9807 92 1560

As a quick sidepoint - the About Brand link in the footer goes to a 404 page.

You're right that this could be handled with a tag (or metafield, or even with certain words in the product title).

It's been a while since I've needed to look into the theme that your site uses but I am pretty sure that all the code will be in collection.liquid, and won't be scattered through other snippet files. Let's run over things in a very general sense and hopefully that let's you sort out the code.

Before making any edit be sure to make a theme copy, and work in that copy. Don't break your live store!

You'll see ... in the code below - that just means you'll have a bunch of code in that part. It's been left out for neatness. First find a section that looks something this:

{% for product in collection.products %}
<li class="product-index desktop-3 tablet-3 mobile-half{% cycle ' first', '', '', ' last' %}" data-price="{{ product.price }}">
...
</li>
{% endfor %}

This is the section you need to edit.

Assuming you add a tag of "promo" to the advert product you can allter the code so it looks more like the below:

{% for product in collection.products %}
<li class="product-index desktop-3 tablet-3 mobile-half{% cycle ' first', '', '', ' last' %}" data-price="{{ product.price }}">
{% if product.tags contains 'promo' %}
  <img src="{{ product.images[0] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
{% else %}
... <-- this is the original code
{% endif %}
</li>
{% endfor %}

You also seem to be using a mobile theme so remember to also change the code in that theme too!

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Tourist
10 0 1

Jason,

Thank you so much! This has worked flawlessly on both our primary and mobile themes.   We're updating our store right now and it will be live by 5pm PST today.

We hope to do more changes to our website soon and I will keep your contact information here.

Jaki

0 Likes
Tourist
10 0 1

Hi Jason,

My mistake, it did not work for our Mobile theme, which is Shopify's Boundess.  The code on the Collection.liquid page in the  {% for product in collection.products %} section looks like this:

<div class="grid collection-grid grid--uniform grid--no-gutters">
  {% for product in collection.products %}
    {% assign price = product.price | money_without_trailing_zeros %}
    {% include 'product-grid-item' %}
  {% else %}
    {% comment %}
      Add default products to help with onboarding for collections/all only.

      The onboarding styles and products are only loaded if the
      store has no products.
    {% endcomment %}
    {% if collection.handle == 'all' %}
      {% unless onboardingLoaded %}
        {% comment %}
          Only load onboarding styles if they have not already been loaded.
        {% endcomment %}
        {{ 'theme-onboarding.css' | global_asset_url | stylesheet_tag }}
        {% assign onboardingLoaded = true %}
      {% endunless %}
      <div class="grid__item">
        <div class="helper-section">
          <div class="helper-note">
            <span class="helper-icon"></span>
            <h3>{{ 'collections.onboarding.modal_title' | t }}</h3>
            <p>{{ 'collections.onboarding.no_products_html' | t }}</p>
            <p><a href="/admin/products/new" class="admin-btn-primary">{{ 'collections.onboarding.add_product' | t }}</a></p>
          </div>

          <div class="grid grid--uniform grid--no-gutters helper-content">
            {% assign collection_onboarding_index = 1 %}
            {% for i in (1..8) %}
              {% case i %}
                {% when 7 %}
                  {% assign collection_onboarding_index = 1 %}
                {% when 8 %}
                  {% assign collection_onboarding_index = 2 %}
              {% endcase %}
              <div class="product-item grid__item {{ grid_item_width }}">
                <a class="product-item__link" href="/admin/products">
                  {% capture imageUrl %}//cdn.shopify.com/s/images/themes/product-{{ collection_onboarding_index }}.png{% endcapture %}
                  <img src="{{ imageUrl }}" class="product-item__image">

                  <span class="product-item__meta">
                    <span class="product-item__meta__inner">
                      <p class="product-item__title">{{ 'homepage.onboarding.product_title' | t }}</p>
                      <p>$19.99</p>
                    </span>
                  </span>
                </a>
              </div>
              {% assign collection_onboarding_index = collection_onboarding_index | plus: 1 %}
            {% endfor %}
          </div>
        </div>
      </div>
    {% else %}
      {% comment %}
        If collection exists but is empty, display message
      {% endcomment %}
      <div class="grid__item text-center">
        <p>{{ 'collections.general.no_matches' | t }}</p>
      </div>
    {% endif %}
  {% endfor %}
</div>

 

0 Likes
New Member
2 0 2

Hi, Did you ever get this to work for your mobile version as well?

0 Likes