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
  • Views 506
  • 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 picker form field)
💫 Gallery block 7.1 workaround
🥳 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
On 6/14/2020 at 5:45 PM, bangank36 said:

Hi there

Did you want to show text under the nav like?

https://prnt.sc/szjp5p

Hi, thanks a lot for your reply. Yes, there. But just under the category Birth gift. So when you select birth gift, you'll see the text there.

 

Thanks so mc

 

Link to comment
On 6/14/2020 at 5:45 PM, bangank36 said:

Hi there

Did you want to show text under the nav like?

https://prnt.sc/szjp5p

Hi, thanks a lot for your reply. Yes, there. But just under the category Birth gift. So when you select birth gift, you'll see the text there.

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 picker form field)
💫 Gallery block 7.1 workaround
🥳 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.