Add text box above add to cart button for a specific product

Hi!

I’ve been reading different posts on this problem but it seems that I can’t quite figure it out.

I’ve been willing to add a text box above somewhere above the add to cart button for one specific product. Ideally in the place where I have drawn the upper red box (see screenshot below), or in the place of any of the other two red boxes.

I read a manual on creating different templates for different products here. I have created a separate product template and I have tried to add some sort of a text box in the sections file that I also created.

So far no luck in doing this.

I would welcome any recommendations.

I’m using a debutify theme.

Thank you!

@ArnoldAtwood

Great decision to create a new template but you created a new product template as you said but for that specific product did you select that template?

If don’t select that and you are working on a new template then you can’t see changes that you’re doing.

Thanks!

Hi,

Yes, I did select the template for that specific product.

I tried different pieces of code in the product template and I also, added a section code in the product template and created a new file under sections and I tried to add some code there.

Nothing worked. I lack the skills in coding.

@ArnoldAtwood

When you create a new template then you have to copy the code of the default section/product-template.liquid file. Copy and paste this file code and save. After that try to make changes in the newly created template code.

If you have already done this then please provide a new product template code here. I will take a look.

Thanks!

@dmwwebartisan ,

The code that is in the product.liquid file that is specifically created for the one product can be seen below.

I added a line with {% section ‘magnet-buddy-info-above-atc-button’ %} and then I created a section with the same name.


{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

  {% section 'magnet-buddy-info-above-atc-button' %}
  {% section 'product-template' %}{% section "dbtfy-upsell-bundles" %}{% section "dbtfy-pricing-table" %} 
  {% section 'product-recommendations' %}
  
  {% if settings.review_widget == 'review_widget_above' %}
    {% include 'review-widget' %}
  {% endif %}
  
  {% section 'related-product' %}

  {% if settings.review_widget == 'review_widget_under' %}
    {% include 'review-widget' %}
  {% endif %}
  
  {% if collection %}
    

      
        
        {{ 'products.general.collection_return' | t: collection: collection.title }}
      
    

  {% endif %}
  
  {% section 'quotes' %}

I tried copy/paste the default section/product-template.liquid code. But then everything is double on my website - I scroll down and my product page appears twice.

Code I use in the sections file is below:

{% comment %}
  The contents of the product.liquid template can be found in /snippets/product-template.liquid
{% endcomment %}

  {% include 'product-template' %}

{% unless product.empty == empty %}
  
{% endunless %}

{% schema %}
  {
    "name": "Product pages",
	"class": "product-section",
    "settings": [
	  {
        "type": "header",
        "content": "Product photos"
      },
	  {
        "type": "select",
        "id": "image_layout",
        "label": "Image display",
        "default": "stacked",
        "options": [
		  {
            "value": "stacked",
            "label": "Stacked"
          },
 		  {
            "value": "thumbnail",
            "label": "Thumbnail"
          }
        ]
      },
	  {
        "type": "select",
        "id": "product_photo_alignement",
        "label": "Image alignement",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "enable_zoom",
        "label": "Enable image zoom",
		"default": true
      },
	  {
        "type": "header",
        "content": "Product details"
      },
	  {
        "type": "checkbox",
        "id": "product_vendor",
        "label": "Show vendor",
        "default": false
      },
	  {
        "type": "checkbox",
        "id": "product_title_size",
        "label": "Big product tite",
        "default": false
      },
      {
        "type": "select",
        "id": "product_header_alignement",
        "label": "Alignement",
        "default": "",
        "options": [
          {
            "value": "",
            "label": "Left"
          },
          {
            "value": "text-center",
            "label": "Center"
          }
        ]
      },
      {
        "type": "select",
        "id": "product_selector",
        "label": "Variant picker type",
        "options": [
          {
            "value": "radio",
            "label": "Button"
          },
          {
            "value": "select",
            "label": "Dropdown"
          }
        ]
      },
	  {
        "type": "checkbox",
        "id": "quantity_enabled",
        "label": "Show quantity picker"
      },
	  {
        "type": "checkbox",
        "id": "button_cart_icon",
        "label": "Show button icon",
        "default": true
      },
	  {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_description",
        "label": "Show description",
        "default": true
      },
	  {
        "type": "checkbox",
        "id": "social_sharing_products",
        "label": "Enable product sharing",
        "default": true
      },
	  {
        "type": "checkbox",
        "id": "show_product_tags",
        "label": "Show product tags",
        "default": true
      }
    ,
      {
        "type": "header",
        "content": "Product tabs"
      },
      {
        "type": "checkbox",
        "id": "dbtfy_product_tabs_first",
        "label": "Open first tab",
        "default": true
      }
                        	],
    "blocks" : [
      {
        "type": "description",
        "name": "Description",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "dbtfy_product_tabs_icon",
            "label": "Icon",
            "default": "list",
            "info": "Enter the name of any free solid icons on [FontAwesome](https:\/\/fontawesome.com\/icons?d=gallery&s=solid&m=free)"
          },
          {
            "type": "text",
            "id": "dbtfy_product_tabs_title",
            "label": "Title",
            "default": "Details",
            "info": "To hide the default description, uncheck the \"Show description\" box above."
          }
        ]
      },
      {
        "type": "reviews",
        "name": "Reviews",
        "limit": 1,
        "settings": [
          {
            "type": "checkbox",
            "id": "dbtfy_product_tabs_review",
            "label": "Show star ratings",
            "default": true
          },
          {
            "type": "text",
            "id": "dbtfy_product_tabs_icon",
            "label": "Icon",
      			"default": "thumbs-up",
            "info": "Enter the name of any free solid icons on [FontAwesome](https:\/\/fontawesome.com\/icons?d=gallery&s=solid&m=free)"
          },
          {
            "type": "text",
            "id": "dbtfy_product_tabs_title",
            "label": "Title",
            "default": "Reviews",
            "info": "To show your review widget in product tabs, go in \"Review app\" > \"Review widget\" and select the \"In product tabs\" position"
          }
        ]
      },
      {
        "type": "text",
        "name": "Text/Image/HTML",
        "settings": [
          {
            "type": "select",
            "id": "text_alignment",
            "label": "Text alignment",
            "default": "text-center",
            "options": [
              {
                "value": "",
                "label": "Left"
              },
              {
                "value": "text-center",
                "label": "Center"
              },
              {
                "value": "text-right",
                "label": "Right"
              }
            ]
          },
          {
            "type": "text",
            "id": "dbtfy_product_tabs_icon",
            "label": "Icon",
            "info": "Enter the name of any free solid icons on [FontAwesome](https:\/\/fontawesome.com\/icons?d=gallery&s=solid&m=free)"
          },
          {
            "type": "text",
            "id": "dbtfy_product_tabs_title",
            "label": "Title",
            "default": "Rich text"
          },
          {
            "type": "richtext",
            "id": "dbtfy_product_tabs_text",
            "label": "Text"
          },
          {
            "type": "image_picker",
            "id": "dbtfy_product_tabs_image",
            "label": "Image"
          },
          {
            "type": "html",
            "id": "dbtfy_product_tabs_html",
            "label": "HTML"
          },
          {
            "type": "header",
            "content": "Visibility settings"
          },
          {
            "type": "text",
            "id": "dbtfy_product_tabs_type",
            "label": "Product type",
      			"info": "Comma-separated"
          },
          {
            "type": "text",
            "id": "dbtfy_product_tabs_tag",
            "label": "Product tag",
            "info": "Comma-separated"
          },
          {
            "type": "product",
            "id": "dbtfy_product_tabs_product",
            "label": "Product"
          },
          {
            "type": "collection",
            "id": "dbtfy_product_tabs_collection",
            "label": "Collection"
          }
        ]
      }
    ] } {% endschema %}

