Want to add Hero from Fabric onto my current theme

Store Design
, , , ,
1

My page is - https://f1hrgu-n8.myshopify.com/

password: enter

i want the hero from Fabric (free theme)

2

Hi @VicexGrips ,
As we have checked Fabric theme you want to create a Hero video section, follow below steps:

  1. In Online Store → Themes → Edit code → Sections, create a new file:
    hero-video.liquid

Paste this code:

<section class="hero-video">
  <div class="hero-video__media">
    {% if section.settings.video != blank %}
      <div class="video-wrapper">
        {{ section.settings.video | video_tag: autoplay: true, loop: true, muted: true, controls: false }}
      </div>
    {% elsif section.settings.poster_image %}
      <img src="{{ section.settings.poster_image | img_url: 'master' }}" alt="">
    {% endif %}
  </div>

  <div class="hero-video__content">
    {% if section.settings.heading != blank %}
      <h1>{{ section.settings.heading }}</h1>
    {% endif %}
    {% if section.settings.subheading != blank %}
      <p>{{ section.settings.subheading }}</p>
    {% endif %}
    {% if section.settings.button_label != blank and section.settings.button_link != blank %}
      <a href="{{ section.settings.button_link }}" class="hero-video__btn">
        {{ section.settings.button_label }}
      </a>
    {% endif %}
  </div>
</section>

{% schema %}
{
  "name": "Hero Video",
  "settings": [
    {
      "type": "video_url",
      "id": "video",
      "label": "Video",
      "accept": ["youtube", "vimeo"]
    },
    {
      "type": "image_picker",
      "id": "poster_image",
      "label": "Fallback / Poster image"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Your Hero Title"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Your tagline goes here"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button text",
      "default": "Shop Now"
    }
  ],
  "presets": [
    {
      "name": "Hero Video",
      "category": "Hero"
    }
  ]
}
{% endschema %}

<style>
.hero-video {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.hero-video__media video,
.hero-video__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}
.hero-video__content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.hero-video__content p {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}
.hero-video__btn {
  background: #000;
  color: #fff;
  padding: 12px 28px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}
.hero-video__btn:hover {
  background: #333;
}
</style>
  1. Add Section in Theme Editor
  • Go to Customize
  • Click Add section → Select Hero Video
  • Add your video (YouTube / Vimeo link) or upload a poster image as fallback
  • Add heading, subheading, and button.
3

Hey @VicexGrips,

You can replicate the Fabric hero by creating a new section:

  1. Go to Online Store → Themes → Edit Code → Sections → Add New Section → name it hero.liquid

  2. Paste the hero HTML structure from Fabric or recreate it with an image, heading, text, and button.

  3. Add it to your homepage in index.liquid with:

{% section 'hero' %}
  1. Customize via Theme Editor (upload image, add heading/subheading/button).

For styling, make it full-width and centered like Fabric using CSS.

If you want, I can provide a ready-to-paste hero section for your theme—please feel free to reach out: https://www.rajatweb.dev/

Best Regards,

Rajat

4

Hi @VicexGrips,

You can follow the article below to create a video section. Refer link

And it will display fine.

5

It says - FileSaveError: Invalid preset “t:names.hero”: invalid block type “text”: undefined block type. ?

1 Like
6

Hi, the error is because the block type" text “ isn’t defined in your theme. To fix this and create a hero like Fabric’s, follow these steps:

  1. Go to Online Store > Themes > Actions > Edit Code.
  2. Under Sections, click Add a new section and name it hero.
  3. Paste the following code in hero.liquid
<section class="hero">
  <div class="hero-image">
    <img src="{{ section.settings.hero_image | img_url: 'master' }}" alt="Hero Image">
  </div>
  <div class="hero-content">
    <h1>{{ section.settings.heading }}</h1>
    <p>{{ section.settings.subtext }}</p>
    <a href="{{ section.settings.button_link }}" class="btn">{{ section.settings.button_text }}</a>
  </div>
</section>

{% schema %}
{
  "name": "Hero Section",
  "settings": [
    {
      "type": "image_picker",
      "id": "hero_image",
      "label": "Hero Image"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "textarea",
      "id": "subtext",
      "label": "Subtext"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text"
    }
  ],
  "blocks": [],
  "presets": [
    {
      "name": "Hero",
      "category": "Image"
    }
  ]
}
{% endschema %}

after save it go to Customize, add the new Hero Section, upload the image, and set the heading, text, and button.

If you need assistance with styling or further customization, feel free to reach out here: https://www.rajatweb.dev/

Thanks!