How do you add text description below the heading of the collection list and above the actual list?

SweatFree · ‎08-17-2024

Hi,

The password is: sweatfree123

If you scroll to the middle bottom, you'll see a collection list there in the form of globes. How do I add a text description below the heading of the collection list "All our plans (150+ countries):" & above the actual collection list? (Very similar to how featured collection has a text description below the heading of the collection & above the products that are in the collection.

Screenshot attached (the red area I marked):

Chanakya Ramdev
Founder | Sweat Free (www.sweatfree.co)

https://www.SweatFree.co

BSSCommerce-B2B · ‎08-18-2024

Hi @SweatFree, here the new code

<script bss-b2b-community>
(() => {
const interval = setInterval(() => {
const element = document.querySelector('#shopify-section-template--14927606710354__collection_list_QRjkqx .title-wrapper-with-link');
if (element) {
clearInterval(interval);
element.insertAdjacentHTML('afterend', `
<div bss-b2b-community style="text-align:center;margin: -2rem 0 2.5rem;">
Using <strong>For bold content</strong>
</div>
`)
}
}, 100);
setTimeout(() => clearInterval(interval), 10000);
})();
</script>

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-B2B · ‎08-17-2024

Hi @SweatFree,

I hope you are doing well!

You can add description by following this instruction:

Step 1: Online store > Themes > Three-dot Button -> Edit code

Step 2: Find theme.liquid and open it

Step 3: Add this code right after <head>. Note: Change your description in the content

<style bss-b2b-community>
      h2#SectionHeading-template--14927606710354__collection_list_QRjkqx::after {
    content: "This is your description! Change into your need";
    display: block;
    font-size: 1.5rem;
}
    </style>

Here the result

I hope this is useful to you!! 🤗

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

BSSCommerce-B2B · ‎08-18-2024

Hi @SweatFree,

To match your need like in this thread, use these codes instead

<script bss-b2b-community>
document.querySelector('#shopify-section-template--14927606710354__collection_list_QRjkqx .title-wrapper-with-link')?.insertAdjacentHTML('afterend', `
<div bss-b2b-community style="text-align:center;margin: -2rem 0 2.5rem;">
Using <strong>For bold content</strong>
</div>
`)
</script>

Here the result

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

BSSCommerce-B2B · ‎08-18-2024

Hi @SweatFree, here the new code

<script bss-b2b-community>
(() => {
const interval = setInterval(() => {
const element = document.querySelector('#shopify-section-template--14927606710354__collection_list_QRjkqx .title-wrapper-with-link');
if (element) {
clearInterval(interval);
element.insertAdjacentHTML('afterend', `
<div bss-b2b-community style="text-align:center;margin: -2rem 0 2.5rem;">
Using <strong>For bold content</strong>
</div>
`)
}
}, 100);
setTimeout(() => clearInterval(interval), 10000);
})();
</script>

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

How do you add text description below the heading of the collection list and above the actual list?

How do you add text description below the heading of the collection list and above the actual list?

Community Blog Articles