Featured Look

The "Featured Look" section is crafted to spotlight a curated ensemble or arrangement through a single image, accompanied by a detailed list of products making up the look. This feature allows customers to visualize a complete outfit or set and directly find the individual products listed beneath or above the main image. Each product in the image can be marked with numerical hotspots, which correlate to the listed products for easy identification and navigation.

Steps

  1. Open the Theme Editor.
    Navigate to your Shopify dashboard and open the Theme Editor for your store.
  2. Add the Featured Look section.
    Click on 'Add section' and select 'Featured Look' to integrate this section into your page layout.
  3. Save your changes.
    After customizing the Featured Look section, click 'Save' to implement your adjustments.

Settings:

Look Image Picker: Choose the main image to display the featured look.
Color Scheme: Customize the color scheme to align with your brand's aesthetic.

    Desktop Layout:

    Full Width Toggle: Option to stretch the look image across the full width of the page.
    Media Position: Decide whether the media (image) should be displayed first or last, influencing the layout's flow.
    Margin Top and Bottom: Adjust the spacing above and below the look image for a clean, tailored appearance.

      Mobile Layout:

      Margin Top and Bottom: Customize the vertical spacing to ensure optimal viewing on mobile devices.

        Customize Blocks:

        Section Header Block:

        Subheading: Add a subheading.
        Subheading HTML Tag Selector: Choose the appropriate HTML tag for semantic accuracy and styling purposes.
        Heading: The main title for the featured look section.
        Heading HTML Tag Selector: Select the desired HTML tag for the heading to influence both visual hierarchy and SEO structure.
        Text: Add descriptive text using a Rich Text Editor.
        Text Alignment: Align the section text to the left, center, or right based on design preference.
        Size Modifier (Desktop & Mobile): Adjust the text size for different devices for better layout integration.

          Product Block:

          Select Product: Pick products from your list to link with the hotspots in the look image.
          Adjust Hotspots: Fine-tune the vertical and horizontal positions of each hotspot, ensuring precise alignment with the corresponding parts of the image.