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
  • Replies 6
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.