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

Highlighted
Tourist
9 0 10

Here's what I'm trying to accomplish.

1) I am using the Debut theme and wish to use the "text columns with images" section layout for the bottom of certain product pages.

2) I have already created a "product.bundle.liquid" file that calls {% section 'feature-columns' %} in it.

3) So now, in the template editor, any product with "product.bundle.liquid" suffix shows in the UI for adding items to the "text columns with images". It works as expected except...

4) The problem is that the "text columns with images" section is the same for any product that has that suffix. So if I change the image in one product, any other product with that layout shows the same image. 

So obviously I'm missing some key info about how sections work. I would like to have a unique "text columns with images" for every product with the suffix "product.bundle".

Is the only way to do this by making unique template suffixes for every product I wish to have this function?

3 Likes
Highlighted
New Member
1 0 0

Have you found a solution to this problem? 

0 Likes
Highlighted
Shopify Expert
9928 104 1765

If you include a section in the product template the content is going to be the same for every product. If you need to do per product customisations Sections may not be the tool for the job. 

What are you actually trying to achieve?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
1 0 1

I have the same question.  Trying to add extra content specific to each product below the product.  Any thoughts?

1 Like
Highlighted
New Member
2 0 1

Bump.

Been googling this exact topic for the last 20 minutes. This and 1 other thread in the forums popped up, only resources on the entire internet from what I can find, and neither actually answer the question.

How do we add an additional content section on a product page beneath the product info, that is UNIQUE to each product?

**** update **** actually found a post that can do what I need it to. Please note, I literally started exploring Shopify a week ago, and barely literate. So while this works, I make no claims as to whether or not it's the "kosher" way of doing it right. Being that there's not much info or documenation about this, I'm just happy that it works.

I'm currently using Debut theme.

1. In product.template.liquid (in your "sections" folder) find the closing div tag for the "product-template__container" div.

2. Copy and paste this code immediately after on a new line:

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

3. Create a page (not product) with the additional product content you want. After you generate the page, not the "URL and Handle" that's generated for you at the bottom. You're going to want the part after . "/pages/" in the URL.

4. Go back to the product page, and under "Product Type", enter the handle of the page (the part in the URL after /pages/). 

5. If you did it correctly, you should now see the content page you created inserted into the product page, underneath the actual product.

 

1 Like
Highlighted
New Member
7 0 0

Hi Mckinley:

This works; however, the added text spans the entire width of the page.  Do you know how to put in left and right margins for the text?

Thanks for the info.  Very helpful!

Ron

0 Likes
Highlighted
New Member
2 0 1

Not sure what them you're using, but I'm using Debut, and within your <div> tag for your additional product content, I added an additional class of "page-width" which provides left and right margins from the Debut theme's css.

If you're familiar with CSS, you can also just set whatever left and right margins you want. Like I said, I'm pretty new to Shopify's theming stuff. I'm proficient in HTML and CSS, but Shopify has it's quirks for sure. For now, I just created a completely new CSS file, and using it to override anything I don't like about the Debut theme. That way I'm not directly messing with Debut itself.

0 Likes
Highlighted
New Member
7 0 0

I am also using Debut.  I am new to Shopify too.  I know a little HTML, but I don't know CSS, so I don't know how to create that additional class.  Can you write that here?  I tried searching Google for this, but what I found does not seem to work.

It sounds as if you are using a child template for modifications.  Is that right?

Also, this method seems to put the social buttons above the added text, which looks a little strange.  I wonder if there is a way to put those below the added text.

Thanks for any help!

0 Likes
Highlighted
New Member
7 0 0

I contacted Shopify customer support about this issue.  They have modified the Debut theme so that the above method adds a text box with proper dimensions below the picture.  Social buttons have also been moved below the added text box.

0 Likes
Highlighted
Tourist
30 0 1

Just to update people who have this issue.
If you are using the Debut template you can now just type in whatever you want to display underneath you product picture by doing the following:

1. In product.template.liquid (in your "sections" folder) find the closing div tag for the "product-template__container" div. (Usually located as the first div)

Should look similar to this:

                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ image.alt | escape }}">
          </div>
        </div>
      {% endfor %}

2) just right after the % endfor % you can type whatever you want to display/insert using the right tags. If you want a general text to display underneath the product picture you can use the <p> you text here </p> tags. 
3) save your file and see the magic.
 

0 Likes