Space for linkable images within a collection grid

malissa-pearl
New Member
4 0 0

Hi,

My collection page is a grid of 48 products - 16 rows of 3 columns.

I am trying to figure out the best way to do the following:

Create a unique collection page that functions as the main one does, but allows me to also display a marketing image and link instead of a product image, product name and price.

1 - I've seen it on other websites, but I don't know if there is a specific name for this type of functionality.

2 - Is there an app that does this?

3 - If I were to create through custom code, does it make sense to create an alternate product type or create an alternate collection page that has different instructions for a product type or specific collection?

I'm basically trying to figure out the best way to implement this in my store. Any thoughts or suggestions out there?

https://www.crateandbarrel.com/decorating-and-accessories/outdoor-pillows/1 - on row 4, column 1, and row 10, column 4 of this page, there is an example of what I am trying to achieve...

Thank you!

- Malissa

0 Likes
ShanifAtApteo
Shopify Partner
35 3 6

Hi @malissa-pearl, great to digitally meet you. I believe you should be able to solve your problems by following the given steps.

1: Go to Online Store > Actions > Edit Code > Sections 

2: Click on Add New Section give a name for this case using “marketing-image”

3: Paste this code in new file “marketing-image” and save

        <div class="img-holder">

         <a href="{{ section.settings.img_url }}"> <img src="{{ section.settings.img | img_url: 'master' }}" alt="image"><a>

        </div>  

{% schema %}

{

  "name": "marketing image",

  "settings": [

  {

    "type": "image_picker",

    "id": "img",

    "label": "marketing image"

  },

  {

    "type": "url",

    "id": "img_url",

    "label": "Image Click link"

  }

  ]

}

{% endschema %}

{% stylesheet %}

{% endstylesheet %}

{% javascript %}

{% endjavascript %}

4: Open collection.liquid code file 

5: Paste this line of code {% section ‘marketing-image ' %} before {% section 'collection-template' %} line of code

After pasting code will show like this,

{% section ‘marketing-image' %}

{% section 'collection-template' %}

Now open the customizer and add the image and link you want to use. Hopefully that solves your problem. If not, please let me know if you're seeing any other issues.

Shanif Dhanani, CEO and data scientist at Apteo
- Was I able to help? Click Like to let me know!
- If I was able to answer your question, click Accept as Solution
- Want to increase your customer lifetime value with A.I.? Check out Apteo
0 Likes
malissa-pearl
New Member
4 0 0

Thanks, @ShanifAtApteo ! Trying the solution. My code is a little different because it's a custom theme, so I am just looking for the right place to add the marketing-image snippet. I'll let you know if this works out for me. Appreciate your response very much!!

0 Likes