How can I add another content field for my Product page ?

Highlighted
Shopify Partner
26 0 0

Hello, I need to add more content in my product pages. Right now all the content is on the right side and that is ok for some of it but I need another section underneath the product in the middle of the page... an extra content section...

How can I do that ? I realised i could do it with an app called pagefly but isnt there a way to do it directly trough shopify ?

0 Likes
Highlighted
Shopify Partner
1166 32 214

Hi Nadya,

Which theme are you using now?

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes
Highlighted
Shopify Partner
26 0 0

Oh yeah, forgot to mention that. I use the Venture theme ...

0 Likes
Highlighted
Shopify Expert
45 4 9

Hi there,

Do you need to have different info on that section for each product or would you like to have the same content on all product pages? Or even would you like to have specific content for specific groups of products (for example depending on Product Type or Vendor)?

Based on your answer to these questions, the approach would be different. Let me know

Shopify Expert @ Sounds Good Agency
Like this answer if it helped you
✅ Mark it Accept as Solution to help others find the right answer
Book a Free Call if you want to discuss your project | Follow me @davidsimoes_
0 Likes
Highlighted
Shopify Partner
26 0 0

Hello David, 

Yes, I would need to have different info on that section for each product so each product page has 2 separate sections where one is one the left side of the product picture and  then as mentioned above, the second section to be underneath the priduct picture and side tekst and in the middle of the page. And it has to be wide like this page right here with the sides cut off, if you get what I mean. 

And while I got you here, could you also tell me how to make the thumbnail photos to be underneath the main product picture instead of on the left like it is now.

0 Likes
Highlighted
Shopify Partner
26 0 0

:)

0 Likes
Highlighted

Nadya,

As the alternative way you can use one of page builder apps available on the market. You'll save the time with adding more content to your product page. Shogun, PageFly, HyperVisual are the worth apps to check :).

Just give a try with them and decide what app fits you the best. All of them has PROs and CONs, but you definitely know what's the best for your case. Visit Shopify marketplace at here https://apps.shopify.com/search/query?utf8=%E2%9C%93&q=page+builder

❤️ Found my answer helpful? Please LIKE or Accept Solutions.
❤️Shopify Calculator - What's the Cost of a Shopify Store? Read More
0 Likes
Highlighted
Shopify Expert
45 4 9

Hi Nadya, sorry for the late response (for some reason didn't get notified when you wrote me).

Tony's solution may be helpful to you, but from the little experience I have with page builders, usually, nothing is so simple as it looks like.

Let me answer to how you can address the issues you have:

  1. Insert more content on the product page - If you need to have different content per product, this means you need to have more fields in your product page administration. Then you can display the info from those fields on the product page. This may require a little bit of coding, but take a look at Custom Fields. That's how I'd do it. If the code part would be too complicated for you, take a look at the page builders Tony referred. Last case scenario, book some time with me so we can discuss it more easily on a call.
     
  2. Go to theme.scss.liquid, find:
    @include media-query($medium-up) {
      .photos {
        @include display-flexbox();
        @include align-items(flex-start);
        flex-direction: row;
      }

    and replace row by column. You'll have this:

    @include media-query($medium-up) {
      .photos {
        @include display-flexbox();
        @include align-items(flex-start);
        flex-direction: column;
      }

     On the same file look for:

    .photos__item--main {
        @include flex(1 1 auto);
        order: 2;
      }

    Replace the 2 by 1:

    .photos__item--main {
        @include flex(1 1 auto);
        order: 1;
      }

     On the same file look for:

    .photos__item--thumbs {
        order: 1;
        @include flex(0 0 15%);
      }

    and replace by 2:

    .photos__item--thumbs {
        order: 2;
        @include flex(0 0 15%);
      }

     On the same file look for:

    .product-single__thumbnails--static {
      display: block;
      text-align: center;
    ...

    and replace block by inline-flex:

    .product-single__thumbnails--static {
      display: inline-flex;
      text-align: center;
    ...

    and it's done. I tried this on Venture theme on a test store and it worked well.

Let me know how it goes for you :)

Shopify Expert @ Sounds Good Agency
Like this answer if it helped you
✅ Mark it Accept as Solution to help others find the right answer
Book a Free Call if you want to discuss your project | Follow me @davidsimoes_
0 Likes
Highlighted
Shopify Partner
26 0 0

Hey there David, I just came back from a little break and I am looking at the code in my page but I dont have a theme.css.liquid

Mine is 
theme.scss.liquid under in assets sections

 

I actually figured it out all except one thing.  All looks fine but the pictures are now in a vertical line instead of a horizontal under the main picture

 

0 Likes
Highlighted
Shopify Expert
45 4 9

Yes, it's scss. My mistake :) updated my answer.

Can you tell me specifically what's different from what I wrote above?

I've installed the venture theme in a test store in order to test this. Without having access to your store it would be difficult to give more detailed advice.

Shopify Expert @ Sounds Good Agency
Like this answer if it helped you
✅ Mark it Accept as Solution to help others find the right answer
Book a Free Call if you want to discuss your project | Follow me @davidsimoes_
0 Likes