Solved

Custom HTML Section / Impulse theme

TimW
Excursionist
28 2 10

Hi,

in my old theme I added a "custom html section" for the homepage.
Now I am working with impulse theme and forgot how I added this section in my template.

Can someone help me with that please?

Thank you very much!

Tim

Accepted Solution (1)
TimW
Excursionist
28 2 10

This is an accepted solution.

I got it 🙂
Found the code in my old section folder.

If somebody wants the code, contact me. 🙂

Now I have my html section again:

TimW_0-1624538140161.png

 

View solution in original post

Replies 18 (18)

dmwwebartisan
Shopify Partner
12280 2546 3694

@TimW 

Please share screenshot what do you want .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
TimW
Excursionist
28 2 10

@dmwwebartisan 
I want a section named "custom html" There I can put in custom code.

TimW_0-1624537054450.png


I need to insert a skript from "reviews on my website"

The last time some agency made this for me.

TimW
Excursionist
28 2 10

This is an accepted solution.

I got it 🙂
Found the code in my old section folder.

If somebody wants the code, contact me. 🙂

Now I have my html section again:

TimW_0-1624538140161.png

 

TimW
Excursionist
28 2 10

@KetanKumar 
I put in this script in "footer html" section but it doesnt show up in my footer:

TimW_0-1624540947353.png

 

I added this code in my footer.liquid to get this "custom footer html" section:

{
      "type": "html",
      "name": "HTML",
      "settings": [
        {
          "type": "html",
          "id": "footer_html",
          "label": "Footer HTML"
        }
      ]
    },

 I think something is missing.

https://pevhjlnb79zex8x3-56851923137.shopifypreview.com

 

dmwwebartisan
Shopify Partner
12280 2546 3694

@TimW 

Please share Sections/footer.liquid file code.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
TimW
Excursionist
28 2 10

Footer.liquid

{%- liquid
  assign show_selectors = false
  assign currency_selector = false
  assign locale_selector = false

  if section.settings.show_currency_selector and shop.enabled_currencies.size > 1
    assign currency_selector = true
  endif

  if section.settings.show_locale_selector and shop.enabled_locales.size > 1
    assign locale_selector = true
  endif

  if currency_selector or locale_selector
    assign show_selectors = true
  endif
-%}

{%- if settings.color_footer == settings.color_body_bg -%}
  {%- style -%}
    .site-footer {
      border-top: 1px solid {{ settings.color_borders }};
    }
  {%- endstyle -%}
{%- endif -%}

<footer class="site-footer" data-section-id="{{ section.id }}" data-section-type="footer-section">
  <div class="page-width">

    <div class="grid">
      {%- assign row_width = 0 -%}
      {%- for block in section.blocks -%}
        {%- assign row_width = row_width | plus: block.settings.container_width -%}
        {%- if row_width > 100 -%}
          <div class="footer__clear small--hide"></div>
          {%- assign row_width = row_width | minus: 100 -%}
        {%- endif -%}

        <div {{ block.shopify_attributes }} class="grid__item footer__item--{{ block.id }}" data-type="{{ block.type }}">
          {%- style -%}
            @media only screen and (min-width: 769px) and (max-width: 959px) {
              .footer__item--{{ block.id }} {
                width: 50%;
                padding-top: 40px;
              }
              .footer__item--{{ block.id }}:nth-child(2n + 1) {
                clear: left;
              }
            }
            @media only screen and (min-width: 960px) {
              .footer__item--{{ block.id }} {
                width: {{ block.settings.container_width }}%;
              }

            }
          {%- endstyle -%}

          {%- liquid
            case block.type
              when 'logo_social'
                render 'footer-logo', block: block
              when 'custom'
                render 'footer-custom-text', block: block
              when 'newsletter'
                render 'footer-newsletter', block: block
              when 'menu'
                render 'footer-menu', block: block
            endcase
          -%}
        </div>
      {%- endfor -%}
      {%- for block in section.blocks -%}
        {%- if block.type == 'logo' -%}
          <div class="grid__item medium-up--hide">
            {%- render 'footer-logo', block: block -%}
          </div>
        {%- endif -%}
      {%- endfor -%}
    </div>

    {%- if show_selectors -%}
      <div class="footer__section">
        {%- render 'multi-selectors',
          locale_selector: locale_selector,
          currency_selector: currency_selector,
          show_currency_flags: section.settings.show_currency_flags
          location: 'footer'
        -%}
      </div>
    {%- endif -%}

    {%- if section.settings.show_payment_icons -%}
      {%- unless shop.enabled_payment_types == empty -%}
        <ul class="inline-list payment-icons footer__section">
          {%- for type in shop.enabled_payment_types -%}
            <li class="icon--payment">
              {{ type | payment_type_svg_tag }}
            </li>
          {%- endfor -%}
        </ul>
      {%- endunless -%}
    {%- endif -%}

    {%- if section.settings.show_copyright -%}
      <p class="footer__small-text">
        &copy; {{ 'now' | date: '%Y' }} {{ shop.name }}
        {%- if section.settings.copyright_text != blank -%}
          {{ section.settings.copyright_text }}
        {%- endif -%}
      </p>
    {%- endif -%}
   

  </div>
