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

@SteveVern

Add the following with the other category code.

<style>

  @media screen and ( min-width : 0 ) and ( max-width : 1943px ) and ( orientation : landscape ) {
  
    .nested-category-description {
    
      font-size : calc( ( 1.5 - 1 ) * 1.2vw + 1rem );
      
      }
    }
    
  </style>

You could add a font-family parameter if you want to change the font family.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@creedon @tuanphan Hi both! I am trying to do something very similar to the above queries but it doesn't seem to have been answered.

I just want to add a product description underneath each of the product categories in my 7.0 site. So when you click on category you get the description of the category below, above the products.

My site is: https://www.stephenbutler.co.

Any help would be much appreciated!

Thanks

Link to comment
3 hours ago, minnieosc0504 said:

So when you click on category you get the description of the category below, above the products.

If I understand correctly when a site visitor clicks on a category you want the category description to appear between all the categories and the product grid? Is that correct?

Could you provide an image mockup of what you want? Not required but it would help us to understand what you want that is different from what some of the other folks have wanted.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@minnieosc0504

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

<script>

  $( ( ) => {
  
    /*
    
      begin add store category page description
      
      SS Version : 7.0
      Templates  : Avenue
                   Bedford ( Anya, Bryant, Hayden )
                   Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,
                   Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke,
                   Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer,
                   Miller, Mojave, Moksha, Motto, Nueva, Pedro, Pursuit, Rally,
                   Rover, Royce, Sofia, Sonora, Stella, Thorne, Vow, Wav, West )
                   
                   your template is not listed? then it is not currently
                   supported
                   
      */
      
    const storeUrlSlug = 'shop'; /* copy value here from Store Settings >
                                    General > URL SLUG field. you only need
                                    exactly what can be selected from the field
                                    
                                    */
    
    const categoryDescriptionMappings = {
    
                             /* if the description has single quotes in it then
                                put a backslash before the single quotes.
                                example: it's becomes it\'s */
      
      'Photobooks'         : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ipsum nunc aliquet bibendum enim.',
      
      // last or only item doesn't get a comma at the end
      
      'Stephen%27s+Prints' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ornare quam viverra orci.'
      
      };
      
    // do not change anything below, there be the borg here
    
    // are we on the store page, if not bail
    
      if ( location.pathname !== '/' + storeUrlSlug ) return;
      
    // are we on a category page, if not bail
    
      const searchParams = new URLSearchParams ( location.search );
      
      const category = searchParams.get ( 'category' );
      
      if ( category == null ) return;
      
    // has a category been defined by the user, if not bail
    
      if ( ! ( category in categoryDescriptionMappings ) ) return;
      
    // can we get a template id, if not bail
    
      let templateId;
      
      try { templateId = Static.SQUARESPACE_CONTEXT.templateId } catch {
      
        return };
        
    // is the template id one we support, if not bail
    
      const templateIds = {
      
        '4fd11f32c4aad9b01c9e624c' : { // Avenue
        
          insertBeforeSelector : '#productList'
          
          },
          
        '52a74dafe4b073a80cd253c5' : { // Bedford family
        
          insertBeforeSelector : '#productList'
          
          },
          
        '55f0aac0e4b0f0a5b7e0b22e' : { // Brine family
        
          insertBeforeSelector : '.ProductList-grid'
          
          }
        }
        
      if ( ! ( templateId in templateIds ) ) return;
      
    // add the category description
    
    $( '<div class="tc-category-description">' +
    
      '<p>' +
      
        categoryDescriptionMappings [ category ] +
        
        '</p>' +
        
      '</div>' )
      
      .insertBefore ( templateIds [ templateId ].insertBeforeSelector );
      
    // end add store category page description
    
    } );
    
  </script>

This is for v7.0 and works with several templates.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
On 4/24/2020 at 2:44 PM, tuanphan said:

Add to Home > Design > Custom CSS


div#categoryNav:before {
    content: "Tuan Phan";
    display: block;
    text-align: center;
    font-family: monospace;
    color: white;
    margin-bottom: 20px;
}

 

