How can I add a "SHOP" button to Hero Banner?

Solved

How can I add a "SHOP" button to Hero Banner?

FelaC
Tourist
16 0 2

I want to add a "SHOP" button to the Hero Banner on my Home Page, above the photo, which should redirect users to my collection.


I want the button to be compatible with my Add To Cart button. How can I do this?


I left an example below

Ekran Resmi 2024-07-04 22.51.01.pngEkran Resmi 2024-07-04 22.54.01.png

Accepted Solutions (2)
Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

Please add this code to Custom CSS of Banner Image section 

.banner__box {
background: transparent;
}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

Select Image banner section, choose Desktop content position is Bottom center

Screenshot 2024-07-05 at 15.35.56.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 13 (13)

saim007
Shopify Partner
553 70 94

@FelaC Please provide store url?

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
saim007
Shopify Partner
553 70 94

@FelaC You want to show button like this ? 

saim007_0-1720159755132.png

 

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
FelaC
Tourist
16 0 2

Below the image, slightly larger button, bold fonts, rounded corners (6px), background color #1777f2

saim007
Shopify Partner
553 70 94

@FelaC Check this- 

saim007_0-1720160187773.png

 

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
FelaC
Tourist
16 0 2

Ekran Resmi 2024-07-05 00.55.12.png

Like this button. No background, bold font.
There should be some space between the button and text.

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

Hi @FelaC 

Default Image banner has option to add Buttons block so you can add link and text of the button.

Please check in Online Store > Themes > Customize  > Image banner section

 Screenshot 2024-07-05 at 13.47.42.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

FelaC
Tourist
16 0 2

Yes, but I don't want the background to be white. How can I do that?

 

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

Please add this code to Custom CSS of Banner Image section 

.banner__box {
background: transparent;
}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

FelaC
Tourist
16 0 2

Is there any way I can place the button down?

I want it in the centre, between the Adidas - BTW logos.
Thank you.

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

Select Image banner section, choose Desktop content position is Bottom center

Screenshot 2024-07-05 at 15.35.56.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

FelaC
Tourist
16 0 2

Thank you.

 

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

You are very welcome! 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.