H1 title as an image text overlay - Express theme

AlexK3
New Member
1 0 0

Hey, how can I edit the code in the Express theme so that H1 title is displayed as an image text overlay? Here's the part of code in question:

<section class="collection__section" data-section-id="{{ section.id }}">
  <div class="collection-wrapper">
    <h1 class="collection__title center">{{ collection.title }}</h1>
    <div class="collection-info collection-info--template">
      {%- if section.settings.show_collection_image and collection.image -%}
      <div class="collection-image-wrapper">
          <div class="collection-image-container">
            <img srcset="{% if collection.image.width >= 311 %}{{ collection.image | img_url: '311x' }} 311w,{% endif %}
                {% if collection.image.width >= 622 %}{{ collection.image | img_url: '622x' }} 622w,{% endif %}
                {% if collection.image.width >= 685 %}{{ collection.image | img_url: '685x' }} 685w,{% endif %}
                {% if collection.image.width >= 1370 %}{{ collection.image | img_url: '1370x' }} 1370w,{% endif %}
                {% if collection.image.width >= 1080 %}{{ collection.image | img_url: '1080x' }} 1080w,{% endif %}
                {% if collection.image.width >= 2160 %}{{ collection.image | img_url: '2160x' }} 2160w{% endif %}"
              sizes="(min-width: 1200px) 1080px, (min-width: 750px) calc(100vw - 8rem), calc(100vw - 6.4rem)"
              src="{{ collection.image | img_url: '1080x' }}"
              width="{{ collection.image.width }}"
              height="{{ collection.image.height }}"
              loading="lazy"
              class="media-cover"
              alt="{{ collection.title }}">
          </div>
        </div>
      {%- endif -%}

 

0 Likes
Pallavi
Shopify Expert
2367 396 513

Hello

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

.collection-wrapper h1.collection__title.center {
position: absolute;
background: #0000002e;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}

section.collection__section .collection-wrapper {
position: relative;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes