How can I add text above the product title and price line in product-template.liquid?

Store Design
1

I would like to add some text above the line between the product tile and price. When I add the following code above the “hr” tag in the “product-template.liquid” file it does not show up.

this is the code. I also created a checkbox that when checked the message is displayed, right now it is set to true so I can always see it. I have created a class “pepper-notice” in css


{%- if section.settings.notice -%}

**some text:** Only some text some text

{%- endif -%}

Screen Shot 2021-09-06 at 6.46.30 PM.png
Screen Shot 2021-09-06 at 6.46.30 PM.png2888×1214 226 KB

2

@DFlores - there are too many unknowns for us to be able to solve this. To name a few:

  • what is the actual value at the time of evaluating section.settings.notice?
  • what does the if evaluate to?
  • what css or js is associated with .pepper-notice?
  • is the template being loaded at all?
  • is the screenshot from the right part of the site?
  • what does the html source code look like?
  • what does the console output look like?
  • is the screenshot from the right theme?

some of this can easily be answered by having a link to that page. I wish everyone would include one with their questions …

Mario

2 Likes
3

That right

4

@Mickysteady - oh again? That guy must be really good. You should ask him to join and contribute here instead of spamming his email address here. Personal Info should not be shared publicly here anyways.

5

Ohh am very sorry

6

Store url? It helps other people understand a problem when they can see it.

Be sure the page your looking at actually uses whatever file product-template.liquid and isn’t using alternate templates, or skipping it if it’s a section file.

Try to output any new html not reliant on liquid logic to see if it appears on the page as expect.

1 Like
7

Sorry for not having all the required information. Click Here for the web page. all the blue borders is for debugging please ignore. The highlighted square and the red text is where i would like the text placed. I have also noticed that the code does not show up in the HTML. Incase the link does not work. https://copstop-test.myshopify.com/products/tetsubg and the password is temp


{{ 'product.general.payment_notice' | t }}

                  {%- endif -%}

                  {%- if section.settings.notice -%}
                    

**some text:** Only some text some text

                  

                  {%- endif -%}

                  {%- if show_payment_icons and section.settings.custom_security_badge -%}
                    

---

                  {%- endif -%}

the schema for “section.settings.notice’”. I made it true just so I can see it with out checking the box every-time.

{
    "type": "checkbox",
    "id": "notice",
    "label": "California Notice",
    "default": true
    },

The CSS code.

.pepper-notice {
  border: 1px solid #ff671d;
  padding: 10px;
  border-radius: 5px;
  background: #ff661b69;
  margin-bottom: 0px;
  font-size: 14px;
}

The template is from the warehouse theme.

8

Hello everyone, first I would like to thank everyone for their support and help in this problem. After searching deep into the programming I noticed that the product-template.liquid file was accessing the product-info.liquid snippet file. I added schema into the product-template.liquid. see below for the items I added. My thoughts on adding the richtext schema. I decided to add this so I can add the text directly instead of placing directly in the code.

product-template.liquid (schema added)

{
    "type": "checkbox",
    "id": "notice",
    "label": "California Notice",
    "default": true
    },
    {
    "type": "richtext",
    "id": "cal_notice",
    "label": "Text",
    "default": "

 Type the restriction notices 

"
    },

The product-info.liquid snippet file. I added this code right above the

tag and right below the share buttons.


    {%- if section.settings.notice -%}
    
      {{ section.settings.cal_notice }}
    

    {%- endif -%}

I also added some CSS

.pepper-notice {
  border: 1px solid #ff671d;
  padding: 10px;
  border-radius: 5px;
  background: #ff661b69;
  margin-bottom: 0px;
  font-size: 14px;
}

Once again, thank you