How can I include an 'As Seen In' section on my homepage?

Store Design
1

Hi there,

How can I add as seen in section on our homepage?

Like this:

mommylau_0-1644890900918.png
mommylau_0-1644890900918.png1161×271 32.3 KB

There is no option on the theme to have that section, but when I tried to hard code it, it looked like this

mommylau_1-1644890985019.png
mommylau_1-1644890985019.png1331×409 89.6 KB

This is my code:

AS SEEN IN

{% schema %}
{
“name”: “As Seen In”,
“settings”: ,
“presets”: [
{
“name”: “As Seen In”,
“category” : “Advanced layout”
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

can someone help me? Also on the view on mobile? Thanks

2

@mommylau ,

Welcome to the Community.

Share the store URL please with password,

3

Hi @mommylau ,

You can add it with HTML section, please follow the steps:

  • Step 1: Go to Customize > Add section > Custom HTML.

  • Step 2: Add code in ‘HTML content’:

Screenshot.png
Screenshot.png1900×688 128 KB

Code:


      

        
![Stride_Logo.png?v=1644889550|512x512](upload://5cSADzhLUGINDoWCAYOKnq0Wz9S.png)

      

      
        
![logo-local_b4822e4b-4a0e-4078-bcb7-403442efd98e.jpg?v=1644889550|248x86](upload://rkaqg1IuHOrsKz7miurC7iNYHhv.jpeg)

      

      
        
![271960081_286982296760456_8539805885311845272_n.jpg?v=1644889550|501x501](upload://neY2qX487St7nWFoLtPQDqPWbV6.jpeg)

Hope it helps!

1 Like
4

Thank you so much!

Is there a way we can reduce the spacing between the headings and the photos?

How can we add more photos here if we need to make it a carousel? Again, thanks!

5

Hi @mommylau ,

I helped you to create a section to import everything, now you just need to create a new section and copy all this code and paste it:


{% schema %}
{
  "name": "List Brands",
  "class": "shopify-section--bordered",
  "settings": [
    {
      "type": "text",
      "id": "subheading",
      "label": "Sub-heading",
      "default": "Sub-heading"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Your HTML"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Upload image"
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "List Brands",
      "name": "List Brands"
    }
  ]
}
{% endschema %}

Hope it helps!