Help needed with capitalizing text in search box

Solved
Highlighted
Excursionist
37 2 5

Hello Everyone.

I am upgrading a shop theme to version 4.11.3.

My latest preview is below:

https://uyjumpuy22ix4rbw-4960085.shopifypreview.com

Everything seems to work, but I have some questions about the Search bar in the header please.

This:

search.PNG

How can I make it appear as 'SEARCH'?

Under Sections I have a file called Search-Template.liquid - do I edit this?

Many thanks.

0 Likes
Highlighted
Excursionist
16 1 4

This is an accepted solution.

In your file named styles.css

Search for:

.show-search-link

And replace 

.show-search-link {
    white-space: nowrap;
}

With

.show-search-link {
    white-space: nowrap;
    text-transform: uppercase;
}

 

Goodluck - Ronan

If you need extra help feel free to email me: ronanrban@gmail.com

1 Like
Highlighted
Shopify Partner
1146 231 299

Hello @ianantwalks ,

Add this css in you css file under assets.
I assume it's styles.css.liquid

input.main-search__input {
    text-transform: uppercase;
}
span.show-search-link__text {
    text-transform: uppercase;
}

 

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
1 Like
Highlighted
Excursionist
37 2 5

Thank you very much @Guleria  and @Ronann .

Sorry to be a pain, but do you also know how I can make the text here uppercase please?

capture2.PNG

And also this part of the cart.

Capture.PNG

I believe the above is the cart-template.liquid file, specifically this part - am I correct (probably not!)?

<form action="{{ routes.cart_url }}" method="post" id="cartform">
<div class="cart-item-list content-divider">
<div class="cart-item-list__head">
<div class="cart-item-list-heading cart-item-list-heading--product">{{ 'cart.label.product' | t }}</div>
<div class="cart-item-list-heading cart-item-list-heading--price">{{ 'cart.label.price' | t }}</div>
<div class="cart-item-list-heading cart-item-list-heading--quantity">{{ 'cart.label.quantity' | t }}</div>
<div class="cart-item-list-heading cart-item-list-heading--total">{{ 'cart.label.total' | t }}</div>
</div>

Thanks so much!

0 Likes
Highlighted
Shopify Partner
1146 231 299

Add this css

.page-header .filters .tags {
    text-transform: uppercase;
}
.styled-select .select2-container .select2-selection__rendered {
    text-transform: uppercase;
}
div#cart-summary-overlay {
    text-transform: uppercase;
}
Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
1 Like
Highlighted
Excursionist
37 2 5

Thank you so much @Guleria for your help.  It works fine.

I have one more question please, which is a little more technical.

Now, on my updated theme, I want to recreate this page:

https://www.siammandalay.com/collections/3d-wooden-puzzle-solution

When you visit the page a pop-up appears for a discount.  I can get that to work on my updated theme.  

What doesn't seem to work is:

1 - The layout of all the puzzle names seems wrong.

E.g. On the live site page above it's nicely formatted in three columns.  The same code in my updated them doesn't look like that.

Live site

Capture1.PNG

My latest preview

Capture3.PNG

2 - When you click each puzzle on the live site a modal box appears and you can then click a solution type for that puzzle (PDF/video).

Live Site

Capture2.PNG

On my updated theme, when you click the link, it goes to the main product page for that item.  The modal doesn't appear when clicked and I am not sure why this is?

I may not be explaining it fully, I apologise, I am not a developer.

My latest preview to compare it to is here:

https://www.siammandalay.com/?_ab=0&_fd=0&_sc=1

The files that I believe are involved in this are:

page.solution-page.liquid
puzzle-solutionpage.liquid
Our 3D WOODEN PUZZLE SOLUTIONS PAGE Shopify page.

If you want to see these files I can send them via PM.

Kind regards.

0 Likes