Change Hero image to an SVG on Debut Theme

Solved
plasmablobs
Excursionist
11 1 1

Hi folks,

I've successfully changed my logo to an SVG file for crisper, faster graphics.

I now want to change my hero main image. I've attempting to edit the hero.liquid file to add the svg file I've taken the same sort of approach as editing a logo within the header.liquid. i.e. by uploading the svg file into assets and changing the img url to {%- assign img_url = 'hero.svg' | asset_url -%}. 

However in the hero.liquid there are so many layout controls, including widths, autosizing, lazyloading etc and despite my best efforts a couple of times I find that the hero.svg file comes up as a grey blank rectangle.

Here's my current hero.liquid file for reference which I've now reverted back to. Ideally I'd like to copy and paste a revised version of this where I want to keep the latest debut theme 17.11 layout changes etc.

Needless to say this could all be resolved if Shopify supported SVG files as upload-able in the GUI theme editor!

Thanks in advance,

Dan @ www.plasmablobs.com

{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_size == 'adapt' -%}
  {%- if section.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio -%}
  {%- endif -%}
  {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
  {%- style -%}
    .hero-{{ section.id }} {
      height: {{- wrapper_height -}}vw !important;
    }
  {%- endstyle -%}
{%- endif -%}
<div data-section-id="{{ section.id }}" data-section-type="hero-section">
  {%- if section.settings.hero_layout == 'fixed_width' -%}
    <div class="page-width">
  {%- endif -%}
  {%- if section.settings.hero_layout == 'fixed_width' and section.settings.hero_size ==  'adapt' -%}
    {%- assign slide_width = 1090 -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio | default: 2.0 -%}
    <div class="hero-fixed-width hero--adapt"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}"
         data-image-loading-animation>
      {%- assign img_url = section.settings.image | asset_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {%- if section.settings.image.width < max_width -%}
        {%- assign slide_width = section.settings.image.width -%}
      {%- endif -%}
      <div class="hero-fixed-width__content">
        <div class="page-width text-center"> 
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">
              {{ section.settings.button_label | escape }}
            </a>
          {%- endif -%}
        </div>
      </div>
      {%- if section.settings.image != blank -%}
        <img class="hero-fixed-width__image lazyload lazypreload"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
             data-aspectratio="{{ section.settings.image.aspect_ratio }}"
             data-sizes="auto"
             style="{%- if slide_width <= max_width -%}
                      {%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
                      min-width: {{ min_width }}%;
                    {%- endif -%}
                    object-position: {{ section.settings.alignment }};"
             alt="{{ section.settings.image.alt | escape }}">
      {%- else -%}
        <span>
          {% capture current %}{% cycle 1, 2 %}{% endcapture %}
          {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </span>
      {%- endif -%}
      <noscript>
        <div class="hero-fixed-width__image"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
      </noscript>
    </div>
  {%- else -%}
    <div class="hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}"
         {%- if section.settings.image -%}
          {% unless section.settings.image.alt == blank %}
          role="img"
          aria-label="{{ section.settings.image.alt | escape }}"
          data-alt="{{ section.settings.image.alt | escape }}"
          {% endunless %}
         data-bg="{{ section.settings.image | img_url: '300x300' }}"
         data-bgset="{% include 'bgset', image: section.settings.image %}"
         data-sizes="auto"
         data-parent-fit="cover"
         style="background-position: {{ section.settings.alignment }};"
         data-image-loading-animation
         {%- endif -%}>
    {%- if section.settings.image == blank -%}
      <div class="placeholder-background">
        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {%- endif -%}
      <div class="hero__inner">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            {%- capture ariaLabel -%}
              {{- section.settings.button_label -}}
              {%- if section.settings.button_link.type == 'frontpage_link' -%}
                : {{ 'homepage.general.title' | t -}}
              {%- elsif section.settings.button_link.type == 'catalog_link' -%}
                : {{ 'collections.catalog.title' | t -}}
              {%- elsif section.settings.button_link.object.title -%}
                : {{ section.settings.button_link.object.title -}}
              {%- endif -%}
            {%- endcapture -%}

            <a href="{{ section.settings.button_link }}"
              class="btn hero__btn"
              aria-label="{{ ariaLabel }}">
              {{- section.settings.button_label | escape -}}
            </a>
          {%- endif -%}
        </div>
      </div>
    </div>
    <noscript>
      <div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %}"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
    </noscript>
  {%- endif -%}
  {%- if section.settings.hero_layout == 'fixed_width' -%}
    </div>
  {%- endif -%}
</div>

 

KetanKumar
Shopify Partner
16876 1843 6309

@plasmablobs 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Jason
Shopify Expert
10254 142 1940

^ Sorry you get spammy posts like that @plasmablobs . I am guessing you didn't post here so someone would pitch you their services. If they did spam you some sales pitch on their services, let me know. Secondly, what a great post from you. It has lots of details and context so gives us a bunch to work with right away. What it lacks - and this is really the important part - is the live example. Can you share one?

If you can't share the url let's at least start with the HTML being output for that part. The way you're referencing the file could be off and that html could give you/us an immediate clue to where it went wrong.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
plasmablobs
Excursionist
11 1 1

Hi Jason,

Thanks for your help. The debut theme hero page is the front page on my e-commerce site: https://www.plasmablobs.com/.

I just want my hero page to use an .svg file like this:

https://www.plasmablobs.com/pages/test

An interesting second question is how to correct the font in .svg in the text bubble, which has changed type-face along the size and therefore the position is wrong! I have tried uploading the font *.oft file as an asset but it hasn't worked. I suspect I'll need to edit the .svg file code to link back to the shopify assets - or turn the bubble caption into a shape perhaps?

Anyway, I've already changed the Plasmablobs logo on the front screen using the example on: 

https://community.shopify.com/c/Shopify-Design/Adding-SVG-Images-to-webpage/td-p/245871 (great assistance from @tim!)

This section within my hero.liquid appears to be the key part.

 

 

         data-bg="{{ section.settings.image | img_url: '300x300' }}"
         data-bgset="{% include 'bgset', image: section.settings.image %}"

 

 

However, It's wrapped within a div, which I must say I'm not familiar with. I appreciate some of the image sizing and lazyloading aspects need to go and appreciate that various parts of the div section due to if statements will require changing. Obviously the assign img_url part can be changed and potentially the section.settings.image part may need changing. I have left a gui loaded *.png file which it may still see active in section.settings.image.

 

 

{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_size == 'adapt' -%}
  {%- if section.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio -%}
  {%- endif -%}
  {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
  {%- style -%}
    .hero-{{ section.id }} {
      height: {{- wrapper_height -}}vw !important;
    }
  {%- endstyle -%}
{%- endif -%}
<div data-section-id="{{ section.id }}" data-section-type="hero-section">
  {%- if section.settings.hero_layout == 'fixed_width' -%}
    <div class="page-width">
  {%- endif -%}
  {%- if section.settings.hero_layout == 'fixed_width' and section.settings.hero_size ==  'adapt' -%}
    {%- assign slide_width = 1090 -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio | default: 2.0 -%}
    <div class="hero-fixed-width hero--adapt"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}"
         data-image-loading-animation>
      {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {%- if section.settings.image.width < max_width -%}
        {%- assign slide_width = section.settings.image.width -%}
      {%- endif -%}
      <div class="hero-fixed-width__content">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">
              {{ section.settings.button_label | escape }}
            </a>
          {%- endif -%}
        </div>
      </div>
      {%- if section.settings.image != blank -%}
        <img class="hero-fixed-width__image lazyload lazypreload"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
             data-aspectratio="{{ section.settings.image.aspect_ratio }}"
             data-sizes="auto"
             style="{%- if slide_width <= max_width -%}
                      {%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
                      min-width: {{ min_width }}%;
                    {%- endif -%}
                    object-position: {{ section.settings.alignment }};"
             alt="{{ section.settings.image.alt | escape }}">
      {%- else -%}
        <span>
          {% capture current %}{% cycle 1, 2 %}{% endcapture %}
          {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </span>
      {%- endif -%}
      <noscript>
        <div class="hero-fixed-width__image"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
      </noscript>
    </div>
  {%- else -%}
    <div class="hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}"
         {%- if section.settings.image -%}
          {% unless section.settings.image.alt == blank %}
          role="img"
          aria-label="{{ section.settings.image.alt | escape }}"
          data-alt="{{ section.settings.image.alt | escape }}"
          {% endunless %}
         data-bg="{{ section.settings.image | img_url: '300x300' }}"
         data-bgset="{% include 'bgset', image: section.settings.image %}"
         data-sizes="auto"
         data-parent-fit="cover"
         style="background-position: {{ section.settings.alignment }};"
         data-image-loading-animation
         {%- endif -%}>
    {%- if section.settings.image == blank -%}
      <div class="placeholder-background">
        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {%- endif -%}
      <div class="hero__inner">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            {%- capture ariaLabel -%}
              {{- section.settings.button_label -}}
              {%- if section.settings.button_link.type == 'frontpage_link' -%}
                : {{ 'homepage.general.title' | t -}}
              {%- elsif section.settings.button_link.type == 'catalog_link' -%}
                : {{ 'collections.catalog.title' | t -}}
              {%- elsif section.settings.button_link.object.title -%}
                : {{ section.settings.button_link.object.title -}}
              {%- endif -%}
            {%- endcapture -%}

            <a href="{{ section.settings.button_link }}"
              class="btn hero__btn"
              aria-label="{{ ariaLabel }}">
              {{- section.settings.button_label | escape -}}
            </a>
          {%- endif -%}
        </div>
      </div>
    </div>
    <noscript>
      <div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %}"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
    </noscript>
  {%- endif -%}
  {%- if section.settings.hero_layout == 'fixed_width' -%}
    </div>
  {%- endif -%}
</div>

 

 

I hope that helps you help me! I may even send you a free mug if you're in the UK/USA for your help (if you want one that is).

Cheers, Dan.

0 Likes
plasmablobs
Excursionist
11 1 1

Wow, not a sausage on this?

Just to re-iterate the requirement in simple terms - set a hero image as an svg.

The theme is debut, so the hero image is within a div as a bgset.

I'd be grateful - thanks! 

0 Likes
plasmablobs
Excursionist
11 1 1

This is an accepted solution.

I ended up solving my own question! I wanted to keep the hero section controls and text overlay. 

So this is what my hero.liquid file looks like now (ignoring the language schema parts at the very bottom). The key bits are the assign img_url and the <img_src.... parts. I'm sure someone could tidy this up a bit but it works well. The SVGs look amazing and scale nicely with the window. I put a changer in to change the image according to the day. Due to caching, I understand that the now function may not be hugely reliable but then as long as it changes here and there then I'm happy!

I really hope this helps someone else as I just couldn't find anything on the net about doing this! Check out my store to see it in action at https://www.plasmablobs.com.

{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_size == 'adapt' -%}
  {%- if section.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio -%}
  {%- endif -%}
  {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
  {%- style -%}
    .hero-{{ section.id }} {
      height: {{- wrapper_height -}}vw !important;
    }
  {%- endstyle -%}
{%- endif -%}



{% capture day %}{{ 'now' | date: '%A' }}{% endcapture %}
{% case day %}
  {% when 'Sunday' %}
		{%- assign img_url = "1.svg" | asset_url -%}
  {% when 'Monday' %}
		{%- assign img_url = "2.svg" | asset_url -%}
  {% when 'Tuesday' %}
		{%- assign img_url = "3.svg" | asset_url -%}
  {% when 'Wednesday' %}
		{%- assign img_url = "4.svg" | asset_url -%}
  {% when 'Thursday' %}
		{%- assign img_url = "5.svg" | asset_url -%}
  {% when 'Friday' %}
		{%- assign img_url = "6.svg" | asset_url -%}
  {% when 'Saturday' %}
		{%- assign img_url = "7.svg" | asset_url -%}
{% endcase %}


<div data-section-id="{{ section.id }}" data-section-type="hero-section">
  {%- if section.settings.hero_layout == 'fixed_width' -%}
    <div class="page-width">
  {%- endif -%}
  {%- if section.settings.hero_layout == 'fixed_width' and section.settings.hero_size ==  'adapt' -%}
    {%- assign slide_width = 1090 -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio | default: 2.0 -%}
    <div class="hero-fixed-width hero--adapt"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}"
         data-image-loading-animation>
      {%- if section.settings.image.width < max_width -%}
        {%- assign slide_width = section.settings.image.width -%}
      {%- endif -%}
      <div class="hero-fixed-width__content">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">
              {{ section.settings.button_label | escape }}
            </a>
          {%- endif -%}
        </div>
      </div>
      {%- if section.settings.image != blank -%}
        <img class="hero-fixed-width__image lazyload lazypreload"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048,4096]"
             data-aspectratio="{{ section.settings.image.aspect_ratio }}"
             data-sizes="auto"
             style="{%- if slide_width <= max_width -%}
                      {%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
                      min-width: {{ min_width }}%;
                    {%- endif -%}
                    object-position: {{ section.settings.alignment }};"
             alt="{{ section.settings.image.alt | escape }}">
      {%- else -%}
        <span>
          {% capture current %}{% cycle 1, 2 %}{% endcapture %}
          {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </span>
      {%- endif -%}
      <noscript>
        <div class="hero-fixed-width__image"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
      </noscript>
    </div>
  {%- else -%}
<div class="hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
         id="Hero-{{ section.id }}"

          role="img"
          aria-label="{{ section.settings.image.alt | escape }}"
          data-alt="{{ section.settings.image.alt | escape }}"

         data-parent-fit="cover"
         style="background-position: {{ section.settings.alignment }};"
         data-image-loading-animation/>
      <img src="{{ img_url }}"
           alt = "{{ shop.name }}" />

  
    {%- if section.settings.image == blank -%}
      <div class="placeholder-background">
        {{ img_url }}
      </div>
    {%- endif -%}
      <div class="hero__inner">
        <div class="page-width text-center">
          

          
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            {%- capture ariaLabel -%}
              {{- section.settings.button_label -}}
              {%- if section.settings.button_link.type == 'frontpage_link' -%}
                : {{ 'homepage.general.title' | t -}}
              {%- elsif section.settings.button_link.type == 'catalog_link' -%}
                : {{ 'collections.catalog.title' | t -}}
              {%- elsif section.settings.button_link.object.title -%}
                : {{ section.settings.button_link.object.title -}}
              {%- endif -%}
            {%- endcapture -%}

            <a href="{{ section.settings.button_link }}"
              class="btn hero__btn"
              aria-label="{{ ariaLabel }}">
              {{- section.settings.button_label | escape -}}
            </a>
                    	
          {%- endif -%}
        </div>
      </div>
    </div>
    <noscript>
      <div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %}"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
    </noscript>
  {%- endif -%}
  {%- if section.settings.hero_layout == 'fixed_width' -%}
    </div>
  {%- endif -%}
</div>
0 Likes