How to create a custom home page with an Image as the background and an Enter text as the button?

[shaanrevery]

Hey,

I wanted to create a home page with an image as the complete background and a custom enter button which directly leads people to the collections page.

The enter button's location I would want to change, according to the designs, as in would want that to be customisable. And I would like the font to be also something that I could change.

My Store URL: https://www.discoverrevery.com/

Have attached three different store homepage examples below:

 

Please help me accomplish this, thank youu!

 

[Sweans]

Hi @shaanrevery ,

To achieve this, you can use the "Image banner" section in your Shopify theme. Here's a step-by-step guide:

1. Go to Online Store > Themes.
2. Click on Customize for the theme you are using.
3. Choose "Image banner" as the first section from the list of available sections.
4. Upload or select a landscape image for the full background and adjust the image size according to your design preferences.

5. Add a button block and label it "Enter." Set the button to link to your collections page.

6. Adjust the button's position using the available settings
7. After configuring the section, click Save to apply the changes.

This approach allows you to create a visually appealing homepage with a full background image and a customizable "Enter" button. The "Image banner" section provides flexibility for adding and styling the button, making it easy to align with your design vision.


If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[Huptech-Web · Accepted solution]

Hello @shaanrevery, To achieve the identical design, kindly adhere to the steps below:
Theme library > edit theme > create new section of banner-section name and subsequently insert the provided code.

{% style %}
.image-banner {
  position: relative;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.button-wrapper {
  position: absolute;
}

.button-wrapper.top-left {
  top: 20px;
  left: 20px;
}

.button-wrapper.top-center {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.button-wrapper.top-right {
  top: 20px;
  right: 20px;
}

.button-wrapper.center-left {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

.button-wrapper.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button-wrapper.center-right {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.button-wrapper.bottom-left {
  bottom: 20px;
  left: 20px;
}

.button-wrapper.bottom-center {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.button-wrapper.bottom-right {
  bottom: 20px;
  right: 20px;
}

.btn {
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
}
.btn-outline {
  background: transparent;
  box-shadow: 4px 3px 26px 10px #fff;
}

.btn-filled {
  background: #000;
  border: none
}
{% endstyle %}
<div class="image-banner" style="background-image: url('{{ section.settings.banner_image | img_url: 'master' }}');">
  <div class="button-wrapper {{ section.settings.button_position }}">
    <a href="{{ section.settings.button_link }}" class="btn {% if section.settings.button_type == 'outline' %}btn-outline{% else %}btn-filled{% endif %}">
      {{ section.settings.button_text }}
    </a>
  </div>
</div>

{% schema %}
{
  "name": "Banner Section",
  "settings": [
    {
      "type": "image_picker",
      "id": "banner_image",
      "label": "Banner Image"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Click Here"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "select",
      "id": "button_type",
      "label": "Button Style",
      "default": "outline",
      "options": [
        {
          "value": "outline",
          "label": "Outline"
        },
        {
          "value": "filled",
          "label": "Filled"
        }
      ]
    },
    {
      "type": "select",
      "id": "button_position",
      "label": "Button Position",
      "default": "center",
      "options": [
        {
          "value": "top-left",
          "label": "Top Left"
        },
        {
          "value": "top-center",
          "label": "Top Center"
        },
        {
          "value": "top-right",
          "label": "Top Right"
        },
        {
          "value": "center-left",
          "label": "Center Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "center-right",
          "label": "Center Right"
        },
        {
          "value": "bottom-left",
          "label": "Bottom Left"
        },
        {
          "value": "bottom-center",
          "label": "Bottom Center"
        },
        {
          "value": "bottom-right",
          "label": "Bottom Right"
        }
      ]
    }
  ],
    "presets": [
    {
      "name": "Banner Section",
   
    }
  ]
}
{% endschema %}

Next, view the image and choose the banner segment.

Attached are the screenshots for reference.

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

[shaanrevery]

Hey @Huptech-Web,

Thanks a lot man, works beautifully like a charm!