I have a Section on Homepage that I want to appear on another page with different images/text. However the section does not appear correctly on the other page, the bounding boxes are wrong (see screen shots). I have found the source of the issue but don’t know how to fix it:
The Section refers to a Snippet which has code within a <div of data-section-type=“homepage-usps” . If remove the code data-section-type=“homepage-usps” , then the Homepage changes to be the same incorrect format as the other page so it’s as though the other page can’t access the data in this Section Type (I don’t know what a Section Type is and can’t find info on it).
The only place I can find “homepage-usps” is in an Asset called template.index.js. I tried copying this Asset and renaming template.otherpage.js but no effect.
Thanks in advance!
@BovineAl , Hope you are doing well.
Does your store is on Shopify 2.0? or you are using the old theme of Shopify?
if you are on old theme of Shopify then if you use the same section on other pages from the home page then it’ll display the same content.
I don’t have product.json in templates so I think old Shopify. I am using a custom theme created by a developer (who are super busy so can’t help us for weeks). However is is not displaying the same on the other page, See Screen Shots. On the homepage the bounding box is set but on the other page bounding box changes depending on text content input. The content input to both is the same.
So, you would like to display the look and feel as a home page but with different text? Am I right?
Correct. But changing the text isn’t the issue. The same section with the same text displays differently as you can see. As mentioned it is something to do with referencing data-section-type=“homepage-usps”, as when I remove this code line the homepage changes to be the same as the Other page with incorrect bounding box. Do you what a Section Type is?
Okay, got it. Could you share the link to the home page and another page where you have inserted this section?
@BovineAl , I have taken a look on both pages, it looks like the on home page the slider functionality is activated, and on the inner page it does not. Could you please check the section settings are same on the both pages?
yeh it isn’t sliding either. how do I check that section setting?
the settings under the schema in the Section code are all the same if that is what you mean.
i’ve also noticed when inspecting the output code on the pages that the home page differs from the liquid code. see screen shot of code below.
eg line 9:
.
The other page outputs just as in the code, but the homepage alters this to:
@BovineAl , From here I can’t figure out the issue.
Is it possible to get theme access? so I can check the code and find out the solution
@webwondersco thanks very much for looking. I can’t give you access to the theme for site safety but I can send you some of the theme files, you can download here:
https://we.tl/t-0K4LqJtSDt
These are copies of the Section and Snippet that are on the homepage that appear differently on the other page.
Section name is: usp-carousel-two-co-brand.liquid
The section refers to Snippet: usp-bar-co-brand.liquid
The snippet has code line data-section-type=“homepage-usps” . This line of code is the key, as if I remove this line of code from the original section on the hompage, the homepage appears like the copied section. I have searched for text homepage-usps and it appears two Assets: template.index.js and template.index.js.map. Both these Assets are in the download file.
Could you tell me what these Asset files are and if I can edit a copy of them so that the other page can use the resources they are referring to?
