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
Goal: add a “Custom HTML” area in the Impulse theme (for inserting a reviews script), both on the homepage and in the footer.
What happened:
Context/terms:
Status:
Artifacts:
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
@dmwwebartisan
I want a section named “custom html” There I can put in custom code.
I need to insert a skript from “reviews on my website”
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:
@KetanKumar
I put in this script in “footer html” section but it doesnt show up in my footer:
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.
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 -%}
{% 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": "
Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.
"
},
{
"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": "
Add your own custom text here.
"
},
{
"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
{{ section.settings.custom_html }}
{% 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": "## Informujte o své značce
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.
",
"da": "## Fortæl om dit brand
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.
",
"de": "## Informiere über deine Marke
Formatiere deinen Text mit HTML, damit er leichter lesbar ist. Mit diesem Text kannst du deine Kunden über deine Marke informieren.
",
"en": "## Talk about your brand
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.
",
"es": "## Habla sobre tu marca
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.
",
"fi": "## Puhu brändistäsi
Käytä HTML:ää tekstisi muokkaamiseen, jotta sitä voi lukea helposti. Tämän tekstin avulla voit jakaa tietoa brändistäsi asiakkaittesi kanssa.
",
"fr": "## Parlez de votre marque
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.
",
"it": "## Parla del tuo brand
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.
",
"ja": "## あなたのブランドについて話す
HTMLを使用してテキストを読みやすくフォーマットしてください。このテキストはあなたのブランドに関する情報をお客様と共有するために使用できます。
",
"ko": "## 브랜드 이야기하기
텍스트를 형식화하기 위해 HTML을 사용하여 쉽게 읽을 수 있습니다. 이 텍스트를 사용하여 브랜드에 대한 정보를 고객과 공유할 수 있습니다.
",
"nb": "## Snakk om merkevaren din
Bruk HTML for å formatere teksten din så den er lettlest. Denne teksten kan brukes til å dele informasjon om merkevaren din med kundene.
",
"nl": "## Praat over je merk
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.
",
"pl": "## Opowiedz o swojej marce
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.
",
"pt-BR": "## Fale sobre sua marca
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.
",
"pt-PT": "## Fale sobre a sua marca
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.
",
"sv": "## Prata om ditt varumärke
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.
",
"th": "## พูดถึงแบรนด์ของคุณ
ใช้ HTML เพื่อจัดรูปแบบข้อความของคุณให้อ่านง่าย ข้อความนี้สามารถใช้เพื่อแบ่งปันข้อมูลเกี่ยวกับแบรนด์ของคุณกับลูกค้าได้
",
"tr": "## Markanızdan bahsedin
Metninizi, kolayca okunabilmesi için HTML kullanarak biçimlendirin. Bu metin, müşterilerle markanız hakkında bilgi paylaşmak için kullanılabilir.
",
"vi": "## Chia sẻ về thương hiệu của bạn
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.
",
"zh-CN": "## 介绍您的品牌
使用 HTML 设置文本格式,以便轻松阅读。此文本可用于与客户分享有关您的品牌的信息。
",
"zh-TW": "## 描述您的品牌
使用 HTML 設定文字格式,使文字容易閱讀。這段文字可以用來與顧客分享您的品牌資訊。
"
}
}
],
"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 %}
This is code customization work .
can you please change type html to textarea
Doesn´t work.
sorry i can’t see this code
Hi Tim,
I have the same Problem. Could you pls share the code?
Lg Bennet
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.
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
yes, please try this code
https://www.huratips.com/tech-tips/how-to-create-a-custom-html-section-in-shopify.html
Hi Ketan, it doesnt work. It gives me this error:
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.
You still have the code?