Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Adding text to a Product Page


steve6

Recommended Posts

On 11/14/2020 at 12:25 PM, ACScruggs said:

it’s the later

OK let's give this a go. Add the following to Store Settings > Advanced > Page Header Code Injection.

<!-- add store description -->

<style>

  /* begin add store description */
  
    @media screen and ( min-width: 576px ) {
    
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-title {
      
        margin-bottom: calc( 37px / 2 );
        padding-bottom: 0;
        
        }
        
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-title::after {
      
        all: unset;
        
        }
        
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-description {
      
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        
        margin-bottom: 37px;
        padding-bottom: calc( 54px / 2 );
        position: relative;
        
        }
        
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-description::after {
      
        border-bottom: 1px solid;
        bottom: 0;
        content: '';
        left: 0;
        opacity: .2;
        position: absolute;
        width: 100%;
        
        }
      }
      
    /* end add store description */
    
  </style>

<script>

  $( ( ) => {
  
    // add store description
    
    /*
    
      if the description has single quotes it then put a backslash before
      the single quotes. example: it's becomes it\'s.
      
      */
      
    const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae. Proin libero nunc consequat interdum varius sit. Potenti nullam ac tortor vitae purus faucibus ornare. Fames ac turpis egestas maecenas pharetra convallis posuere morbi.';
    
    // do not change anything below, there be the borg here
    
    if ( location.pathname == '/shop' ) return;
    
    $( '.nested-category-title' )
    
      .after ( '<div class="nested-category-description">' +
      
        '<p>' +
        
          description +
          
          '</p>' +
          
        '</div>' );
        
    } );
    
  </script>

This is for a v7.1 site.

Let us know how it goes.

Edited by creedon

