Debut Theme: Product Page Layout Design

Tourist
5 0 1

Hi there,

 

I have a question in regards the product page design.

 

Im trying to add more information about my product like the benefits, specifications and customer reviews as well.

 

I added all the information above on my product page, but all the information only appeared on the right hand side, and the left hand side is blank:

https://www.omars.com/products/ac-outlet-portable-laptop-charger-omars-88wh-24000mah-80w-ac-power-ba...

 

I‘m trying to make my page look like the following one:

https://www.jackery.com/products/explorer-160-portable-power-station

 

In the above example, I can add more information as well as customer reviews in a better layout, instead of the debut theme that having all information on the right, and leave the left hand side blank.

1 Like
Shopify Expert
2466 414 519

Hi @leslielemon 

If you want to show all information in proper manage like you sent site then you have to do changes on page, you have to create tab section on section->product.liquid page and then add you description,specification and other information in tab as you like but for that you need html,css and Js code knowledge. You can get design from here

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes

Hi @leslielemon!

 

My name is Charles Wecker, and I am a member of Shogun's technical support team.  This is a great question, and I'm glad to see you're hoping to improve your site's design and sales.  I've taken a quick peak at the code on this page for you to determine how they built their product page, and it appears that this product page was built with our Shogun Page Builder application.

 

The easiest and simplest way to build a product page which includes this additional information while keeping the your product page's essential functioning and original design intact is to build your page using an existing layout (you can also fully customize your page).  The way our existing product page editing works is that 2 dropzones (which can be moved on the page) are added above and below your page's content, and then the product description area of your page also becomes editable.  It appears that this was the layout functionality used in the product page you referenced.

 

Let me know if you have any further questions about Shogun, and I hope I was able to help shed some light on how to create the product page you desire. :)

Charles Wecker | Technical Support, Shogun |
support@getshogun.com | Try Shogun Page Builder for Shopify for FREE!
1 Like
Tourist
5 0 1

Hi there,

 

Thanks for your reply. 

 

Do I need to copy and paste these codes https://www.w3schools.com/howto/howto_js_tabs.asp on my default theme? 

0 Likes
Shopify Expert
2466 414 519

Yes but you have to make it dynamic ic so your code working same just with new tab design.

For product description you can find  '{{product.description}}' in section->product-template.liquid file.

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes