How to Create an Inline Image Section in Shopify

Updated on

June 9, 2025

Add an element of interest to any page with this section tutorial. Add up to 3 images and 4 lines of text to create a dynamic headline. A simple way to captivate audiences.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Code

<div class="inline-container container color-{{ section.settings.color_scheme }}">
  <div class="page-width container color-{{ section.settings.color_scheme }}">
    <h1 class="heading1"> 
      {{section.settings.text1}}  
      <span class="img1"> ooo </span> 
      {{section.settings.text2}} 
      <span class="img2"> 000 </span> 
      {{section.settings.text3}} 
      <span class="img3"> 000 </span>   
      {{section.settings.text4}} 
    </h1>
  </div> 
</div>


{% schema %}
  {
    "name": "Inline Text",
    "tag": "section",
    "settings": [
      {
        "type": "text",
        "id": "text1",
        "label": "Text 1"
      },
      {
        "type": "text",
        "id": "text2",
        "label": "Text 2"
      },
      {
        "type": "text",
        "id": "text3",
        "label": "Text 3"
      },
      {
        "type": "text",
        "id": "text4",
        "label": "Text 4"
      },
      {
        "type": "image_picker",
        "id": "image1",
        "label": "Image 1"
      },
      {
        "type": "image_picker",
        "id": "image2",
        "label": "Image 2"
      },
      {
        "type": "image_picker",
        "id": "image3",
        "label": "Image 3"
      },
      {
        "type": "color_scheme",
        "id": "color_scheme",
        "label": "t:sections.all.colors.label",
        "default": "background-1"
      }
    ],
      "presets": [
      {"name": "Inline Text" }
    ]
  }
{% endschema %}

<style>
.inline-container {
  padding-top: 8rem;
  padding-bottom: 8rem;
  width: 100vw;
}
  
.heading1 {
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;
  line-height: 150%;
}
  
.img1 {
  margin-right: 10px;
  color: transparent;
  background-size: cover;
  background-repeat:no-repeat;
  background-image: url("{{ section.settings.image1 | image_url }}");
}

.img2 {
  margin-right: 10px;
  color: transparent;
  background-size: cover;
  background-repeat:no-repeat;
  background-image: url("{{section.settings.image2 | image_url }}");
}

.img3 {
  margin-right: 10px;
  padding-right: 13px;
  color: transparent;
  background-size: cover;
  background-repeat:no-repeat;
  background-image: url("{{section.settings.image3 | image_url }}");
}
</style>

More resources

How to Create a Typing Text Section in Shopify

Add a touch of interactivity to any page with this section tutorial. Add up to 3 words or sentences that cycle through, with options to incorporate a mixture of static and dynamic text. A simple way to captivate audiences.

View resource

How to Create an Inline Image Section in Shopify

Add an element of interest to any page with this section tutorial. Add up to 3 images and 4 lines of text to create a dynamic headline. A simple way to captivate audiences.