Hello I'm Thomas. I've been getting websites up and running for 27 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • Replies 71
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Add the following to Store Settings > Advanced > Page Header Code Injection. <style> /* begin add store category descriptions */ @media screen and ( min-width: 576px ) {

try text-transform: unset;

@Fishlette Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. <style> .ProductList-filter--categories:before {   color: black;

Posted Images

@creedon That worked great! I plugged it into Lucinda Tassel category description. Now, I just need to figure out how to change that description for all the other categories. After I input your code with my description, every category populated that same introductory text. 

Link to post

Well now I'm confused the last question I asked is if there is only one description for all the categories. I thought your response to that was yes. But now it sounds like you actually need something closer to the original code I posted.

How about we do it this way you post all your category descriptions here. Label them so I know which is which. Then I'll whip up the code to match the descriptions provided.

Hello I'm Thomas. I've been getting websites up and running for 27 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Ahh!! Yes. Looked back at your question... I misunderstood what you were asking. My apologies. Here they are: 

Lucinda Tassel 

These effortlessly cool tassel earrings will elevate your style in an instant! Our handmade design shows off why we love leather - natural softness and movement. Jazz up your denim and boots, or wear them with your favorite dress. They go with literally everything and are light as a feather! Go on and shake it, Sugaree!

Sweet Leaf

Organic elegance, subtle sweetness and versatility. This design showcases the inherently luxurious textures that make leather so attractive. Whether you choose a shimmering metallic or an earthy palette, you’ll find yourself returning to the Sweet Leaf time and again. This style is our most popular for gift-giving. 

Electric Lady

Harness your inner rock star with this groovy Dust & Sunshine Original Design! Bold as love and flattering to the jaw line, they will perfectly frame that beautiful face of yours. These ladies are no-joke cool. Sure to make a bold statement!

Short Songbird

Dust & Sunshine earrings are adored for their stunning color combinations and the Songbird Styles showcase that flawlessly. Flaunt a refined touch of sophistication with this shorter style. They’re sure to become a classic in your jewelry repertoire. Designed and handcrafted with precision, resulting in an overall distinctive beauty. 

Long Songbird

A little bit country, a little bit rock ‘n roll - think Gypsy Cowgirl. There’s a little spark of magic when you adorn yourself with a striking pair of earrings. These beauties emphasize your natural femininity, and are just the right choice when you’re feeling bold. Show the world that you’re not messin’ around. 

Petite Deco

You’ll be livin’ on a high note in our most popular design! The Petite Deco is a smaller version of our flagship earring, the Grand Deco. Like all our styles, each piece is hand-cut, super lightweight and crafted to perfection. Elevated further by quality metal, giving them a truly upscale look.

Grand Deco

Our Grand Deco earrings were the very first in the Dust & Sunshine collection. Born from a love of Art Deco and geometric pattern, designer, Kara Johnson, dreamt up this iconic style. Grand Deco is a true statement piece, yet is wearable for any occasion. 

Wyoming Wristies

Saddle-Up with this everyday accessory! These bracelets are loved for their simple attractiveness. Each bracelet utilizes leftover pieces of gorgeous, high-quality leather sourced from Wyoming handbag makers. We use only genuine U.S. tanned leather which ages beautifully and becomes buttery soft over time. Solid brass rings and rivets contrast with supple leather for a timeless look. 

 

 

 

Link to post

I've updated the code in my multi category description post a half-dozen or so posts back.

Edited by creedon

Hello I'm Thomas. I've been getting websites up and running for 27 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

I also needed to add a text block to my products page, and had no trouble getting the text to display using Tuan's code from above. However, when I added the code, it changed the background color of my page from white (which is what I want) to the same color as my footer. Any suggestions on how to prevent that from happening when using this code? I tried changing the font color to black to see if that would negate the change in background color, but that didn't work. This is what I added:

<style>
  div#content:before {
    content: "To register, click a workshop option below. Don't forget to add Follow Up Coaching Sessions to your registration! ";
    display: block;
    text-align: center;
    font-family: monospace;
    color: white;
    font-size: 20px;
    margin-bottom: 50px;

Thanks in advance!

 

original.png

with code.png

Link to post
14 hours ago, jenvclt said:

I also needed to add a text block to my products page, and had no trouble getting the text to display using Tuan's code from above. However, when I added the code, it changed the background color of my page from white (which is what I want) to the same color as my footer. Any suggestions on how to prevent that from happening when using this code? I tried changing the font color to black to see if that would negate the change in background color, but that didn't work. This is what I added:

<style>
  div#content:before {
    content: "To register, click a workshop option below. Don't forget to add Follow Up Coaching Sessions to your registration! ";
    display: block;
    text-align: center;
    font-family: monospace;
    color: white;
    font-size: 20px;
    margin-bottom: 50px;

Thanks in advance!

 

original.png

with code.png

You code is missing </style> tag.

Can you share link to page in screenshot?

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
14 hours ago, jenvclt said:

Add to Home > Design > Custom CSS

body#collection-5f83c6e081c96361ebb73750 div#content:before {
    content: "To register, click a workshop option below. Don't forget to add Follow Up Coaching Sessions to your registration! ";
    display: block;
    text-align: center;
    font-family: monospace;
    color: black;
    font-size: 20px;
    margin-bottom: 50px;
}

 

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
6 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

6 hours ago, tuanphan said:

Add to Home > Design > Custom CSS



body#collection-5f83c6e081c96361ebb73750 div#content:before {
    content: "To register, click a workshop option below. Don't forget to add Follow Up Coaching Sessions to your registration! ";
    display: block;
    text-align: center;
    font-family: monospace;
    color: black;
    font-size: 20px;
    margin-bottom: 50px;
}

 

That worked! Thanks so much for the help, Tuan!!

 

 

Link to post

Site URL: https://botreefarm.co.uk/shop

