Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
I'm a beginner, I am currently working on a site, I want to an 'Image Button' under my 'Image Banner' in my Home Page, if you could explain step-by-step since I am new to this that would be great
Regards,
Davaughn
Sure, here's a step-by-step guide on how to add an "Image Button" under an "Image Banner" on your Shopify homepage:
---
### Adding an Image Button under an Image Banner on Shopify
Hi Davaughn,
Welcome to Shopify! I might be mistaken since I'm also relatively new here, but I'd try to help you. Here’s a step-by-step guide to help you with this. Let's start from the very beginning:
#### Step 1: Access Your Shopify Admin
1. Log in to your Shopify account.
2. From the Shopify admin, go to **Online Store** and then **Themes**.
#### Step 2: Customize Your Theme
1. Find the theme you are currently using and click on **Customize**.
2. You will be taken to the Theme Editor where you can make changes to your theme.
#### Step 3: Add an Image Banner
1. In the Theme Editor, navigate to the section of your homepage where you want to add the image banner.
2. Click on **Add section** or find an existing **Image banner** section.
3. Upload the image you want to use for your banner.
4. Adjust the settings of your banner as needed (e.g., text overlay, size, position).
#### Step 4: Add a Custom HTML Section (For the Button)
To add an image button, you’ll need to use some custom HTML. Here's how:
1. In the Theme Editor, click on **Add section**.
2. Select **Custom content** or **Custom HTML** section (the exact name may vary based on your theme).
3. In the HTML field, paste the following code:
```html
<div style="text-align: center; margin-top: 20px;">
<a href="YOUR_BUTTON_LINK" style="display: inline-block;">
<img src="YOUR_BUTTON_IMAGE_URL" alt="Button" style="width: 200px; height: auto;">
</a>
</div>
```
- Replace `YOUR_BUTTON_LINK` with the URL you want the button to link to.
- Replace `YOUR_BUTTON_IMAGE_URL` with the URL of the button image you want to use.
#### Step 5: Adjust and Save
1. Adjust the HTML and CSS as needed to fit your design preferences. You can change the width and height of the button by modifying the `style="width: 200px; height: auto;"` part of the code.
2. Once you are satisfied with the look, click **Save** to apply the changes.
#### Step 6: Preview and Publish
1. Preview your changes to ensure everything looks good.
2. If you are happy with the result, click **Publish** to make the changes live on your store.
---
That's it! You now have an image button under your image banner on your Shopify homepage. If you have any further questions or need more help, feel free to ask.
Best regards.