@ArnoldAtwood

Something wrong. You are working on product.liquid file. You need to work on sections/product-template.liquid file.

You have to copy the code of sections/product-template.liquid file and paste this code to the new section’s product template file.

Thanks!

@ArnoldAtwood

Now I got in this theme product-template. liquid file is in the snippets folder so you have to work on the snippets folder.

Sorry I got bit confused.

Thanks!

Thanks for all the help @dmwwebartisan but could you be more specific?

What code exactly do I need to put where?

Thanks a lot! :slightly_smiling_face:

@ArnoldAtwood

Is it possible for you to email me your theme’s zip?

It will be easy. I will install it on my test site, check the code, and give you the solution exact here.

This will send you an email. In that email, you will get a link. Click on that link. Download the theme zip file and send it to me.

Thanks!

@dmwwebartisan

I sent you an e-mail. Thank you very much for the help - it’s unexpected and very much appreciated!

1 Like

@ArnoldAtwood

I checked your template and found that you created only a template in the template folder with the name of “product.Magnet_Buddy.liquid”
But you forgot to create other pages related to the template.

Please follow the following instructions/steps.

Step-1
Open your templates/product.Magnet_Buddy.liquid file
Find the following:

{% section 'product-template' %}{% section "dbtfy-upsell-bundles" %}{% section "dbtfy-pricing-table" %}

Replace with:

{% section 'product-Magnet_buddy' %}{% section "dbtfy-upsell-bundles" %}{% section "dbtfy-pricing-table" %}

Step-2
Click on section folder → Click on add new section link → enter name “product-Magnet_Buddy”. Click on create new section button.
Open sections/product-template.liquid file. Select all code and copy.
Paste this code into the recently created section file “product-Magnet_Buddy.liquid” file.
In the “product-Magnet_Buddy.liquid” file.

Find the following:


{% include 'product-template' %}

Replace with


{% include 'product-Magnet_Buddy' %}

Step-3
Click on snipptes folder → Click on add new snippet link → enter name “product-Magnet_Buddy”. Click on the create a new snippet button.
Open snippet/product-template.liquid file. Select all code and copy.
Paste this code into the recently created snippet file “product-Magnet_Buddy.liquid” file.

That’s it!!

Now you will have a question for changes where you need to work. You need to work on "snippets/product-Magnet_Buddy.liquid" file.
Here whatever you can add above add to cart button.

Hope this helps others too.

Thanks!

1 Like

@dmwwebartisan ,

Thank you very much! Your solution worked like a charm!

Regards,

1 Like