Hi, everyone! I know you have talked to this before but the code posted above is not working for me :( , any ideas why? I want to be able to  add a text box above the category nav of a product page? Here is the link to the page https://botreefarm.co.uk/shop and I'm attaching a screenshot of what I'm looking for. 

  Any help would be appreciated!  Thanks so much! 

Screenshot 2020-11-19 at 01.31.39.png

Link to post

@Fishlette

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  .ProductList-filter--categories:before {
  
    color: black;
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
    display: block;
    font-family: proxima-nova;
    font-size: 1.2em;
    margin-bottom: 2em;
    
    }
    
  </style>

If you need help with changing font-size, color, etc. Let us know what you want and we can help.

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 27 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
5 hours ago, Fishlette said:

@creedonTHANK YOU so much! That worked great - is there any way to make the font for the content not take on the uppercase transform that I have set for categories in the global setting?

 

Thank you!

Jane

try text-transform: unset;

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
On 11/14/2020 at 5:04 AM, creedon said:

Add the following to Store Settings > Advanced > Page Header Code Injection.


<style>

  /* begin add store category descriptions */
  
    @media screen and ( min-width: 576px ) {
    
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-title {
      
        margin-bottom: calc( 37px / 2 );
        padding-bottom: 0;
        
        }
        
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-title::after {
      
        all: unset;
        
        }
        
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-description {
      
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        
        margin-bottom: 37px;
        padding-bottom: calc( 54px / 2 );
        position: relative;
        
        }
        
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-description::after {
      
        border-bottom: 1px solid;
        bottom: 0;
        content: '';
        left: 0;
        opacity: .2;
        position: absolute;
        width: 100%;
        
        }
      }
      
    /* end add store category descriptions */
    
  </style>

<script>

  $( ( ) => {
  
    // begin add store category descriptions
    
      const urlCategoryDescriptionMappings = {
      
                                    /* if the description has single quotes in it
                                       then put a backslash before the single
                                       quotes. example: it's becomes it\'s */
        
        '/shop/electric-lady'     : 'Harness your inner rock star with this groovy Dust & Sunshine Original Design! Bold as love and flattering to the jaw line, they will perfectly frame that beautiful face of yours. These ladies are no-joke cool. Sure to make a bold statement!',
        '/shop/grand-deco'        : 'Our Grand Deco earrings were the very first in the Dust & Sunshine collection. Born from a love of Art Deco and geometric pattern, designer, Kara Johnson, dreamt up this iconic style. Grand Deco is a true statement piece, yet is wearable for any occasion.',
        '/shop/limited-edition'   : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae. Proin libero nunc consequat interdum varius sit. Potenti nullam ac tortor vitae purus faucibus ornare. Fames ac turpis egestas maecenas pharetra convallis posuere morbi.',
        '/shop/long-songbird'     : 'A little bit country, a little bit rock ‘n roll - think Gypsy Cowgirl. There’s a little spark of magic when you adorn yourself with a striking pair of earrings. These beauties emphasize your natural femininity, and are just the right choice when you’re feeling bold. Show the world that you’re not messin’ around.',
        '/shop/lucinda-tassel'    : 'These effortlessly cool tassel earrings will elevate your style in an instant! Our handmade design shows off why we love leather - natural softness and movement. Jazz up your denim and boots, or wear them with your favorite dress. They go with literally everything and are light as a feather! Go on and shake it, Sugaree!',
        '/shop/petite-deco'       : 'You’ll be livin’ on a high note in our most popular design! The Petite Deco is a smaller version of our flagship earring, the Grand Deco. Like all our styles, each piece is hand-cut, super lightweight and crafted to perfection. Elevated further by quality metal, giving them a truly upscale look.',
        '/shop/short-songbird'    : 'Dust & Sunshine earrings are adored for their stunning color combinations and the Songbird Styles showcase that flawlessly. Flaunt a refined touch of sophistication with this shorter style. They’re sure to become a classic in your jewelry repertoire. Designed and handcrafted with precision, resulting in an overall distinctive beauty.',
        '/shop/sweet-leaf'        : 'Organic elegance, subtle sweetness and versatility. This design showcases the inherently luxurious textures that make leather so attractive. Whether you choose a shimmering metallic or an earthy palette, you’ll find yourself returning to the Sweet Leaf time and again. This style is our most popular for gift-giving.',
        
        // last or only item doesn't get a comma at the end
        
        '/shop/wyoming-wristies'  : 'Saddle-Up with this everyday accessory! These bracelets are loved for their simple attractiveness. Each bracelet utilizes leftover pieces of gorgeous, high-quality leather sourced from Wyoming handbag makers. We use only genuine U.S. tanned leather which ages beautifully and becomes buttery soft over time. Solid brass rings and rivets contrast with supple leather for a timeless look.',
        
        }
        
      // do not change anything below, there be the borg here
      
      if ( location.pathname == '/shop' ) return;
      
      if ( ! location.pathname in urlCategoryDescriptionMappings ) return;
      
      const categoryDescription = $( '<div>' )
      
        .text ( urlCategoryDescriptionMappings [ location.pathname ] )
        
        .html ( );
        
      $( '<div class="nested-category-description">' +
      
        '<p>' +
        
          categoryDescription +
          
          '</p>' +
          
        '</div>' ).insertAfter ( '.nested-category-title' );
        
      // end add store category descriptions
      
    } );
    
  </script>

This is for a v7.1 site.

You will of course need to extend the code to include the rest of your categories and descriptions.

After you set up for font style for the description take the site into mobile preview and see if there is a problem with the font overlapping the title. If so, let us know and we can see if it can be tweaked.

Let us now how is goes.

Just used your code. Worked great. Thank you :x

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post

@tuanphan @creedon I have an interesting/odd thing happening now. Using the code provided, I am now seeing that text above categories 🙌  However:

Firstly, it doesn't automatically show up as I land on a page - I have to refresh the page for the text block to show.

Second,  it seems to get stuck as I shift from product page to product page. For example, take a look at BUILD YOUR OWN Page: https://www.rebeccadolber.com/jewelry-making-kits

And then toggle over to NECKLACE page: https://www.rebeccadolber.com/necklaces

Do you have any recommendations by chance to be able to fix this somehow? 

Thank you so much!

Link to post
9 hours ago, Fishlette said:

I have an interesting/odd thing happening now.

Your site works great from here.

Does this issue occur when you are in Full Preview? Another way to test is to use private browsing so you are completely logged out of your site.

It could also be AJAX strikes again! You might try disabling it.

Could also be some caching issues going on.

Let us know how it goes.

Edited by creedon

Hello I'm Thomas. I've been getting websites up and running for 27 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 2 weeks later...

Thanks @tuanphan and @creedon for the help on product pages! I have one more small ask. I'd like to add a line break in my header text. Could you please advise what code I should insert? All the options I've tried have been unsuccessful. I'd like the line break to occur after the sentence that says "Don't forget to add Follow Up Coaching Sessions to your cart!" Here is the code I'm using:

<style>
  div#content:before {
    content: "To register, click on a workshop option below. Fees will not be collected when you checkout. We will send you a payment invoice using the information you provide during checkout. Don't forget to add Follow Up Coaching Sessions to your cart! Once you add items to your cart, scroll up to the top of the page to view your cart and complete your order.";
    display: block;
    text-align: center;
    font-family: proxima-nova;
    color: black;
    font-size: 20px;
    margin-bottom: 50px;
  }
   </style>

Thanks in advance for the guidance!

Link to post

@jenvclt

Try the following. I didn't reproduce the all the properties. Just the ones relevant to making the change you want.

div#content:before {

  content: "To register, click on a workshop option below. Fees will not be collected when you checkout. We will send you a payment invoice using the information you provide during checkout. Don't forget to add Follow Up Coaching Sessions to your cart!\AOnce you add items to your cart, scroll up to the top of the page to view your cart and complete your order.";
  white-space: pre-wrap;
  
  }

Note the \A for newline and the white-space property.

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 27 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...