How to add image to homepage with html code?

Highlighted
New Member
1 0 0

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! 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
393 72 156

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:

1. Log on to your Shopify admin > Online Store > Themes > Customize
2. Once you are at the theme editor, on the left-hand menu, click on "Add section". 

3. When you are in there, scroll down to the very bottom, you will see a section called "Custom content". Click on it and you can then click on "Add". 

You will be able to insert the HTML codes you have for adding additional images to the front page that link directly to another product page. 

4. As always, when you are done editing, don't forget to click on "Save" at the top right corner.

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
 

Jason | Social Care @ Shopify
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it Accept as Solution to help others locate the answer!
Your Like and Accept as Solution are much appreciated!
To learn more visit the Shopify Help Center, or the Shopify Blog.

1 Like
Highlighted

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!

1 Like
Highlighted
Shopify Partner
11 0 0

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" 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.

Shopify Expert / Web Developer.
0 Likes
Highlighted
New Member
1 0 1

You just save my life... thanks....

1 Like
Highlighted
Tourist
9 0 1

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?
customize theme.png

0 Likes
Highlighted
Astronaut
1127 150 297

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.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
9 0 1

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.

0 Likes
Highlighted
Astronaut
1127 150 297

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. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
9 0 1

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? 

0 Likes