</footer>

{% schema %}
  {
    "name": "Footer",
    "max_blocks": 12,
    "settings": [
      {
        "type": "header",
        "content": "Language selector",
        "info": "To add a language, go to your [language settings.](/admin/settings/languages)"
      },
      {
        "type": "checkbox",
        "id": "show_locale_selector",
        "label": "Show language selector",
        "default": true
      },
      {
        "type": "header",
        "content": "Currency selector",
        "info": "To add a currency, go to your [currency settings.](/admin/settings/payments)"
      },
      {
        "type": "checkbox",
        "id": "show_currency_selector",
        "label": "Show currency selector",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_currency_flags",
        "label": "Show currency flags",
        "default": true
      },
      {
        "type": "header",
        "content": "Additional footer content"
      },
      {
        "type": "checkbox",
        "id": "show_payment_icons",
        "label": "Show payment icons",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_copyright",
        "label": "Show copyright"
      },
      {
        "type": "text",
        "id": "copyright_text",
        "label": "Additional copyright text"
      }
    ],
    "blocks": [
      {
        "type": "logo_social",
        "name": "Logo",
        "limit": 1,
        "settings": [
          {
            "type": "image_picker",
            "id": "logo",
            "label": "Logo image"
          },
          {
            "type": "range",
            "id": "desktop_logo_height",
            "label": "Logo height",
            "default": 50,
            "min": 20,
            "max": 120,
            "unit": "px"
          },
          {
            "type": "range",
            "id": "container_width",
            "label": "Column width",
            "default": 25,
            "min": 15,
            "max": 95,
            "unit": "%"
          }
        ]
      },
{
      "type": "html",
      "name": "HTML",
      "settings": [
        {
          "type": "html",
          "id": "footer_html",
          "label": "Footer HTML"
        }
      ]
    },
      {
        "type": "menu",
        "name": "Navigation",
        "settings": [
          {
            "type": "checkbox",
            "id": "show_footer_title",
            "label": "Show heading"
          },
          {
            "type": "link_list",
            "id": "menu",
            "label": "Choose a menu",
            "default": "footer",
            "info": "This menu won't show dropdown items"
          },
          {
            "type": "range",
            "id": "container_width",
            "label": "Column width",
            "default": 25,
            "min": 15,
            "max": 95,
            "unit": "%"
          }
        ]
      },
      {
        "type": "newsletter",
        "name": "Newsletter and social",
        "limit": 1,
        "settings": [
          {
            "type": "checkbox",
            "id": "show_footer_title",
            "label": "Show heading",
            "default": true
          },
          {
            "type": "paragraph",
            "content": "Any customers who sign up will have an account created for them in Shopify. [View customers](/admin/customers)."
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Sign up and save"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "info": "Optional",
            "default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
          },
          {
            "type": "range",
            "id": "container_width",
            "label": "Column width",
            "default": 25,
            "min": 15,
            "max": 95,
            "unit": "%"
          }
        ]
      },
      {
        "type": "custom",
        "name": "Custom text",
        "settings": [
          {
            "type": "checkbox",
            "id": "show_footer_title",
            "label": "Show heading",
            "default": true
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Custom text"
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Add your own custom text here.</p>"
          },
          {
            "type": "range",
            "id": "container_width",
            "label": "Column width",
            "default": 25,
            "min": 15,
            "max": 95,
            "unit": "%"
          }
        ]
      }
    ],
    "default": {
      "settings": {},
      "blocks": [
        {
          "type": "menu",
          "settings": {}
        },
        {
          "type": "logo_social",
          "settings": {}
        }
      ]
    }
  }
{% endschema %}

 

