I Want To Add Promotional Image with Custom Link and Buttons in Product Grid on Collection Pages

Store Design
, , , ,
1

Hi All,

I would like to request a modification to my store’s collection pages. I want to add an image in place of some of the products within the grid, with the image linking to a specific page or external site. I also want the ability to customize the button text on these images to control both the link destination and the text displayed on the button. The goal is a dynamic collection layout alternating between product items and image blocks.

I would also appreciate hearing from anyone who has completed this modification or something similar. Your insights or advice would be helpful as I move forward.

Screenshot (image) Attached below of Dossier, who have done something similar.

dossier page.jpg
dossier page.jpg1920×1204 152 KB

2

Hi @vinnyatwork ,

You can use Metaobject for images. Then, change the collection page code to make it display.

I hope it helps!

3

Hi Namphan,

Thank you for this recommendation, how would it be carried out though? Is this something you could help with?

4

Hi @vinnyatwork ,

Sure, can I send you a collaborator invite? I will check it

5

Hi @vinnyatwork ,

Don’t if this is closed, but here is the flow to implement this.

You need a metafield with list of metaobjects assuming their could be multiple blocks in single listing.

Every metafield will have below fields.

  1. index number [Product count after which this card will come]
  2. image file URL or file type to save image URL
  3. Text you or CTA text based on design
  4. Design type is you follow more than 1 design for the card
  5. CTA link to take users to desired link.

Now you need custom liquid code to append this design at their specific location, let me know if you are looking someone to implement the same.