Style one character of a product title on the product page?

Site URL: http://caferoyalbooks.com/shop

Hi, I sell books. Some of the books have a special edition option. At present I use an emoji to signify those products, and use the emoji in the product title, on the products page to show those with an edition — see link. 

Rather than emoji, I'd like to use a single character '&', for example. I'd like to style the & so it was yellow, for example, and bold. Can that be done?

Thanks

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  .ProductList-grid .tag-limited .ProductList-title::after {
  
    content : '\a0 &';
    color : yellow;
    font-size : larger;
    font-weight : 600;
    
    }
    
  </style>

This is for v7.0 using the Brine template family.

Then for products you want to have the limited symbol on add a limited tag. You can change the name of the tag. Just be sure to proceed the tag with .tag- in the CSS above.

You can change anything you like. The only critical bit is to keep the \a0[space character] at the beginning of content. \a0 is a non-breaking space character.

Let us know how it goes.

That's great @creedon, thank you.

Now in the intro section of the products page, I'd like to write, "➕= limited edition prints available", but using the red cross, which appears in the product listing...I get get the whole thing to turn red but not the single character. Is there a way?

https://www.caferoyalbooks.com/shop

amazing! thank you...again!

@tuanphan You read my mind! Yes...I have 'fix mobile site' on my list. These points would be great, if you don't mind helping? And the text over the images on the home screen, if that could have a white background, that would also be great. Do you work for SS? Thanks for your help, much appreciated.

On 5/12/2021 at 1:29 AM, whereami said:

@tuanphan You read my mind! Yes...I have 'fix mobile site' on my list. These points would be great, if you don't mind helping? And the text over the images on the home screen, if that could have a white background, that would also be great. Do you work for SS? Thanks for your help, much appreciated.

Q1. Q3. It looks like you removed the text Do you still need help?
Q2. Add to Design > Custom CSS

/* Mobile center footer copyright*/
@media screen and (max-width:767px) {
div#block-8aff6caedcc84226851e {
    text-align: center;
}
}

Q4.

/* tablet */
@media screen and (max-width:991px) and (min-width:641px) {
/* header padding */
header.Header.Header--top {
    padding-left: 20px;
    padding-right: 20px;
}
header.Header.Header--bottom {
    padding-left: 20px;
    padding-right: 20px;
}
}

if it works, let me know. I will check other questions.

(I'm not a Squarespace Employee)

@tuanphan Thanks very much...again! All good. The text on the home page I did change. I used a click through image instead. I can't seem to get the curser pointer on the image though — it does flick on momentarily but goes fast.

Looking at the mobile site, I could do with pulling in from the sides the home page text, the individual product listing, and the product page products...all attached. Is there an all in one solution or does each need coding individually? Can I send you some books to thank you?

On 5/6/2021 at 9:38 AM, creedon said:

Replace your text block with a code block and add the following.

<p>

  <span style="color : red;">
    
    ◉
    
  </span>
  
  = limited edition prints available
  
  </p>

Let us know how it goes.

Any idea how I would do this for my jewelry website? I would like to 

On 5/6/2021 at 9:38 AM, creedon said:

Replace your text block with a code block and add the following.

<p>

  <span style="color : red;">
    
    ◉
    
  </span>
  
  = limited edition prints available
  
  </p>

Let us know how it goes.

Hi! I was wondering how I would alter this code for my jewelry website? I would like to display with my product titles when an item is a new release by putting -NEW! in a bolden font. Is this possible? And how do I make it applicable to only the products that it applies? Any help is greatly appreciated!

On 2/1/2022 at 2:43 PM, Ekat27 said:

Any idea how I would do this for my jewelry website? I would like to 

 

Hi! I was wondering how I would alter this code for my jewelry website? I would like to display with my product titles when an item is a new release by putting -NEW! in a bolden font. Is this possible? And how do I make it applicable to only the products that it applies? Any help is greatly appreciated!

What is your site url?

On 2/3/2022 at 10:03 PM, tuanphan said:

What is your site url?

theretrocollectiveco.com

Thanks! -Sorry I am just now seeing this.

On 1/31/2022 at 11:43 PM, Ekat27 said:

I was wondering how I would alter this code for my jewelry website?

The code you posted wasn't designed to alter product meta information.

My May 4, 2021 code post is closer in concept to the effect you want. It is not for a v7.1 site.

Following is the code adapted for v7.1.

<style>

  .products.collection-content-wrapper .tag-new .grid-main-meta .grid-title::after {
  
    content : '\a0 NEW!';
    color : green;
    font-size : larger;
    font-weight : 600;
    
    }
    
  </style>

The post mentioned has the install and use instructions. In your case you'll want to add a tag called new.

Let us know how it goes.

Another variation on the above technique. This code places the word new where SS puts the sale and sold out meta information. It takes a hammer approach. If you put a new tag on your product then whatever meta information was there, if any, will be overwritten. You need to manage the state of the meta information manually.

Please see Store Product Meta New.

On 3/1/2022 at 2:35 PM, creedon said:

Another variation on the above technique. This code places the word new where SS puts the sale and sold out meta information. It takes a hammer approach. If you put a new tag on your product then whatever meta information was there, if any, will be overwritten. You need to manage the state of the meta information manually.

Please see Store Product Meta New.

Thank you for your responses! I am not very tech savvy and know very little about code and its terms, so please bear with me here...From the steps written above, I need to replace a text block with a code block? <---Is this done in the Custom CSS page? Then I need to add a page injection header, as well as the code you mentioned above that was adapted for v7.1 site? Sorry to make you go through it again. I just want to make sure I understand all of the steps I need to do to achieve this on my website since I think it would be a helpful feature to my customers.

I am not sure if you mentioned it in these steps, but how do I go about adding the '-NEW!' feature to only certain products?

@Ekat27

There are several techniques being discussed in this thread. So the first task is to decide which method you want to use.

For the code I cited in my post you only need to do what the Quick Install instructions say to do to install. There are no text or code blocks involved.

Once my code is installed you then add a new tag to each product you want to have the word NEW show.

Okay so bear with me here because I tried to follow those steps as I understood them and its still not working, so I am double checking with you that I am inputting the right code in the right spots as I am still having trouble following..

1st I followed the Quick Install instructions and pasted this code into my Settings> Advanced>Code Injection>Header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.1d19/twcsl.js"></script>

Then I raw copied the code that you wrote in the second bullet point and pasted it into my Design>Custom CSS:

4 hours ago, Ekat27 said:

1st I followed the Quick Install instructions and pasted this code into my Settings> Advanced>Code Injection>Header:

Check you're good.

Quote

Then I raw copied the code that you wrote in the second bullet point and pasted it into my Design>Custom CSS:

Per the instructions the second location is Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection. Read the code for any instructions within. There is one variable you need to set for the color of the text. Where to enter that value is indicated in the code.

Then for the tag you should type new not NEW. You should be able to edit the one you created or you can delete it and create a new one, whichever works for you.

Let us know how it goes.