Move hero slide link button 2 so it is positioned vertically.

Solved

Move hero slide link button 2 so it is positioned vertically.

kingbeanz
Explorer
47 5 11

Hi,

Can someone help me move the 2nd slide link button so that it is positioned under the 1st.

From this:
Screen Shot 2024-10-10 at 00.54.28 copy.png

To this exactly:
Screen Shot 2024-10-10 at 00.54.png

website:
emery-yorkshire.com

Thank you!

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10080 2005 2056

This is an accepted solution.

Hi @kingbeanz 

You can do that by adding this code to Custom CSS of that section in Online Store > Themes > Customize, selecting section 

 

 

.hero__link {    
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start;
}
.hero__link .btn+.btn {margin-left: 0px;}

 

 

Screenshot 2024-10-10 at 08.58.26.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

AnneLuo
Shopify Partner
1039 196 220

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
.hero__text-shadow .hero__link {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
}
.hero__text-shadow .hero__link .btn {
    width: 200px !important;
    margin: 0 !important;
}
</style>

Result:

AnneLuo_0-1728519162904.png


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

Dan-From-Ryviu
Shopify Partner
10080 2005 2056

This is an accepted solution.

Hi @kingbeanz 

You can do that by adding this code to Custom CSS of that section in Online Store > Themes > Customize, selecting section 

 

 

.hero__link {    
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start;
}
.hero__link .btn+.btn {margin-left: 0px;}

 

 

Screenshot 2024-10-10 at 08.58.26.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

kingbeanz
Explorer
47 5 11

THANK YOU

Dan-From-Ryviu
Shopify Partner
10080 2005 2056

Very welcome! 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.