Help! I am using the Supply theme which doesn’t allow adding section with image only with their adding sections function.
I just want to add addtional images to the front page that links directly to another product page. How do I add coding for this?
Thanks in advance!
Hey, there!
Jason here from Shopify Support.
I love your store’s design. It’s clean and engaging, especially the great video you have. You can add a custom section where you can insert HTML codes in the theme editor. Here are the steps:
If there’s anything else I can help you out with, please don’t hesitate to reply back and I’d be happy to help out! Alternatively, you can always give us a call or start a live chat at any time. We’re open 24/7 for your convenience and always happy to assist!
All the best,
Jason
Hey,
I love your homepage, especially how you have filled it with so many beautiful images. It’s very inviting!
I see that you want to add addditional images to your homepage and link them to your product page. Wouldn’t it be much more simpler to just drag and drop images onto your pages instead of having to go into the theme editor and having to deal with HTML codes?
Well, please allow me to recommend our app: Shogun Page Builder.
With our drag and drop Image element, you can easily add images to your pages with a few clicks. You can also link these Image elements to your product pages. Please have a look at our Image element in action here. Images can be added as backgrounds as well!
That being said, we also provide an HTML element so all the code lovers can modify the pages to their liking 
Additionally, it’s super easy to set any standard page in Shogun as your homepage.
If you’re interested in checking it out, we have a 10-day free trial, 24/7 support and an amazing set of features that’ll let you have granular control over your pages.
If for any reason our app doesn’t meet your needs, you can uninstall at any time and still keep the pages you designed with Shogun!
Feel free to reach out to us at support@getshogun.com if you having any further questions or if you simply want to say Hi!
You can add html section and use the following html code to insert the image
<p>
<a href="link_to_product">
<img src="[http://placehold.it/1920x700](http://placehold.it/1920x700)" alt="">
</a>
</p>
replace link_to_product with your product link and put your desired image src into src of img tag, which now is just a placeholder image.
You just save my life… thanks…
Was this option removed? I do not have an option to add Custom content on my the customize theme page. How can I add custom html to the homepage?
Are you using Supply Theme? It’s still there. You have to scroll all the way to the bottom. Alternatively, if it’s not there, you can add a new section to your theme and paste this code, this is directly from supply:
<div class="rich-text">
<hr>
{% if section.settings.section_title != blank %}
<div class="section-header rich-text__heading rich-text__heading--{{ section.settings.text_size }}">
<p class="h1">{{ section.settings.section_title | escape }}</p>
</div>
{% endif %}
{% if section.settings.text != blank %}
<div class="rte rich-text__text--{{ section.settings.text_size }}">
{{ section.settings.text }}
</div>
{% endif %}
</div>
{% schema %}
{
"name": {
"de": "Rich Text",
"en": "Rich text",
"es": "Texto enriquecido",
"fr": "Texte enrichi",
"it": "Rich text",
"ja": "リッチテキスト",
"nl": "Rich text",
"pt-BR": "Rich text",
"zh-CN": "富文本",
"zh-TW": "RTF 文字"
},
"settings": [
{
"type": "text",
"id": "section_title",
"label": {
"de": "Titel",
"en": "Heading",
"es": "Título",
"fr": "Titre",
"it": "Heading",
"ja": "見出し",
"nl": "Kop",
"pt-BR": "Título",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"de": "Über Ihre Marke sprechen",
"en": "Talk about your brand",
"es": "Habla de tu marca",
"fr": "Parler de votre marque",
"it": "Parla del tuo brand",
"ja": "あなたのブランドについて語る",
"nl": "Vertel over uw merk",
"pt-BR": "Fale sobre a sua marca",
"zh-CN": "谈论您的品牌",
"zh-TW": "描述您的品牌"
}
},
{
"type": "richtext",
"id": "text",
"label": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"nl": "Tekst",
"pt-BR": "Texto",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"de": "<p>Nutzen Sie diesen Text, um Infos über Ihre Marke mitzuteilen. Beschreiben Sie ein Produkt, kündigen Sie etwas an oder heißen Sie Kunden willkommen.</p>",
"en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>",
"es": "<p>Usa este texto para compartir información sobre tu marca con tus clientes. Describe un producto, comparte anuncios o recibe clientes en tu tienda.</p>",
"fr": "<p>Utilisez ce texte pour partager des informations sur votre marque. Décrivez un produit, partagez des annonces, ou souhaitez la bienvenue à vos clients.</p>",
"it": "<p>Utilizza questo testo per condividere le informazioni sul tuo brand con i clienti. Descrivi un prodotto, condividi gli annunci o dai il benvenuto ai clienti nel tuo negozio.</p>",
"ja": "<p>このテキストを使用して、あなたのブランドに関する情報をお客様と共有します。商品を説明したり、告知の共有をしたり、あるいはあなたのストアのお客様を歓迎します。</p>",
"nl": "<p>Gebruik deze tekst om informatie over uw merk te delen met uw klanten. Beschrijf een product, deel aankondigingen of verwelkom klanten in uw winkel.</p>",
"pt-BR": "<p>Use este texto para compartilhar informações sobre sua marca com seus clientes. Descreva um produto, compartilhe novidades ou receba os clientes em sua loja.</p>",
"zh-CN": "<p>使用此文本与您的客户分享有关您品牌的信息。描述产品、分享公告或欢迎客户访问您的商店。</p>",
"zh-TW": "<p>您可以用這段文字和客戶分享品牌資訊、描述產品、分享公告，或歡迎客戶光臨您的商店。</p>"
}
},
{
"type": "select",
"id": "text_size",
"label": {
"de": "Größe",
"en": "Size",
"es": "Tamaño",
"fr": "Taille",
"it": "Misura",
"ja": "サイズ",
"nl": "Grootte",
"pt-BR": "Tamanho",
"zh-CN": "大小",
"zh-TW": "尺寸"
},
"default": "medium",
"options": [
{
"label": {
"de": "Klein",
"en": "Small",
"es": "Pequeño",
"fr": "Petite",
"it": "Small",
"ja": "小",
"nl": "Klein",
"pt-BR": "Pequeno",
"zh-CN": "小",
"zh-TW": "小型"
},
"value": "small"
},
{
"label": {
"de": "Mitte",
"en": "Medium",
"es": "Mediano",
"fr": "Moyenne",
"it": "Medium",
"ja": "中",
"nl": "Gemiddeld",
"pt-BR": "Médio",
"zh-CN": "中等",
"zh-TW": "中等"
},
"value": "medium"
},
{
"label": {
"de": "Groß",
"en": "Large",
"es": "Grande",
"fr": "Grande",
"it": "Large",
"ja": "大",
"nl": "Groot",
"pt-BR": "Grande",
"zh-CN": "大",
"zh-TW": "大型"
},
"value": "large"
}
]
}
],
"presets": [
{
"name": {
"de": "Rich Text",
"en": "Rich text",
"es": "Texto enriquecido",
"fr": "Texte enrichi",
"it": "Rich text",
"ja": "リッチテキスト",
"nl": "Rich text",
"pt-BR": "Rich text",
"zh-CN": "富文本",
"zh-TW": "RTF 文字"
},
"category": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"nl": "Tekst",
"pt-BR": "Texto",
"zh-CN": "文本",
"zh-TW": "文字"
}
}
]
}
{% endschema %}
Then it should show up.
I am using the Empire theme. I scrolled down. The screenshot is the bottom of the page. I don’t have the Custom Content option.
Is the Custom Content only available if the theme supports it? I will try adding it into the liquid file and see what happens.
Not all themes have the same sections, but you should be able to go to Online Store > Actions > Edit Code —> Navigate to your Sections folder and make a new section called “custom-content” and paste the code above.
Thanks so much for your help. Unfortunately, that added a Rich Text option, not an html option. I’m searching the supply theme for the code for the custom html but haven’t found it yet. If you know where it is, would you mind pasting the link here?
Whooooops, sorry about that, I was looking at the section above my section. I think this is the one you’re looking for, though I don’t know if the grid classes are going to be the same for your site, you may have to edit that:
<hr>
<div class="custom-content">
{% for block in section.blocks %}
{% case block.settings.width %}
{% when '25%' %}
{%- assign block_width = 'small--one-whole one-quarter' -%}
{% when '33%' %}
{%- assign block_width = 'small--one-whole one-third' -%}
{% when '50%' %}
{%- assign block_width = 'small--one-whole one-half' -%}
{% when '66%' %}
{%- assign block_width = 'small--one-whole two-thirds' -%}
{% when '75%' %}
{%- assign block_width = 'small--one-whole three-quarters' -%}
{% when '100%' %}
{%- assign block_width = 'one-whole' -%}
{% endcase %}
<div class="custom__item {{ block_width }} {% if block.settings.alignment %}align--{{ block.settings.alignment }}{% endif %}" {{ block.shopify_attributes }}>
<div class="custom__item-inner custom__item-inner--{{ block.type }}">
{% case block.type %}
{% when 'html' %}
{% if block.settings.code != blank %}
<div class="rte" data-section-id="{{ section.id }}" data-section-type="featured-content-section">
{{ block.settings.code }}
</div>
{% else %}
<div class="rte text-center">
{{ 'homepage.onboarding.no_content' | t }}
</div>
{% endif %}
{% endcase %}
</div>
</div>
{% endfor %}
{% if section.blocks.size == 0 %}
<div class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="rte text-center">
{{ 'homepage.onboarding.no_content' | t }}
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
{% schema %}
{
"name": {
"de": "Personalisierter Content",
"en": "Custom content",
"es": "Contenido personalizado",
"fr": "Contenu personnalisé",
"it": "Contenuto personalizzato",
"ja": "コンテンツをカスタムする",
"nl": "Aangepaste inhoud",
"pt-BR": "Conteúdo personalizado",
"zh-CN": "自定义内容",
"zh-TW": "自訂內容"
},
"max_blocks": 9,
"blocks": [
{
"type": "html",
"name": {
"de": "Benutzerdefiniertes HTML",
"en": "Custom HTML",
"es": "HTML personalizado",
"fr": "Code HTML personnalisé",
"it": "HTML personalizzato",
"ja": "HTMLをカスタムする",
"nl": "Aangepaste HTML",
"pt-BR": "HTML personalizado",
"zh-CN": "自定义 HTML",
"zh-TW": "自訂 HTML"
},
"settings": [
{
"type": "html",
"id": "code",
"label": {
"de": "HTML",
"en": "HTML",
"es": "HTML",
"fr": "HTML",
"it": "HTML",
"ja": "HTML",
"nl": "HTML",
"pt-BR": "HTML",
"zh-CN": "HTML",
"zh-TW": "HTML"
},
"default": {
"de": "<div style='text-align:center;'><h2>Formatieren Sie Ihren Text mit HTML, damit er leichter lesbar ist.</h2>Mit diesem Text können Sie Ihre Kunden über Ihre Marke informieren.</div>",
"en": "<div style='text-align:center;'><h2>Use HTML to format your text so it can be easily read.</h2>This text can be used to share information about your brand with customers.</div>",
"es": "<div style='text-align:center;'><h2>Usa HTML para formatear tu texto para que se pueda leer fácilmente</h2>. Este texto se puede usar para compartir información sobre tu marca con los clientes.</div>",
"fr": "<div style='text-align:center;'><h2>Utilisez le code HTML pour formater votre texte afin qu'il puisse être facilement lu.</h2>Vous pouvez utiliser ce texte pour partager des informations sur votre marque avec les clients.</div>",
"it": "<div style='text-align:center;'><h2>Utilizza l'HTML per formattare il tuo testo così che sia facilmente leggibile.</h2>Questo testo può essere usato per condividere le informazioni sul tuo brand con i clienti.</div>",
"ja": "<div style='text-align:center;'><h2>テキストが読みやすくなるように、HTMLを使用して書式設定します。</h2>このテキストは、あなたのブランドに関する情報をお客様と共有するために使用できます。</div>",
"nl": "<div style='text-align:center;'><h2>Gebruik HTML om uw tekst op te maken, zodat deze makkelijk leesbaar is.</h2>Deze tekst kan worden gebruikt om informatie over uw merk met klanten te delen.</div>",
"pt-BR": "<div style='text-align:center;'><h2>Use HTML para formatar seu texto, assim ele pode ser lido com facilidade.</h2> Esse texto pode ser usado para compartilhar informações sobre sua marca com os clientes.</div>",
"zh-CN": "<div style='text-align:center;'><h2>使用 HTML 设置文本格式，以便轻松阅读。</h2>此文本可用于与客户分享有关您的品牌的信息。</div>",
"zh-TW": "<div style='text-align:center;'><h2>使用 HTML 來設定文字格式，使文字易於閱讀。</h2>您可以利用此段文字跟客戶分享品牌資訊。</div>"
}
},
{
"type": "select",
"id": "width",
"label": {
"de": "Containerbreite",
"en": "Container width",
"es": "Ancho del contenedor",
"fr": "Largeur du conteneur",
"it": "Larghezza contenitore",
"ja": "コンテナーの幅",
"nl": "Containerbreedte",
"pt-BR": "Largura do recipiente",
"zh-CN": "容器宽度",
"zh-TW": "容器寬度"
},
"default": "100%",
"options": [
{
"value": "25%",
"label": {
"de": "25 %",
"en": "25%",
"es": "25%",
"fr": "25 %",
"it": "25%",
"ja": "25%",
"nl": "25%",
"pt-BR": "25%",
"zh-CN": "25％",
"zh-TW": "25%"
}
},
{
"value": "33%",
"label": {
"de": "33 %",
"en": "33%",
"es": "33%",
"fr": "33 %",
"it": "33%",
"ja": "33%",
"nl": "33%",
"pt-BR": "33%",
"zh-CN": "33%",
"zh-TW": "33%"
}
},
{
"value": "50%",
"label": {
"de": "50 %",
"en": "50%",
"es": "50%",
"fr": "50 %",
"it": "50%",
"ja": "50%",
"nl": "50%",
"pt-BR": "50%",
"zh-CN": "50%",
"zh-TW": "50%"
}
},
{
"value": "66%",
"label": {
"de": "66 %",
"en": "66%",
"es": "66%",
"fr": "66 %",
"it": "66%",
"ja": "66%",
"nl": "66%",
"pt-BR": "66%",
"zh-CN": "66%",
"zh-TW": "66%"
}
},
{
"value": "75%",
"label": {
"de": "75 %",
"en": "75%",
"es": "75%",
"fr": "75 %",
"it": "75%",
"ja": "75%",
"nl": "75%",
"pt-BR": "75%",
"zh-CN": "75%",
"zh-TW": "75%"
}
},
{
"value": "100%",
"label": {
"de": "100 %",
"en": "100%",
"es": "100%",
"fr": "100 %",
"it": "100%",
"ja": "100%",
"nl": "100%",
"pt-BR": "100%",
"zh-CN": "100%",
"zh-TW": "100%"
}
}
]
},
{
"type": "select",
"id": "alignment",
"label": {
"de": "Vertikale Ausrichtung",
"en": "Vertical alignment",
"es": "Alineación vertical",
"fr": "Alignement vertical",
"it": "Allineamento verticale",
"ja": "垂直アラインメント",
"nl": "Verticaal uitlijnen",
"pt-BR": "Alinhamento vertical",
"zh-CN": "垂直对齐",
"zh-TW": "垂直對齊"
},
"default": "top-middle",
"options": [
{
"value": "top-middle",
"label": {
"de": "Oben",
"en": "Top",
"es": "Superior",
"fr": "En haut",
"it": "In alto",
"ja": "上",
"nl": "Boven",
"pt-BR": "Acima",
"zh-CN": "顶部",
"zh-TW": "頂部"
}
},
{
"value": "center",
"label": {
"de": "Mittig",
"en": "Middle",
"es": "Al medio",
"fr": "Au milieu",
"it": "Al centro",
"ja": "中央",
"nl": "Midden",
"pt-BR": "Meio",
"zh-CN": "中间",
"zh-TW": "中央"
}
},
{
"value": "bottom-middle",
"label": {
"de": "Unten",
"en": "Bottom",
"es": "Inferior",
"fr": "En bas",
"it": "In basso",
"ja": "下",
"nl": "Onder",
"pt-BR": "Abaixo",
"zh-CN": "底部",
"zh-TW": "底部"
}
}
]
}
]
}
],
"presets": [
{
"name": {
"de": "Personalisierter Content",
"en": "Custom content",
"es": "Contenido personalizado",
"fr": "Contenu personnalisé",
"it": "Contenuto personalizzato",
"ja": "コンテンツをカスタムする",
"nl": "Aangepaste inhoud",
"pt-BR": "Conteúdo personalizado",
"zh-CN": "自定义内容",
"zh-TW": "自訂內容"
},
"category": {
"de": "Komplizierteres Layout",
"en": "Advanced layout",
"es": "Diseño avanzado",
"fr": "Mise en page avancée",
"it": "Layout avanzato",
"ja": "高度なレイアウト",
"nl": "Geavanceerde indeling",
"pt-BR": "Layout avançado",
"zh-CN": "高级布局",
"zh-TW": "進階版面配置"
},
"blocks": [
{
"type": "html"
}
]
}
]
}
{% endschema %}
Beautiful! THanks so much for your help and quick responses!
Hello
I have a question, how do I add an image but I dont need it to link to anywhere just an image for my home page?
What html coding do I use and where do i get it from?
thanks!
Hi, I have used your code: to add 3 small images to the HTML section at Brooklyn theme. It works but the images go vertical and I would need them in 1 horizontal line. Could you advise me how to get thet 3 images next to each other in one line vertically?
This is the code I have used I only removed the link_to product part because I dont need it and added my own image links. But I need to get the 3 images horizontaly. Thanks in advance for any help here.
<p>
<a href="link_to_product">
<img src="[http://placehold.it/1920x700](http://placehold.it/1920x700)" alt="">
</a>
</p>
How do I center this code and make images larger?
<p>
<a href="link_to_product">
<img src="[http://placehold.it/1920x700](http://placehold.it/1920x700)" alt="">
</a>
</p>
How to center the image? Cheers!
Hi Hovhannes_Sarg1,
Im using Boundless theme and I tried the code and I managed to get the banner image on my home page. But it does not cover the whole width. Please advise how I can make it appear for the whole width.
Thanks in advance!
Regards,
Neevan
Hi, Thank you very much for the code, it works perfectly, I’m also wondering how to make it full-width. I already tried max-width: 100% but it didn’t work.
Thank you in advance.
Hi Jason,
I’ve added a custom html page with a photo on my home page. Clicking the photo leads to a 404 page, which I don’t want happening. Is there a code to remove the functionality of being able to click the photo (which leads to another page)?
Thank you!
