Is it possible to add Section content to bottom of Product page?

Highlighted
New Member
7 0 0

There is an easier way to do this without any need to look at templates and coding.

Just scroll down in the product page and in the right-hand column under Theme Templates, select product.split-description in the drop-down menu under Template suffix.

Then type the following in the description box for your product:  ~split~

Everything you type above ~split~ will appear to the right of your product picture, and everything you type below ~split~ will appear below your product picture.

0 Likes
Highlighted
Tourist
12 0 1

Where exactly is this done? I can't locate Theme Templates or Template suffix.... thx

All I want to do is put text UNDER my product image/thumbnails... everything is to the right leaving a huge blank area under my product image..

https://zenbed-mattress.com

Family man with 4 crazy kids. Owner, Aslan Mattress - A mattress built for athletes that works for lazy people too. 365 Night Trial, Infinite Warranty.
0 Likes
Highlighted
New Member
7 0 0

This is for the Debut theme.  If you don't see options as described below, you need to have Shopify support turn this feature on for your products.  I am not sure if this feature has been applied on a global scale for this theme.

1.  Click on Products on the left-hand side bar.

2.  Click on the product you want to add text to.

3.  Scroll down until you see the Theme templates box on the right-hand side bar.

4.  Select product.split-description in the drop-down menu under Template suffix

5.  Type ~split~  in the description box for your product

6.  Everything you type above ~split~ will appear to the right of your product picture, and everything you type below ~split~ will appear below your product picture.

0 Likes
Highlighted
New Member
3 0 0

Hello folks,

I have managed to get my product description to apear in the center of the page below the images, however the text spans the entire page right to the edge.

I'd like to be have the text not so wide for ease of reading.

Can anyone help me fix this.

I'm using the Debut theme.

Regards

0 Likes
Highlighted
New Member
2 0 0

I think this is how this post was originally opened, but I'm not sure.

I would like to add the same text and image under all product descriptions. I created a page with this content as suggested above and added the following code with the page generated link name our-promise to where is has product.type in the code below. It did not work. I am using Brookly theme. Does anyone know what the code should be?

<!-- Begin Additional Info -->
  <div class="make this whatever div name you want if you want to use CSS later">
      <!-- Create a page with this content. To attach it to the product, set the Product Type to the page's handle -->
      <h1>{{ pages[product.type].title }}</h1>
      <p>{{ pages[product.type].content }}</p>
  </div>
  <!-- End Additional Info -->
0 Likes
Highlighted
Shopify Partner
5 0 1

For content that is unique to each product page, try using metafields. I'm about to start exploring the different solutions for this but this article is a good start. I've heard of the Metafields Editor app that will let you define custom information fields that you can edit from your product page, but there's another 1 or 2 apps mentioned in the article. You insert the metafields content variable into your theme and style appropriately.

 

You can also use an app like PageFly which will extend all of your pages both content-wise and style-wise but it requires a subscription (not sure the limitations of the free version) and is not quite as "native" as using metafields.

0 Likes
Highlighted
New Member
2 0 2

This is a very old post but still, i think this problem exists for many people who do not want to pay extra for app.

Here is an easy way to do this.

What will this do:-

Create extra detail for a specific product that we want. Not globally the same details for all products.

Someone already gave a solution with the Product.Type but i believe we need product type for many other works. If we use product Type then it will limit some options. 

So i took the SKU of the product because it's the unique identifier.

STEPS:-

1. Go product.liquid find your template example {% section 'product-template' %}

2. Now go to your template e.g. Section > product-template.luquid

3. Now from where you want to show your extra details put this line

 

 

{% include 'product-extrabottom-content' %}

 

 

4. Go to Snippet click >  Add a new snippet

5. Put snippet name "product-extrabottom-content" 

6. Click "Create Snippet" now it will look like product-extrabottom-content.liquid

7. put the following code in your new "product-extrabottom-content.liquid"

 

 

{% comment %}
 Added by Arafat 16 Aug 2020. This Snippet is creating a section for product extra bottom details with the SKU match with page handle.
{% endcomment %}

{%- assign pagename = current_variant.sku  -%}
  
 {% if pages[pagename] %}
  	{% if pages[pagename].content != "" %} 	
        <div class="page-width productextrabottom"> 
        <!-- Begin Additional Info -->
          <div>
              <p>{{ pages[pagename].content }}</p>
          </div>
          <!-- End Additional Info -->
        </div>
 	{% endif %}
{% endif %} 

 

 

8.  Go to your theme.css file and insert the following CSS at the very bottom

 

 

// Product extra bottom

.productextrabottom {
  margin: 60px 0px;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  padding: 30px 0px;
}

//---------------------

 

 

9. That's it. Now just follow the following user instruction how to use it.

 

WHAT WILL SHOPIFY USER NEED TO MAINTAIN THIS FUNCTION:-

Product Extra Bottom Details Custom Function by - Arafat Jahan

This Extra Bottom Details for the Product that has a unique SKU. Example SKU: 5398870884504

This function is working with a unique identifier with the product SKU.

  • Product SKU cannot be duplicate ever.
  • If a product have no SKU then put the Shopify product ID as SKU.
  • To get product ID go to Shopify backend then go to product, on the browser address bar copy the product ID after myshopify.com/admin/products/

How to create extra details:-

  • Once you have a product unique SKU then copy the SKU.
  • Go to Online Store > Pages > Create New page
  • Put the SKU on Page title. (Only SKU nothing else no space)
  • In the content section write anything that you want to display as an Extra Bottom details for the product that have this SKU that you put on title.
  • Click Save.
  • Now a page has been created with the title that is actually the product SKU. And this page will be show as an extra bottom details of that specific product with that SKU.

Edit Existing Extra details:

When you have too many extra details on many product and you need to edit any extra details of any product follow the following steps:-

  • Go to the product page in admin you want to edit and then copy the SKU
  • Go to Online Store > Pages
  • On the filter search pages insert the SKU and click search. This will show the exact product page with that SKU.
  • Click that page and edit whatever you want.
  • Click SAVE.
  • You are all set. This will auto-update in that product extra bottom details.

Pro Tip:

If you have variants in your product like color: Red/Black/Blue then your product SKU will be different for each variant.

In this case, just copy the default variant SKU that will load when product page load and create a page with that SKU. You do not need to create all 3 pages for this 3 SKU.

Highlighted
New Member
1 0 0

Great info @ArafatJahan but would you like to let me know what should the code be on step 7 (following code in your new "product-extrabottom-content.liquid") for all products? This works great in case of having only 1 product. That's why I am asking you. So, I want the same content for all products (because I have only 1 product).

Thank you in advance!

 

This is the code:

{% comment %}
 Added by Arafat 16 Aug 2020. This Snippet is creating a section for product extra bottom details with the SKU match with page handle.
{% endcomment %}

{%- assign pagename = current_variant.sku  -%}
  
 {% if pages[pagename] %}
  	{% if pages[pagename].content != "" %} 	
        <div class="page-width productextrabottom"> 
        <!-- Begin Additional Info -->
          <div>
              <p>{{ pages[pagename].content }}</p>
          </div>
          <!-- End Additional Info -->
        </div>
 	{% endif %}
{% endif %} 

Waiting for your answer.

0 Likes