Moving the Search Bar and Adding Line Break - Toyo Theme

Moving the Search Bar and Adding Line Break - Toyo Theme

snufflebum
Excursionist
17 0 2

Hi,

 

I am using the Toyo theme from the Shopify Theme Store, and have just started building my website. I need some help with a couple of instances. They are mentioned below:

 

1) The Header of my Slideshow is in one line and I want to add a line break.

 

snufflebum_0-1718300720864.png

Line 1 - Fetch the Perfect Toys

Line 2 - for your Pets

 

Additionally, I also want the ability to customize the colour scheme of my button. Unfortunately, this theme only allows a few presets to choose from. I want to see which colour works best by experimenting with different colour combinations on a trial and error basis - is this possible?

 

2) In the mobile view, I want to move the Search Bar inside the Hamburger Menu and remove the Search Icon from the Header as it is making things very cluttered

 

snufflebum_1-1718300900602.png

By default, the mobile view only shows a clickable search icon in the header menu. Instead I want a Search Bar in the top most section inside the hamburger menu. How do I do this?

 

3) I wish to edit the placeholder text of the Email Form and use a custom text Instead. I also want to Replace the text "Subscribe" of the Subscribe button with an icon.

 

snufflebum_2-1718301043910.png

 

My Website Link: https://14cc17-50.myshopify.com/

Pw: bohtro

 

Any help would be super appreciated!

Thanks!!

 

 

Replies 3 (3)

Liquid_xPert_SJ
Shopify Partner
1045 126 156

@snufflebum  welcome to the Shopify Community,

 

Please refer to the official doc where you can see how you can change they layout , color schema, button colors, also if you want to move the search bar inside the hamburger then you need to customizer the theme header section. also you can update the newsletter placeholder text and button text by following below instructions.

Online Store > Click on the three dots button and click on the Edit default theme content and search for the newsletter text and button text and update.

if you still need my help on this don't forget to reach out.

 

Thanks

 

2024-06-14 09_59_34-Testing Sandbox · Themes · Shopify.png2024-06-14 10_01_08-.png

 

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂

Dan-From-Ryviu
Shopify Partner
8548 1687 1694

Hi @snufflebum 

Please add the following code to your theme.liquid file, after the <head> tag, in order to create a line break in the banner heading.

<style>
#shopify-section-template--17081276432558__slideshow_QgL49d .banner__heading {
max-width: 500px;
}
</style>

Screenshot 2024-06-14 at 16.12.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.

snufflebum
Excursionist
17 0 2

Hi,

 

I had reset my theme back to default settings which had updated my Slideshow ID. So I have updated the code that you shared with the following code:

 

 

  <style>
#shopify-section-template--17083270758574__slideshow_hma9Fx-1 .banner__heading {
max-width: 500px;
}
</style>

 

 

But its not working. Here is the website link: https://14cc17-50.myshopify.com/

 

Can you please check?