custom.html.liquid

<div class="page-width">
  {{ section.settings.custom_html }}
</div>



{% schema %}
{
  "name": {
    "cs": "Vlastní HTML",
    "da": "Tilpasset HTML",
    "de": "Benutzerdefiniertes HTML",
    "en": "Custom HTML",
    "es": "HTML personalizado",
    "fi": "Mukautettu HTML",
    "fr": "Code HTML personnalisé",
    "it": "HTML personalizzato",
    "ja": "HTMLをカスタムする",
    "ko": "사용자 지정 HTML",
    "nb": "Tilpasset HTML",
    "nl": "Aangepaste HTML",
    "pl": "Niestandardowy HTML",
    "pt-BR": "HTML personalizado",
    "pt-PT": "HTML personalizado",
    "sv": "Anpassa HTML",
    "th": "HTML แบบกำหนดเอง",
    "tr": "Özel HTML",
    "vi": "HTML tùy chỉnh",
    "zh-CN": "自定义 HTML",
    "zh-TW": "自訂 HTML"
  },
  "class": "index-section",
  "settings": [
    {
      "type": "html",
      "id": "custom_html",
      "label": {
        "cs": "Vlastní HTML",
        "da": "Tilpasset HTML",
        "de": "Benutzerdefiniertes HTML",
        "en": "Custom HTML",
        "es": "HTML personalizado",
        "fi": "Mukautettu HTML",
        "fr": "Code HTML personnalisé",
        "it": "HTML personalizzato",
        "ja": "HTMLをカスタムする",
        "ko": "사용자 지정 HTML",
        "nb": "Tilpasset HTML",
        "nl": "Aangepaste HTML",
        "pl": "Niestandardowy HTML",
        "pt-BR": "HTML personalizado",
        "pt-PT": "HTML personalizado",
        "sv": "Anpassa HTML",
        "th": "HTML แบบกำหนดเอง",
        "tr": "Özel HTML",
        "vi": "HTML tùy chỉnh",
        "zh-CN": "自定义 HTML",
        "zh-TW": "自訂 HTML"
      },
      "default": {
        "cs": "<h2>Informujte o své značce</h2><p>Naformátujte svůj text pomocí HTML, aby byl přehledný a srozumitelný. Prostřednictvím takového textu pak můžete informovat zákazníky o své značce.</p>",
        "da": "<h2>Fortæl om dit brand</h2><p>Brug HTML til at formatere din tekst, så den nemt kan læses.Denne tekst kan bruges til at dele oplysninger om dit brand med dine kunder.</p>",
        "de": "<h2>Informiere über deine Marke</h2><p>Formatiere deinen Text mit HTML, damit er leichter lesbar ist. Mit diesem Text kannst du deine Kunden über deine Marke informieren.</p>",
        "en": "<h2>Talk about your brand</h2><p>Use HTML to format your text so it can be easily read. This text can be used to share information about your brand with customers.</p>",
        "es": "<h2>Habla sobre tu marca</h2><p>Usa HTML para formatear tu texto para que se pueda leer fácilmente. Este texto se puede usar para compartir información sobre tu marca con los clientes.</p>",
        "fi": "<h2>Puhu brändistäs</h2>i<p>Käytä HTML:ää tekstisi muokkaamiseen, jotta sitä voi lukea helposti. Tämän tekstin avulla voit jakaa tietoa brändistäsi asiakkaittesi kanssa.</p>",
        "fr": "<h2>Parlez de votre marque</h2><p>Utilisez le code HTML pour formater votre texte afin qu'il puisse être facilement lu. Vous pouvez utiliser ce texte pour partager des informations sur votre marque avec les clients.</p>",
        "it": "<h2>Parla del tuo brand</h2><p>Utilizza l'HTML per formattare il testo in modo che sia facilmente leggibile. Questo testo può essere utilizzato per condividere le informazioni sul tuo brand con i clienti.</p>",
        "ja": "<h2>あなたのブランドについて話す</h2><p>HTMLを使用してテキストを読みやすくフォーマットしてください。このテキストはあなたのブランドに関する情報をお客様と共有するために使用できます。</p>",
        "ko": "<h2>브랜드 이야기하기</h2> <p>텍스트를 형식화하기 위해 HTML을 사용하여 쉽게 읽을 수 있습니다. 이 텍스트를 사용하여 브랜드에 대한 정보를 고객과 공유할 수 있습니다.</p>",
        "nb": "<h2>Snakk om merkevaren din</h2><p>Bruk HTML for å formatere teksten din så den er lettlest. Denne teksten kan brukes til å dele informasjon om merkevaren din med kundene.</p>",
        "nl": "<h2>Praat over je merk</h2><p>Gebruik HTML om je tekst zo op te maken dat deze makkelijk leesbaar is. Deze tekst kan worden gebruikt om informatie over je merk met klanten te delen.</p>",
        "pl": "<h2>Opowiedz o swojej marce</h2><p>Użyj języka HTML do sformatowania tekstu, tak aby można go było łatwo odczytać. Tekst ten może służyć do udostępniania klientom informacji o marce.</p>",
        "pt-BR": "<h2>Fale sobre sua marca</h2><p>Use HTML para formatar seu texto para que ele possa ser lido com facilidade. Esse texto pode ser usado para compartilhar informações sobre sua marca com os clientes.</p>",
        "pt-PT": "<h2>Fale sobre a sua marca</h2><p>Utilize HTML para formatar o seu texto para que este possa ser lido com facilidade. Este texto pode ser utilizado para partilhar informações sobre a sua marca com os clientes.</p>",
        "sv": "<h2>Prata om ditt varumärke</h2><p> Använd HTML för att formatera din text så att den lätt kan läsas. Den här texten kan användas för att dela information om ditt varumärke med kunder.</p>",
        "th": "<h2>พูดถึงแบรนด์ของคุณ</h2><p>ใช้ HTML เพื่อจัดรูปแบบข้อความของคุณให้อ่านง่าย ข้อความนี้สามารถใช้เพื่อแบ่งปันข้อมูลเกี่ยวกับแบรนด์ของคุณกับลูกค้าได้</p>",
        "tr": "<h2>Markanızdan bahsedin</h2><p>Metninizi, kolayca okunabilmesi için HTML kullanarak biçimlendirin. Bu metin, müşterilerle markanız hakkında bilgi paylaşmak için kullanılabilir.</p>",
        "vi": "<h2>Chia sẻ về thương hiệu của bạn</h2><p>Sử dụng HTML để định dạng văn bản sao cho dễ đọc. Có thể sử dụng văn bản này để chia sẻ thông tin về thương hiệu của bạn với khách hàng.</p>",
        "zh-CN": "<h2>介绍您的品牌</h2><p>使用 HTML 设置文本格式,以便轻松阅读。此文本可用于与客户分享有关您的品牌的信息。</p>",
        "zh-TW": "<h2>描述您的品牌</h2><p>使用 HTML 設定文字格式,使文字容易閱讀。這段文字可以用來與顧客分享您的品牌資訊。</p>"
      }
    }
  ],
  "presets": [
    {
      "name": {
        "cs": "Vlastní HTML",
        "da": "Tilpasset HTML",
        "de": "Benutzerdefiniertes HTML",
        "en": "Custom HTML",
        "es": "HTML personalizado",
        "fi": "Mukautettu HTML",
        "fr": "Code HTML personnalisé",
        "it": "HTML personalizzato",
        "ja": "HTMLをカスタムする",
        "ko": "사용자 지정 HTML",
        "nb": "Tilpasset HTML",
        "nl": "Aangepaste HTML",
        "pl": "Niestandardowy HTML",
        "pt-BR": "HTML personalizado",
        "pt-PT": "HTML personalizado",
        "sv": "Anpassa HTML",
        "th": "HTML แบบกำหนดเอง",
        "tr": "Özel HTML",
        "vi": "HTML tùy chỉnh",
        "zh-CN": "自定义 HTML",
        "zh-TW": "自訂 HTML"
      },
      "category": {
        "cs": "Pokročilé",
        "da": "Avanceret",
        "de": "Advanced",
        "en": "Advanced",
        "es": "Avanzado",
        "fi": "Advanced",
        "fr": "Advanced",
        "it": "Advanced",
        "ja": "高度",
        "ko": "Advanced",
        "nb": "Avansert",
        "nl": "Advanced",
        "pl": "Zaawansowane",
        "pt-BR": "Advanced",
        "pt-PT": "Avançado",
        "sv": "Avancerad",
        "th": "ขั้นสูง",
        "tr": "Gelişmiş",
        "vi": "Nâng cao",
        "zh-CN": "高级版",
        "zh-TW": "Advanced"
      }
    }
  ]
}
{% endschema %}
dmwwebartisan
Shopify Partner
12280 2546 3694

