Jump to content

Same additional info block for each product listing page

Recommended Posts

Site URL: https://www.astrida.co/shop-accessories

Hello, is there a way to add a similar additional info block across all product page? It is a little tedious to add into each listing on at a time.... wondering how to use accordion style to implement the following:

 

+ More Information

Leather Colours (linked to https://www.astrida.co/mass-colour-swatch)

Thread Colours (linked to https://www.astrida.co/thread-colours)

 

This is an example in the additional info using the accordion block: https://www.astrida.co/shop-accessories/deluxe-keyfob/001

This is all my other listing currently using markdown: 

219845800_Screenshot2021-11-17at17_23_57.thumb.png.3fd1fbf9bdadb9db3123f560f9a7072b.png

 

Thank you!!

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

1 hour ago, audrey9988 said:

Site URL: https://www.astrida.co/shop-accessories

Hello, is there a way to add a similar additional info block across all product page? It is a little tedious to add into each listing on at a time.... wondering how to use accordion style to implement the following:

 

+ More Information

Leather Colours (linked to https://www.astrida.co/mass-colour-swatch)

Thread Colours (linked to https://www.astrida.co/thread-colours)

 

This is an example in the additional info using the accordion block: https://www.astrida.co/shop-accessories/deluxe-keyfob/001

This is all my other listing currently using markdown: 

219845800_Screenshot2021-11-17at17_23_57.thumb.png.3fd1fbf9bdadb9db3123f560f9a7072b.png

 

Thank you!!

Do you mean adding this part in all product item Pages?

image.thumb.png.5262d1706865e55127e99c2099ba7cf4.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
19 hours ago, bangank36 said:

Do you mean adding this part in all product item Pages?

image.thumb.png.5262d1706865e55127e99c2099ba7cf4.png

Just the {More Information} part with accordion linked to two other pg. 

For the footer content " our leather goods.....awaits" I had made it across all pages!

Link to comment
4 hours ago, audrey9988 said:

Just the {More Information} part with accordion linked to two other pg. 

For the footer content " our leather goods.....awaits" I had made it across all pages!

Hi @audrey9988,

You can try adding to Home > Settings > Advanced > Code Injection (choose the footer)

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	$('.Main--products-item .ProductItem-additional').load('/shop-accessories/deluxe-keyfob/cordovan #block-08fd93a4eb48ba424024');
</script>

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
19 hours ago, bangank36 said:

Hi @audrey9988,

You can try adding to Home > Settings > Advanced > Code Injection (choose the footer)

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	$('.Main--products-item .ProductItem-additional').load('/shop-accessories/deluxe-keyfob/cordovan #block-08fd93a4eb48ba424024');
</script>

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

it doesn't work, all the other product pages still shows the 'old' style.

Should I delete all the custom html from each listing, and if there is a method to code from adv > footer code injection?

Screenshot 2021-11-19 at 14.47.43.png

Screenshot 2021-11-19 at 14.53.39.png

Link to comment

@bangank36 i managed to sort it out across all product listing, but only the main page with the accordion in additional info is able to load with the links. All the other pages are not responsive 😞 also, seems like there has to be something written in the markdown block so it can be loaded

/shop-accessories/deluxe-keyfob/cordovan 

869569068_Screenshot2021-11-19at23_59_50.thumb.png.df844fe67b03d71db4ecb30b1b776caf.png

 

Edited by audrey9988
Link to comment
14 hours ago, tuanphan said:

@audrey9988 Do you still need help?

managed to figure out another way (create a blank/original solo page [disabled view] then custom html > input block id into the script in advance code injection)

however I couldn't figure how to do it as responsive accordion (only doable on the original solo page) , do did it as a list style instead. if I were to do accordion html, it will not be responsive on the product pages, any idea what's causing the error?

+ blank hidden page, and the script (footer code injection

712637382_Screenshot2021-11-22at00_42_29.thumb.png.2c6063f5e3300b806d34b4b0d54e5859.png706652575_Screenshot2021-11-22at00_48_49.thumb.png.c4449741d1c06334274cc35020f89620.png

https://www.astrida.co/shop-businesspass/business-pass/buttero-burgundy

+ how it appears on all pages

310662724_Screenshot2021-11-22at00_49_56.thumb.png.543d5ce852397d891d14a7acba2bf55c.png 

 

Edited by audrey9988
Link to comment
Quote

it will not be responsive on the product pages, any idea what's causing the error?

When you say not responsive do you mean the accordion is not functional? As is you click on plusses and nothing happens?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.