Jump to content

Add a text bock with CSS

Recommended Posts

Site URL: https://www.noadecajou.com/shop?category=Birth%2Bgift

Hi,

I would like to add a text block just below the category menu bar on my e-shop.  You can see the list of my category on this page https://www.noadecajou.com/shop?category=Birth+gift. It start with "all" and finishes with "bedding". I'd like to have a text under that list when I click on the  "birth gift" category. Could you please help me and let me know how I could do that? Many thanks for your help!

Link to comment
2 hours ago, Tinasor said:

Site URL: https://www.noadecajou.com/shop?category=Birth%2Bgift

Hi,

I would like to add a text block just below the category menu bar on my e-shop.  You can see the list of my category on this page https://www.noadecajou.com/shop?category=Birth+gift. It start with "all" and finishes with "bedding". I'd like to have a text under that list when I click on the  "birth gift" category. Could you please help me and let me know how I could do that? Many thanks for your help!

@Tinasor to add a text section like that would require JavaScript and not CSS. 

Is this where you're wanting to add text?image.thumb.png.10aed5d7a7e9d1adbdde14cec91d06a2.png

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
4 hours ago, Tinasor said:

Site URL: https://www.noadecajou.com/shop?category=Birth%2Bgift

Hi,

I would like to add a text block just below the category menu bar on my e-shop.  You can see the list of my category on this page https://www.noadecajou.com/shop?category=Birth+gift. It start with "all" and finishes with "bedding". I'd like to have a text under that list when I click on the  "birth gift" category. Could you please help me and let me know how I could do that? Many thanks for your help!

Hi there

Did you want to show text under the nav like?

https://prnt.sc/szjp5p

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@Tinasor Here's code that will add text below the category Nav

Add this code to Settings -> Advanced -> Code Injection -> Footer

 


<script>
(function(){
  
// Set your text here. Make sure it's wrapped in a comma  
var yourText = "Add your text here";
  
var birthGiftPage = "https://www.noadecajou.com/shop?category=Birth+gift";
var productCategories = document.querySelector('.ProductList-filter-list');

if(window.location.href === birthGiftPage) {
    productCategories.insertAdjacentHTML('afterend', `<p class='birth-gift-text'>${yourText}</p>`)
}

})();
</script>

Result:

image.png.34b2b318c01a9bc7e88e96b42b088849.png

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
3 hours ago, RyanDejaegher said:

@Tinasor Here's code that will add text below the category Nav

Add this code to Settings -> Advanced -> Code Injection -> Footer

 



<script>
(function(){
  
// Set your text here. Make sure it's wrapped in a comma  
var yourText = "Add your text here";
  
var birthGiftPage = "https://www.noadecajou.com/shop?category=Birth+gift";
var productCategories = document.querySelector('.ProductList-filter-list');

if(window.location.href === birthGiftPage) {
    productCategories.insertAdjacentHTML('afterend', `<p class='birth-gift-text'>${yourText}</p>`)
}

})();
</script>

Result:

image.png.34b2b318c01a9bc7e88e96b42b088849.png

Brilliant move with 

insertAdjacentHTML

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.