Custom Image Overlay Section in Shopify Dawn Theme

Step 1: Access the Theme Code

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Find your active theme (e.g., Dawn), click on Actions, then Edit code.

Step 2: Create a New Section

1. In the Sections directory, click Add a new section.
2. Name the section image-overlay and click Create section.

Step 3: Add Code to the New Section

Add the following code to your image-overlay.liquid file:

{% schema %}
{
  "name": "Image Overlay",
  "settings": [
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background Image"
    },
    {
      "type": "text",
      "id": "overlay_text",
      "label": "Overlay Text",
      "default": "Your Custom Text"
    },
    {
      "type": "color",
      "id": "overlay_text_color",
      "label": "Overlay Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "overlay_bg_color",
      "label": "Overlay Background Color",
      "default": "rgba(0, 0, 0, 0.5)"
    }
  ],
  "presets": [
    {
      "name": "Image Overlay",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<section class="image-overlay-section" style="position: relative; text-align: center; color: {{ section.settings.overlay_text_color }};">
  {% if section.settings.background_image %}
    <img src="{{ section.settings.background_image | img_url: 'master' }}" alt="Background Image" style="width: 100%; height: auto;">
  {% endif %}
  <div class="overlay-text" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: {{ section.settings.overlay_bg_color }}; padding: 20px;">
    <h2>{{ section.settings.overlay_text }}</h2>
  </div>
</section>

<style>
.image-overlay-section {
  position: relative;
  display: inline-block;
  width: 100%;
}

.image-overlay-section .overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: {{ section.settings.overlay_text_color }};
  background-color: {{ section.settings.overlay_bg_color }};
  padding: 20px;
}
</style>

Step 4: Customize the Section

1. Save the changes to image-overlay.liquid.
2. Go back to your Shopify admin panel.
3. Navigate to Online Store > Themes, and click on Customize for your theme.
4. In the theme customizer, add the new Image Overlay section to your desired page (e.g., the homepage).

Step 5: Configure the Section

1. In the theme customizer, click on Add section and select Image Overlay.
2. Upload a background image.
3. Enter the overlay text you want to display.
4. Customize the text color and background color of the overlay.
5. Save your changes.

Summary

By following these steps, you have created a custom image overlay section in the Shopify Dawn theme. This section allows you to:

1. Add an image with an overlay.
2. Customize the overlay text.
3. Customize the overlay text color and background color.

This approach provides a flexible way to add visually appealing and customizable image overlays to your Shopify store.