I have used this (or similar, mine was div#productList: before {) But wondering how to add two separate sections of text here, for example I want the top line to be a heading, like my h2 headings i.e. font size 80px and font-family: luster. Then underneath I want the body text to be in a different font and size. Can anyone help with this please?

www.mindbodybowl.com.au, 'packages' page

password hranson88

Link to comment

@Hranson88

The CSS :before is pretty limited. You can't use it to add HTML (h1, h2, etc.). It is really only good for adding a single bit of text styled in a certain way.

For what you want please see the following.

 

The trick is to make a page in Pages > NOT LINKED that contains the text you want to insert. Then point the code to the URL Slug for that page.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Thank you @creedon, I created a new unlinked page called Packages blurb or /packages-blurb that just contains the text that I want to go at the top of the Product page. I tried adding the codes from that post you referenced above, but my text is still not showing up. Would you mind taking a look and seeing what I've done wrong? Thank you again!

Link to comment
  • 1 month later...
  • 3 weeks later...
Posted (edited)

This thread is incredible! @creedon might you be open to helping me as well?  A few things I've been digging into and attempting to solve!

  1. On https://www.therisejourney.com/lunch-learn-programs?tag=Mona+Eshaiker (or any other tag page) looking to have the description of the item and author show--not just the title!
  2. Would love to increase font sizes title, tag, and description 2 or 3 steps respectively.  https://www.therisejourney.com/lunch-learn-jes-to-delete
  3. Add tags below the categories (aka the authors) https://www.therisejourney.com/lunch-learn-programs
Edited by therisejourney
Link to comment
  • 1 month later...
On 6/3/2021 at 6:07 AM, therisejourney said:

This thread is incredible! @creedon might you be open to helping me as well?  A few things I've been digging into and attempting to solve!

  1. On https://www.therisejourney.com/lunch-learn-programs?tag=Mona+Eshaiker (or any other tag page) looking to have the description of the item and author show--not just the title!
  2. Would love to increase font sizes title, tag, and description 2 or 3 steps respectively.  https://www.therisejourney.com/lunch-learn-jes-to-delete
  3. Add tags below the categories (aka the authors) https://www.therisejourney.com/lunch-learn-programs

Hi. Do you still need help on this? 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
On 4/23/2020 at 10:14 PM, tuanphan said:

Add to Home > Design > Custom CSS

div#categoryNav:before {
    content: "Tuan Phan";
    display: block;
    text-align: center;
    font-family: monospace;
    color: white;
    margin-bottom: 20px;
}

 

Hey @tuanphan! I stole this for my site, exactly what I needed! Just having trouble adding a line break in there for my text. Is that doable? Ex. having 

Tuan
Phan 

 

Link to comment
On 8/8/2021 at 12:57 PM, joshua.reynolds said:

Hey @tuanphan! I stole this for my site, exactly what I needed! Just having trouble adding a line break in there for my text. Is that doable? Ex. having 

Tuan
Phan 

 

Use this code

div#categoryNav:before {
    content: "Tuan \A Phan";
	white-space: pre-wrap;
    display: block;
    text-align: center;
    font-family: monospace;
    color: white;
    margin-bottom: 20px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 5/14/2021 at 3:34 PM, creedon said:

@SorenJakobsen

Do you need a single description for all your product listing pages? Or, are your products divided into categories and you need to describe each category.

@creedon I am having this issue and was wondering if custom CSS was an option to resolve. Currently on my shop http://rebeccaholt.co/shop you can see I’ve made a custom header image that says shop and explanations of made to order versus ready to ship. I would like that to not show up on all category pages, only shop page.
 

Additionally, I would like to show the (mobile + desktop) shop menu of categories at the top of every page, not just a breadcrumb. 

Is there a way to do that? Is there hope?

Link to comment
2 hours ago, lindz5223 said:

Can I add a link inside of the urlCategoryDescriptionMappings? My client is asking for a word to be hyperlinked to another page or a url? Thanks!

The code currently does not support HTML or links inside the description. It may be possible to add the capability.

Would you and/or your client be comfortable with adding HTML directly into the descriptions if the capability was there? It might look something like the following.

Here is my description with a <a href="/a-link">link</a> for one of the words.

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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