Moving the Search Bar and Adding Line Break - Toyo Theme

snufflebum · ‎06-13-2024

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.

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

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.

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

Pw: bohtro

Any help would be super appreciated!

Thanks!!

Liquid_xPert_SJ · ‎06-14-2024

@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

- 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 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.

Dan-From-Ryviu · ‎06-14-2024

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>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

snufflebum · ‎06-18-2024

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?

Moving the Search Bar and Adding Line Break - Toyo Theme

Moving the Search Bar and Adding Line Break - Toyo Theme

Community Blog Articles