How to add this section?

Store Design
, ,

Topic summary

Goal: add a Shopify section with moving images similar to the screenshot (image is central to the request).

Proposed approaches:

  • Use a prebuilt option: install a section from Section Factory (link provided to a “hero-40” example) to quickly add a ready-made design.
  • Build a custom section: in Shopify Admin → Online Store → Themes → Edit Code, create a new section (e.g., mystery-club.liquid) using Liquid (Shopify’s templating language) and CSS. The provided code sets a two-column layout—left: an image grid populated via image blocks; right: text (top text, heading, subtext), up to three bullet points, and a button—with responsive styles for mobile.
  • Check existing theme features first: in Customize → Add section, look for built-in logo list/slideshow/marquee sections that could be repurposed. If none fit, create a new “moving images strip” section and add images as blocks.

Status: No confirmation of implementation; the solution path remains open. Next step is selecting between built-in, app-based, or custom code options based on needs and skills.

Summarized with AI on December 10. AI used: gpt-5.
1

It seems like this section is custom and needs some code, does anybody know?

(Images are moving)

image
image1525Ă—896 166 KB

1 Like
2

Hi @Somehow999

Check this Hero #40 – Section Store

FRom Section Store: Theme Sections - Section Store - Shopify Sections | Shopify App Store

1 Like
3

Hi @Somehow999

Shopify Admin → Online Store → Themes → Edit Code
Sections → Add a new section → mystery-club.liquid

<section class="mystery-club-section">
  <div class="mystery-wrapper">
    
    <!-- LEFT IMAGE GRID -->
    <div class="mystery-images">
      {% for block in section.blocks %}
        {% if block.type == 'image' %}
          <div class="mystery-img-item">
            <img src="{{ block.settings.image | img_url: '900x' }}" alt="">
          </div>
        {% endif %}
      {% endfor %}
    </div>

    <!-- RIGHT CONTENT -->
    <div class="mystery-content">
      <p class="small-heading">{{ section.settings.top_text }}</p>
      <h2>{{ section.settings.heading }}</h2>
      <p>{{ section.settings.subtext }}</p>

      <ul class="mystery-list">
        {% if section.settings.point1 != '' %}
          <li>âś” {{ section.settings.point1 }}</li>
        {% endif %}
        {% if section.settings.point2 != '' %}
          <li>âś” {{ section.settings.point2 }}</li>
        {% endif %}
        {% if section.settings.point3 != '' %}
          <li>âś” {{ section.settings.point3 }}</li>
        {% endif %}
      </ul>

      {% if section.settings.button_label != '' %}
        <a href="{{ section.settings.button_link }}" class="mystery-btn">
          {{ section.settings.button_label }}
        </a>
      {% endif %}
    </div>

  </div>
</section>


<style>
.mystery-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 50px 0;
}

.mystery-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.mystery-img-item img {
  width: 100%;
  border-radius: 12px;
  display: block;
}

.mystery-content h2 {
  font-size: 42px;
  font-weight: 700;
}

.mystery-content .small-heading {
  font-size: 14px;
  color: #555;
}

.mystery-list {
  margin-top: 20px; 
  margin-bottom: 20px;
}

.mystery-btn {
  display: inline-block;
  padding: 14px 26px;
  background: black;
  color: white;
  border-radius: 30px;
  text-decoration: none;
}

@media(max-width: 768px) {
  .mystery-wrapper {
    grid-template-columns: 1fr;
  }
  .mystery-images {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>


{% schema %}
{
  "name": "Mystery Club Section",
  "settings": [
    { "type": "text", "id": "top_text", "label": "Top small text" },
    { "type": "text", "id": "heading", "label": "Heading" },
    { "type": "textarea", "id": "subtext", "label": "Subtext" },

    { "type": "text", "id": "point1", "label": "Bullet Point 1" },
    { "type": "text", "id": "point2", "label": "Bullet Point 2" },
    { "type": "text", "id": "point3", "label": "Bullet Point 3" },

    { "type": "text", "id": "button_label", "label": "Button Label" },
    { "type": "url", "id": "button_link", "label": "Button Link" }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Choose Image" }
      ]
    }
  ],
  "max_blocks": 12,
  "presets": [
    {
      "name": "Mystery Club Section"
    }
  ]
}
{% endschema %}
4

Hi,

Hope this will help

First check “Customize → Add section” to see theme has a built-in logo list / slideshow / marquee you can repurpose.

If not then create a new section (e.g. moving-images.liquid) using Liquid and CSS

Go to customize and add the “Moving images strip” section to your page and upload your images as blocks.