@TimW 

This is code customization work .

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
KetanKumar
Shopify Partner
36839 3635 11972

@TimW 

can you please change type html to  textarea

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
TimW
Excursionist
28 2 10

@KetanKumar

Doesn´t work.

KetanKumar
Shopify Partner
36839 3635 11972

@TimW 

sorry i can't see this code

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
My70
New Member
10 0 0

Hello dear,

I need help from you, I want to remove the slide effect on hero slideshow image & I see black fade image at the start of my website for few seconds while loading hero slideshow image for Safari & Chrome, I just want the quick have a fade-in effect. I find it very annoying, that's why I want to ask you what I can do 

 

Laptop and phone Iphone safari/google chrome have the same problems.

 

Is this an easy solution? I'm waiting for your response.

 

JaylaFerrell
Shopify Partner
5 0 2

You still have the code? 

Borido
Tourist
4 0 3

Hi Tim,

I have the same Problem. Could you pls share the code?

Lg Bennet 

 

KetanKumar
Shopify Partner
36839 3635 11972

@Borido 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Borido
Tourist
4 0 3

Hi and thanks a lot 🙂 

Im working on this site: https://good-smith.com/

the footer does work but I cant insert a custom html code as one of the blocks 

KetanKumar
Shopify Partner
36839 3635 11972

@Borido 

yes, please try this code

https://www.huratips.com/tech-tips/how-to-create-a-custom-html-section-in-shopify.html

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Borido
Tourist
4 0 3

Hi Ketan, it doesnt work. It gives me this error: 

  • New schema is incompatible with the current setting value. Ungültiger Typwert für Block ‚98a76dd9-b4e3-41fd-a830-90bcfd66c182'. Typ muss in einem Schema definiert sein.
KetanKumar
Shopify Partner
36839 3635 11972

@Borido 

oh sorry for that issue 

it can be done customization code

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing