[Dawn Theme] Help moving collection titles from below image to being overlaid on the image

Store Design
1

Hello, I need some help moving the collection titles to preferably the top left of each collection image, any help is greatly appreciated :slightly_smiling_face:

2

Hi @LearningDev ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Sections/main-collection-banner.liquid
  3. update code below
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}

{%- style -%}
  @media screen and (max-width: 749px) {
    .collection-hero--with-image .collection-hero__inner {
      padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
    }
  }
{%- endstyle -%}

  

    

      

      {%- if section.settings.show_collection_description -%}
        
{{ collection.description }}

      {%- endif -%}
    

    {%- if section.settings.show_collection_image and collection.image -%}
      
        # 
        {{ 'sections.collection_template.title' | t }}: 
        {{- collection.title | escape -}}
         
        
        
        

      

    {%- endif -%}
  

{% schema %}
{
  "name": "t:sections.main-collection-banner.name",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.main-collection-banner.settings.paragraph.content"
    },
    {
      "type": "checkbox",
      "id": "show_collection_description",
      "default": true,
      "label": "t:sections.main-collection-banner.settings.show_collection_description.label"
    },
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "default": false,
      "label": "t:sections.main-collection-banner.settings.show_collection_image.label",
      "info": "t:sections.main-collection-banner.settings.show_collection_image.info"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label"
    }
  ]
}
{% endschema %}

After you update it will show look like the screenshot below:

EBOOST_0-1688025088696.png
EBOOST_0-1688025088696.png1159×379 143 KB

3

Hello Eboost, thank you for your reply however this did not work for me and I would also like the collection title on top of each image either in the middle or the top left corner. Thanks again!

4

Hi @LearningDev ,

EBOOST_1-1688092896516.png
EBOOST_1-1688092896516.png1172×278 181 KB

If you would like to show it like the screenshot above after that you can use code below. If it doesn’t work for you then could you please draw an image. I will base on it help you.

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}

{%- style -%}
  @media screen and (max-width: 749px) {
    .collection-hero--with-image .collection-hero__inner {
      padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
    }
  }
  
{%- endstyle -%}

  

    

      # 
        {{ 'sections.collection_template.title' | t }}: 
        {{- collection.title | escape -}}
         

      {%- if section.settings.show_collection_description -%}
        {{ collection.description }}

      {%- endif -%}
    

    {%- if section.settings.show_collection_image and collection.image -%}
        
        
        

      
    {%- endif -%}
  

{% schema %}
{
  "name": "t:sections.main-collection-banner.name",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.main-collection-banner.settings.paragraph.content"
    },
    {
      "type": "checkbox",
      "id": "show_collection_description",
      "default": true,
      "label": "t:sections.main-collection-banner.settings.show_collection_description.label"
    },
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "default": false,
      "label": "t:sections.main-collection-banner.settings.show_collection_image.label",
      "info": "t:sections.main-collection-banner.settings.show_collection_image.info"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label"
    }
  ]
}
{% endschema %}
5

@EBOOST that is exactly what I want it to do but when I replace the main-collection-banner.liquid, nothing happens

6

Hi,

Could you share your store url, url page that you would like tho show and protect password? I will help to check it.

7

@EBOOST Hello, our store is not live yet, I will update you when it is ready