Text column with Images

Solved
Highlighted
Tourist
40 0 1

Using Debut theme and the Text Column with Images section: would like the Headers  to be above the images instead of below. Can anyone help with how to do this?

 

Thanks!

0 Likes
Highlighted

Hello Spintiller,

Could you provide the store URL so I can inspect and get back to you? Please do mention the section too.  

0 Likes
Highlighted
Tourist
40 0 1

Hello,

 

site is spintiller.com, pw is Spintiller

 

Thank you!

0 Likes
Highlighted

Hi Spintiller,

This should be in snippets -> collection-grid-item.liquid

Locate the code

<h3 class="h4"></h3>

Move it above

<div class="feature-row__image-wrapper js"></div>


Seems like your theme has changed over Debut. Hence I can't provide the exact code. If you can locate the file and copy the code here. I will be able to. 
If you are not familiar you can add me as Dev user. So I can make this change for you.

0 Likes
Highlighted
Tourist
40 0 1

Collection-grid-item does not seem to contain the lines of code you indicated:

{% comment %}
    Renders a list of products from a collection

    Accepts:
    - collection: {Object} Collection Liquid object (required)

    Usage:
    {% include 'collection-grid-item', collection: collection %}
{% endcomment %}
{% if collection.image %}
  {%- assign collection_image = collection.image -%}
{% elsif collection.products.first and collection.products.first.images != empty %}
  {%- assign collection_image = collection.products.first.featured_image -%}
{% else %}
  {% assign collection_image = blank %}
{% endif %}

<div class="collection-grid-item">
  <a href="{% if collection.products == empty %}#{% else %}{{ collection.url }}{% endif %}" class="collection-grid-item__link">
    {% unless collection_image == blank %}
      <div class="collection-grid-item__overlay box ratio-container lazyload js"
        data-bgset="{% include 'bgset', image: collection_image %}"
        data-sizes="auto"
        data-parent-fit="cover"
        style="background-image: url('{{ collection_image | img_url: '300x300' }}')">
      </div>
      <noscript>
        <div class="collection-grid-item__overlay" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
      </noscript>
    {% else %}
      {% if collection == empty %}
        <div class="collection-grid-item__overlay">
          {% capture current %}{% cycle 1, 2, 3 %}{% endcapture %}
          {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {% else %}
        <div class="collection-grid-item__overlay" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
      {% endif %}
    {% endunless %}

    <div class="collection-grid-item__title-wrapper">
      <div class="collection-grid-item__title h3">
        {% if collection.title == blank %}
          {{ 'homepage.onboarding.collection_title' | t }}
        {% else %}
          {{ collection.title }}
        {% endif %}
      </div>
    </div>
  </a>
</div>
0 Likes
Highlighted

Yes, this is the default. You will have to locate the file mate. I can't guide you without seeing the code. Sorry

0 Likes
Highlighted
Globetrotter
527 49 51

@Spintiller wrote:

Collection-grid-item does not seem to contain the lines of code you indicated:

{% comment %}
    Renders a list of products from a collection

    Accepts:
    - collection: {Object} Collection Liquid object (required)

    Usage:
    {% include 'collection-grid-item', collection: collection %}
{% endcomment %}
{% if collection.image %}
  {%- assign collection_image = collection.image -%}
{% elsif collection.products.first and collection.products.first.images != empty %}
  {%- assign collection_image = collection.products.first.featured_image -%}
{% else %}
  {% assign collection_image = blank %}
{% endif %}

<div class="collection-grid-item">
  <a href="{% if collection.products == empty %}#{% else %}{{ collection.url }}{% endif %}" class="collection-grid-item__link">
    {% unless collection_image == blank %}
      <div class="collection-grid-item__overlay box ratio-container lazyload js"
        data-bgset="{% include 'bgset', image: collection_image %}"
        data-sizes="auto"
        data-parent-fit="cover"
        style="background-image: url('{{ collection_image | img_url: '300x300' }}')">
      </div>
      <noscript>
        <div class="collection-grid-item__overlay" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
      </noscript>
    {% else %}
      {% if collection == empty %}
        <div class="collection-grid-item__overlay">
          {% capture current %}{% cycle 1, 2, 3 %}{% endcapture %}
          {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {% else %}
        <div class="collection-grid-item__overlay" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
      {% endif %}
    {% endunless %}

    <div class="collection-grid-item__title-wrapper">
      <div class="collection-grid-item__title h3">
        {% if collection.title == blank %}
          {{ 'homepage.onboarding.collection_title' | t }}
        {% else %}
          {{ collection.title }}
        {% endif %}
      </div>
    </div>
  </a>
</div>

followin is a title code, move this entire code to the place you want and check, make sure you take backup of file first

 

<div class="collection-grid-item__title-wrapper">
      <div class="collection-grid-item__title h3">
        {% if collection.title == blank %}
          {{ 'homepage.onboarding.collection_title' | t }}
        {% else %}
          {{ collection.title }}
        {% endif %}
      </div>
    </div>
you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Highlighted
Tourist
40 0 1

Thank you both but is not working. I don't believe the collection-grid-item is the correct snippet. I completely deleted the code suggested by suyash1, saved it, and refreshed the web page and nothing changed.

0 Likes
Highlighted
Globetrotter
527 49 51

@Spintiller wrote:

Thank you both but is not working. I don't believe the collection-grid-item is the correct snippet. I completely deleted the code suggested by suyash1, saved it, and refreshed the web page and nothing changed.


password not working , can you add me to staff? I will check it

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Highlighted
Tourist
40 0 1

Spintiller pw is now working. Thank you.

0 Likes