Custom HTML and Design Elements on Product Pages

[Penrose]

Our website is going through a redesign and the agency we hired decided to use "blog" pages instead of "product" pages for a large amount of our items. This was so we could add custom HTML and populate the blog-as-product-page with custom HTML, as needed per page. We're using ACF to populate tabs for descriptions- per page as well.

But this is causing issues: the blogs lack breadcrumbs and the blog items are not appearing in the search bar. 

So, two questions:

1. Was using "blog" pages instead of "product" pages an obvious bad idea or am I missing something?

2. Are there Apps or tricks that can be used so Products Pages accept and show any custom HTML/Design elements we need per page?

thank you.

[KetanKumar]

@Penrose 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[mnearents]

You can change the code in your product pages to display whatever you want. For example, on our product pages for online classes, I am using Metafields to store information about the number of lessons, length of class, and a list of the lessons (scroll down below the product image section), and then using liquid/html to display the info stored in the Metafields.

You can also add breadcrumbs to your blog/product pages, and blog posts should show up in site search, so I'm not sure why they're not.

I do know there are apps specifically for adding tabs to product pages: https://apps.shopify.com/search?q=product%20tabs

One big problem with blog pages I can think of is you can't really make use of collections. Also, I'm not sure how you'd make adding a product to the cart work, or setting the price, taxes, etc. if you're using a blog.

[Penrose]

Before I try, ill ask. I want to add tabs along with desc and reviews that are customized per product page. Can I achieve this on product pages with ACF? 

[mnearents]

What is ACF? I'm not familiar.

[Penrose]

My bad, Metafields & Custom Fields. 

[Penrose]

Looks like I could implement the MF code right here. Familiar with editing code but not Shopify. Could this mess anything up?

 

[mnearents]

Just so I understand, you're wanting to implement the custom tabs on your product page. One tab will be the product description, another tab will be reviews, is that correct? If so, the code is already there, you'd just insert it on your product page instead of using blogs. Make a backup of your theme and edit the backup.

 

it looks like your product tabbing code is already written. So you'd just include the "product-tabbing.liquid" snippet on your product page. Does that make sense?

[Penrose]

Actually, I am wanting to have these tabs:

Description

Features *

Optional Features *

Videos *

Reviews

* = tabs created used Custom Fields and will only appear if the Custom Field data is entered. 

The tabs will appear between "Description" and Reviews" .. and have the same design.. see below:

All of this I can solve by using CF and some CSS/JS with a UL but I cannot get the Description to appear in one of the tabs nor Reviews. {{product.description}} does not work within CF HTML area. 

Got any tricks for showing the Description and Reviews inside a CF HTML tab of content?