Lookbook Pages and Instagram Feeds for a Shopify Fashion Store

What is a shoppable lookbook on Shopify?

A shoppable lookbook is a page of styled editorial images where each image links to, or tags, the products worn in it. For a goth or alternative fashion brand it sells the whole outfit and mood rather than a single garment, which suits shoppers who buy by aesthetic.

Shopify does not ship a lookbook section in every theme. Some premium themes include one; otherwise you add a custom section or an app. The custom route keeps the page lighter and lets you match the brand exactly.

How do I build a lookbook section without an app?

Create a custom section with an image setting and repeatable blocks, where each block holds a product picker and a position for a hotspot. The shopper taps a dot on the image and sees the product name, price and link.

{% schema %}
{
  "name": "Lookbook",
  "blocks": [
    {
      "type": "look",
      "name": "Look",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Image" },
        { "type": "product", "id": "product", "label": "Product" },
        { "type": "range", "id": "x", "min": 0, "max": 100, "step": 1, "unit": "%", "label": "Hotspot X", "default": 50 },
        { "type": "range", "id": "y", "min": 0, "max": 100, "step": 1, "unit": "%", "label": "Hotspot Y", "default": 50 }
      ]
    }
  ],
  "presets": [{ "name": "Lookbook" }]
}
{% endschema %}

Each block renders its image, then a button placed with left and top set to the x and y values. Clicking the button reveals a small card built from block.settings.product.

How do I make a lookbook accessible and fast?

Make the hotspot a real button with an accessible label, and give every image proper alt text and loading="lazy" below the fold. Serve responsive sizes with the image_url filter so phones do not download desktop-sized photos.

Dark editorial photography compresses poorly, so image weight adds up fast. Set explicit width and height on each image to avoid layout shift, and cap the number of images per lookbook page. Layout and photography guidance for dark stores is in black gothic store design that still converts.

How should I add an Instagram feed to a Shopify store?

The lightest way to add an Instagram feed is to build a grid from images you upload in the theme editor, each linking to the matching Instagram post. It avoids third-party scripts, which are the main cause of slow feeds.

Live Instagram feed apps load external scripts and images from another domain, which adds requests and can delay page rendering. A manual grid updated a few times a month delivers most of the social-proof value at almost no speed cost.

Do Instagram embeds slow down a Shopify store?

Yes, they can. Instagram embeds and feed apps load extra JavaScript and third-party images, which increases page weight and can hurt loading metrics such as Largest Contentful Paint. The effect depends on the method used and how many posts are shown.

If you use an app, load the feed below the fold, limit it to six to eight posts and test the page before and after with a speed tool. Never place the feed above the main product content on a product page.

Where should the lookbook and feed sit in the store?

Put the lookbook on its own page linked from the main navigation and from the homepage, and put a small feed near the footer. Each lookbook should link into collections so shoppers who like an outfit can browse similar items.

Both features support the brand rather than replace the catalogue, so keep the path back to product pages short. If you want a lookbook built to your brand, email me or read about my Shopify custom builds. For choosing a base theme first, see what to look for in a dark fashion theme.