Gap between message and price on collections page

Solved
Highlighted
New Member
2 0 0

Hi all,

 

I have entered a code in to my product-grid-item.liquid on Simple theme to add a message 'Other colours available'. The message looks great and I'm happy with it however I've now noticed a gap between this message and the product price, but I need it to show just above the price, similar to my other products without variants - please see image below.

 

I've tried the usual general html </p> stuff etc without any avail. - could someone please advise?

 

Sorry if i'm being silly!

 

  <div class="product__title product__title--card text-center">
    <a href="{{ product.url | within: collection }}">{{ product.title }}</a>
  </div>
{% assign option_index = 0 %}
{% for option in product.options %}
{% capture downcased_option %}{{ option | downcase }}{% endcapture %}
{% assign option_index = forloop.index0 %}
{% assign how_many_options = 0 %}
{% assign current_options = '' %}
{% for variant in product.variants %}
{% assign current_option = variant.options[option_index] %}
{% unless current_options contains current_option %}
{% if how_many_options > 0 %}
{% assign current_options = current_options | join: '|' | append: '|' %}
{% endif %}
{% assign current_options = current_options | append: current_option %}
{% assign current_options = current_options | split: '|' | sort %}
{% assign how_many_options = current_options | size %}
{% endunless %}
{% endfor %}

{% unless option == "Title" %}
{% if current_options.size > 1 and option contains "Colo"%}
  <p style="text-align:center;"><small>Other colours available</small>
{% endif %}
{% endunless %}
{% endfor %}
  {% if section.settings.vendor_show %}
    <div class="product__vendor text-center">
      {{ product.vendor }}
    </div>
  {% endif %}
    <div class="product__prices text-center">
    {% if product.compare_at_price > product.price %}

      <span class="product__price--on-sale">
        {% if product.price_varies %}
          {% assign sale_price = product.price | money %}
          {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
        {% else %}
          <strong class="visually-hidden">{{ 'products.product.sale_price' | t }}</strong>
          {{ product.price | money }}
        {% endif %}
      </span>

    {% else %}

      <span class="product__price">
        {% if product.price_varies %}
          {% assign price = product.price | money %}
          {{ 'products.product.from_text_html' | t: price: price }}
        {% else %}
          <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
          {{ product.price | money }}
        {% endif %}
      </span>


    {% endif %}

    {% if product.compare_at_price > product.price %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s>{{ product.compare_at_price | money }}</s>
    {% endif %}

    {% if on_sale %}
      <span class="badge badge--sale"><span>{{ 'products.product.on_sale' | t }}</span></span>
    {% endif %}

    {% comment %}
    {% if sold_out %}
      <span class="badge badge--sold-out"><span>{{ 'products.product.sold_out' | t }}</span></span>
    {% endif %}
    {% endcomment %}

    {% if sold_out %}
      — <strong class="sold-out-text">{{ 'products.product.sold_out' | t }}</strong>
    {% endif %}

    {% if product.price_varies == false %}
      {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
    {% endif %}
  </div>
</div>

snapshot.PNG

0 Likes

Success.

Trailblazer
335 75 68

Hi, @oscarrmoore ,

This is Evita from On The Map.

 

Try adding margin 0 to text:

<p style="text-align:center; margin-bottom: 0; padding-bottom: 0"><small>Other colours available</small>

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
2 0 0

Perfect! Thankyou!!!!

0 Likes
Trailblazer
335 75 68

You're Welcome! :)

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes