whereami Posted May 4, 2021 Posted May 4, 2021 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
creedon Posted May 4, 2021 Posted May 4, 2021 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. tuanphan and paul2009 1 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
whereami Posted May 6, 2021 Author Posted May 6, 2021 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 creedon 1
Solution creedon Posted May 6, 2021 Solution Posted May 6, 2021 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. tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
whereami Posted May 11, 2021 Author Posted May 11, 2021 @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.
tuanphan Posted May 13, 2021 Posted May 13, 2021 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) Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
whereami Posted May 13, 2021 Author Posted May 13, 2021 @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?
Ekat27 Posted February 1, 2022 Posted February 1, 2022 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!
tuanphan Posted February 4, 2022 Posted February 4, 2022 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Ekat27 Posted March 1, 2022 Posted March 1, 2022 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.
creedon Posted March 1, 2022 Posted March 1, 2022 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
creedon Posted March 1, 2022 Posted March 1, 2022 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
Ekat27 Posted March 3, 2022 Posted March 3, 2022 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?
creedon Posted March 3, 2022 Posted March 3, 2022 @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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
Ekat27 Posted March 3, 2022 Posted March 3, 2022 (edited) 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: Then, I added I went into my Commerce>Inventory> and selected on a product I wanted to mark NEW. I added a tag called NEW. Am I missing something here?? Did I input something in the wrong place? Edited March 4, 2022 by Ekat27
creedon Posted March 4, 2022 Posted March 4, 2022 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment