Design question

Store Design
,
1

Hey everyone,
I was wondering if anyone knows how to add this Overlay (like the one in the picture) into my theme? I need it on each individual product page, and it has to be editable.

I’d really appreciate any help!

TMHFhr90TnyI-F_B1tWA4A
TMHFhr90TnyI-F_B1tWA4A1490×670 131 KB

2 Likes
2

Hi @Thee76s something that specific in logic and design is an advanced theme customization beyond the scope of free help on the forums.
Crudely you’d use either tags, or better as a list metafield or a number metafield depending on how you’d want to manage it day to day; :technologist: numbers can make it quicker to change but harder to remember what text the values turn into.

If your code savvy you could burn some time asking the AI sidekick to generate a section to the specifications then try to convert that into a block to go in the product info section.

Or just reach out to me for theme customization services; click profile pic for options to connect and please always provide context in new communications.

3

Hey, I dmt you private :slight_smile:

4

Hi @Thee76s

We’ll need to do this using metafields, dear, since each product will have different data.

5

Hi,

Hope this will help

  • Create 3 product metafields (show/text/color).
  • Add Overlay Badge section.

Code example

{% comment %}
  Overlay Badge Section (works on product templates)
  - Shows a corner ribbon you can customize
  - Uses product metafields if present; otherwise uses section defaults
{% endcomment %}

{% if template.name contains 'product' %}
  {% assign show_overlay = false %}

  {% if product.metafields.custom.overlay_show == true %}
    {% assign show_overlay = true %}
  {% elsif section.settings.default_show %}
    {% assign show_overlay = true %}
  {% endif %}

  {% if show_overlay %}
    {% assign text = product.metafields.custom.overlay_text | default: section.settings.text %}
    {% assign bg = product.metafields.custom.overlay_color | default: section.settings.bg %}
    {% assign fg = section.settings.fg %}
    {% assign pos = section.settings.position %}

    <style>
      .pdp-ribbon-wrapper {
        position: fixed; /* stays in the page corner on product pages */
        z-index: 9999;
        pointer-events: none; /* clicks pass through */
      }
      .pdp-ribbon-wrapper--top-left  { top: 0; left: 0; }
      .pdp-ribbon-wrapper--top-right { top: 0; right: 0; }
      .pdp-ribbon {
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
      }
      .pdp-ribbon span {
        position: absolute;
        display: block;
        width: 280px;
        padding: 10px 0;
        text-align: center;
        font-weight: 700;
        letter-spacing: .5px;
        transform: rotate(-45deg);
        transform-origin: center;
        top: 42px; /* nudges the ribbon into the corner */
        left: -40px;
        background: {{ bg }};
        color: {{ fg }};
        opacity: {{ section.settings.opacity }};
        box-shadow: 0 4px 10px rgba(0,0,0,.15);
      }
      /* Flip for top-right */
      .pdp-ribbon-wrapper--top-right .pdp-ribbon span {
        transform: rotate(45deg);
        left: -40px;
        right: auto;
      }

      /* Small screens: make it slimmer */
      @media (max-width: 640px) {
        .pdp-ribbon { width: 150px; height: 150px; }
        .pdp-ribbon span { width: 220px; top: 32px; }
      }
    </style>

    <div class="pdp-ribbon-wrapper pdp-ribbon-wrapper--{{ pos }}">
      <div class="pdp-ribbon">
        <span>{{ text }}</span>
      </div>
    </div>
  {% endif %}
{% endif %}

{% schema %}
{
  "name": "Overlay Badge",
  "tag": "section",
  "class": "overlay-badge",
  "settings": [
    { "type": "text", "id": "text", "label": "Default text", "default": "BEST SELLER" },
    { "type": "color", "id": "bg", "label": "Default background", "default": "#E63946" },
    { "type": "color", "id": "fg", "label": "Text color", "default": "#FFFFFF" },
    {
      "type": "select",
      "id": "position",
      "label": "Corner",
      "default": "top-right",
      "options": [
        { "value": "top-left", "label": "Top left" },
        { "value": "top-right", "label": "Top right" }
      ]
    },
    { "type": "range", "id": "opacity", "label": "Opacity", "min": 0.2, "max": 1.0, "step": 0.05, "default": 0.95 },
    { "type": "checkbox", "id": "default_show", "label": "Show if product metafield is empty", "default": true }
  ],
  "templates": ["product"]
}
{% endschema %}
  • Insert section in the Product template.
  • Edit defaults in the customizer; override per product via metafields.