Re: Custom HTML and Design Elements on Product Pages

Custom HTML and Design Elements on Product Pages

Penrose
Tourist
14 0 3

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.

 

Replies 8 (8)

KetanKumar
Shopify Partner
36938 3642 12000

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

mnearents
Shopify Partner
83 4 53

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
Tourist
14 0 3

chrome_YATumjqaJc2.png

 

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
Shopify Partner
83 4 53

What is ACF? I'm not familiar.

Penrose
Tourist
14 0 3

My bad, Metafields & Custom Fields. 

Penrose
Tourist
14 0 3

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

chrome_CibefqwZng.png

mnearents
Shopify Partner
83 4 53

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.

Group 12.png

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
Tourist
14 0 3

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:

 

Penrose_0-1647982114608.png

 

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?