How to Create a Full-Width Banner Section with Centered Button on Shopify

Enhance your Shopify store’s visual appeal and engagement with a stylish full-width banner featuring an eye-catching image and a centered button. This guide shows you how to create a custom section that displays a full-width image with a button centered at the bottom.

Step 1: Create the Section File

Go to your Shopify admin and navigate to Online Store > Themes > Actions > Edit Code. Under the Sections folder, click Add a new section and name it full-image-banner.

Step 2: Add the Code

Replace the default content in your newly created full-image-banner.liquid with the following code:

{% schema %}
{
  "name": "Full Image Banner",
  "settings": [
    {
      "type": "image_picker",
      "id": "banner_image",
      "label": "Banner Image"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button Text",
      "default": "Shop Now"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    }
  ],
  "presets": [
    {
      "name": "Full Image Banner",
      "category": "Image"
    }
  ]
}
{% endschema %}

<div class="full-image-banner" style="position: relative; text-align: center;">
  {% if section.settings.banner_image %}
    <img src="{{ section.settings.banner_image | img_url: 'master' }}" alt="Banner" style="width: 100%; height: auto;">
  {% endif %}
  {% if section.settings.button_label != blank %}
    <a href="#" class="banner-button" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 10px 20px; background-color: #000; color: #fff; text-decoration: none;">
      {{ section.settings.button_label }}
    </a>
  {% endif %}
</div>

### Step 2: Add the Section to Your Theme

Head to your theme customizer (**Online Store > Themes > Customize**). Click **Add Section**, and select **Full Image Banner** from the **Image** category.

### Step 3: Customize Your Section

Upload your desired image, enter button text, and specify your link directly within the Shopify theme customizer.

### Step 4: Adjust Styling (Optional)

Add custom CSS to further refine the look:

```css
.full-image-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.banner-button:hover {
  background-color: #555;
}

Conclusion

You’ve now created a stunning full-width banner section for your Shopify store! This visually appealing setup is ideal for showcasing promotions, collections, or featured products prominently on your homepage.