HTML Styling in Themes/Languages

[Tracy_Francis]

Hello Forum,

In the Themes and Languages, where you can change the wording that is used on all the fields, for example, in the Checkout page, where it says DELIVERY you could change this to say YOUR DELIVERY by just typing it into the box on the languages page.  My question is, is there a way to STYLE the words that you add into that box.  For example <h1>Delivery<h1><p>Please add your delivery address below<p>

Thanks

[Sweans]

Hello @Tracy_Francis ,

When using Shopify, you might want to customize the text on your site, including the checkout page. It's important to note that the language settings in Shopify do not support HTML or styling directly within the text fields. This means that you can't add HTML tags like <h1> or <p> directly into these language text boxes.

However, you can still style specific text on the checkout page or any other page using CSS in your theme's code. Here's how you can do it:

Identify the Element to Style:

Use your browser's Developer Tools (right-click on the text and select "Inspect") to find the class or ID associated with the text you want to style.

Add Custom CSS:

Go to your Shopify admin and navigate to Online Store > Themes.

Click on Actions > Edit code.

Locate your theme’s CSS file (e.g., theme.css, styles.css, etc.) and add your custom CSS.

For example, if you want to style the "Delivery" text, you can use the following CSS:

.checkout__delivery-title {
    font-size: 24px;
    font-weight: bold;
}

.checkout__delivery-instructions {
    font-size: 14px;
    color: #555;
}

This CSS will apply the desired styling to the text.

If you provide the URL to your store and any password required to access it, we can assist you in identifying the tags and applying the necessary styling

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans

[Tracy_Francis]

Hi Sweans,

Thank you very much for your very useful reply (speedy and so helpful!). 

The URL to my development store is here https://byannatreats.myshopify.com/ - password is annaquin

On the Checkout page, I have added the words

Delivery - please choose the same option as you did previously.

But of course entering this into the languages Delivery field means it all comes out at the same font size.  I would like the word Delivery to be the heading that it is, but the instruction to be a smaller font.  Interestingly in your reply you have quoted

.checkout__delivery-instructions {

 but where is the input for this? Where can I write my instructions so that they appear underneath? So now I'm intrigued whether i have that or not.  I notice in Languages under Shipping it also has "shipping method notice" and this defaults to blank but if you add text in there then it appears on your checkout page in smaller font immediatley under the heading "Shipping".  This is exactly what I'm after for the "Delivery". I wonder why it doesnt' have "delivery notice" as another field where I could add plain text in.
Sorry that's a bit long but you very kindly offered to get specific with me so I'm jumping at it!! 🙂

[Sweans]

Hi @Tracy_Francis ,

Thank you for sharing the URL to your development store. Upon reviewing the information provided and your description, here are the steps to style the "Delivery" text to emphasize it as a heading, while keeping the instructions in a smaller font.

Custom CSS to Style the Text

You can add the following CSS to your theme to achieve the desired styling:-

/* Targeting the entire container */
._1ip0g651 {
    margin-bottom: 10px; /* Optional: Add space below the entire section */
}

/* Targeting the "Delivery" text within the h2 */
._1ip0g651 h2 {
    font-size: 24px; /* Size for "Delivery" */
    font-weight: bold;
}

/* Targeting the instructions within the h2 */
._1ip0g651 h2::after {
    content: " - please choose the same option as you did previously.";
    font-size: 14px; /* Smaller size for the instructions */
    font-weight: normal;
    display: block; /* Display on a new line */
    margin-top: 5px; /* Optional: Add some space above the instructions */
    color: #555; /* Optional: Change color if needed */
}

Steps to Apply the CSS

1.Access Your Theme’s Code:

-Go to your Shopify admin, navigate to Online Store > Themes.

-Click on Actions > Edit code.

2.Add the CSS:

-Find and open your theme’s CSS file (typically theme.css or styles.css).

-Scroll to the bottom of the file and paste the CSS code provided above.

-Save the changes.

"Delivery" should be made bold and larger, with the instructions appearing right beneath it in a smaller font.

If you prefer, we can take care of this directly for you. Please DM for further details, and we can get it done just as you need!

Regards,
Sweans

[Tracy_Francis]

Thank you very much. In this theme the css file is base.css
I've added the code to the end of this file and saved, and refreshed my cart page but it isn't showing on the cart page. I started with a fresh purchase to go to cart page to make sure and it's still not showing the new text.