Appearance

Lookbook with image ​

This guide describes setting up your store's Lookbook with image section. Use the section to display a selection of related products, with images and text, on your store's pages.

In the following video, a lookbook with image section is displayed on a store's lookbook page. The section contains text (left), and a main image (right), with images and details for three associated products (lower left). To distribute the widths of the text and the main image evenly, inside the section, the Image size option is adjusted from One third to One half.

For general guidance with modifying sections, refer to Sections overview.

Set up a lookbook with image section ​

To set up a lookbook with image section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a lookbook with image section. For example, select Label's dedicated template Pages > Lookbook.

    Note

    The lookbook with image section can be added into any page, except Checkout and Giftcard pages. To add a lookbook with image section into the current page, select Add section > Lookbook with image. Refer to Shopify help: Add a section.

  2. From the side menu, select Lookbook with image.

    The Lookbook with image section selected in the Theme editor side menu.

  3. Select a section setting described in the following table.

Section setting nameDescription
HeadingUse the Heading box to enter text to display as a title inside the section.
ImageUse the Image menu options to set up an image inside the section.
  • To add an image, choose Select Image, and then upload an image or select an image file from your store's file library.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
Image sizeSelect the dropdown Image size to set a width for the image inside the section. The options are Full width, Content width, One half, One third, and Two thirds.
Image position on desktopSelect the dropdown Image position on desktop to position the section image to the Left or Right. This setting does not apply if the Image size option is set to Full width or Content width.
Caption headingUse the Caption heading box to enter text to display as a title for the caption text, inside the section.
CaptionUse the Caption box to enter text to display inside the section. The caption text corresponds to the section image. Format the text using the text editor pane.
Text alignmentSelect the dropdown Text alignment to align the caption text to the Left, Center or Right, inside the section.
Color > Color schemeUse the Color scheme dropdown to set the color scheme for the section to Primary, Secondary or Tertiary. Refer to Colors.
Theme settingsSelect Theme Settings to access additional settings for the section. Refer to Section theme settings menu.
Remove sectionSelect Remove section to delete the section from the current page template.

Configure a product in a lookbook with image section ​

A default lookbook with image section contains two products (blocks). To configure a product block inside a lookbook with image section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a lookbook with image section. For example, select the template Pages > Lookbook.

  2. From the side menu, expand the Lookbook with image section menu.

  3. To configure an existing product block, select the Product block from the side menu.

    To add a new product block, select Add product, and then select the Product block you added.

    The add Product block menu in Theme editor.

    Note

    Inside a lookbook with image section, you can add, remove, show/ hide, or move blocks. Refer to Configure blocks inside a section, or Shopify help: Sections and blocks.

  4. Apply a block setting described in the following table.

Block setting nameDescription
ProductUse the following Product menu options to set up a product inside the block.
  • To add a product, choose Select product, and then select a product from your store. Then, choose Select.
  • To create a product, follow the Create product link to create and add a new product. Select the newly added product, and then choose Select.
  • To replace a product, choose Change > Change product, and then select or create a product.
  • To remove a product, select Change > Remove product.
Remove blockSelect Remove block to delete the block from the current section.

The Product block menu settings in Theme editor.