Customizing the Shop The Look Section

Customizing the Shop The Look Section

Shop The Look Section Overview

In Shopify stores, "Shop the Look" sections provide a visually compelling way to showcase products and inspire customers by presenting curated outfits or product sets. Tapita's Shop the Look Section allows you to easily create these interactive displays, streamlining the shopping experience and encouraging add-on purchases.

With Tapita's Shop the Look Section, you can:
  1. Create a Stylish Presentation: Showcase multiple items together, allowing customers to see how products work as part of a complete look.
  2. Include Clickable Product Links: Make it easy for customers to explore and purchase individual pieces from the look.
  3. Offer a Responsive and Mobile-Optimized Experience: Ensure the section looks great and functions seamlessly across all devices.
  4. Encourage Add-On Purchases: Display multiple products together, helping to increase average order value.

Shop The Look Section Customization

For instructions on how to add a Shop the Look section to your store, please refer to the Getting Started guide for Tapita Theme Sections Builder.
After adding your desired Shop the Look Section to your store, you can customize its content as follows within the Shopify Theme Editor:

Step 1: Under the Shop the Look section, click "Add Lookbook item."

Step 2: Customize the Lookbook item:
  1. Product: Choose an existing product to feature in the look.
  2. Offset Top: Adjust the vertical position of the product marker/pin on the image (expressed in pixels or percentage).
  3. Offset Left: Adjust the horizontal position of the product marker/pin on the image (expressed in pixels or percentage).
You can configure the shop the look section as follows:
  1. Click on the shop the look section
  2. Configure the section header
    1. Heading: Enter the main heading text for the section (e.g., "Shop Our Look"). This is the primary title that will appear at the top of the shop the look section.
    2. Heading Size: Select a heading size ("Small," "Medium," or "Large").
    3. Sub-Heading: Enter a sub-heading text.
    4. Description: Enter a section description.
    5. Alignment: Choose the text alignment ("Default" or "Center").
    6. Button Label: Add text for the button label (optional).
    7. Button Link: Add a URL for the button (optional).
    8. Blank Link: Enable to open the product in a new tab. Disable to open the product in the same tab.

  1. Configure the section body
    1. Choose An Image of the Lookbook Display: Select an image that showcases the entire "look."
  2. Product Configuration
    1. Image Ratio: Select the desired aspect ratio for the product images.
    2. Show Second Image on Hover: Enable to display a second product image when a customer hovers their mouse over the product marker. Disable to show only the first image.
    3. Slider Autoplay: Enable to have the product slider automatically advance. Disable for manual navigation.
    4. Slider Nav: Enable to display navigation arrows on the sides of the product slider. Disable to hide the arrows.
    5. Slider Dot: Enable to display pagination dots below the product slider. Disable to hide the dots.
  1. Configure the section footer
    1. Button Label: Enter the text for the button label (optional). This will add a button in the section's footer, if desired. Leave blank for no button.
    2. Button Link: Enter a URL for the button (optional).
    3. Blank Link: Enable to open the link in a new tab. Disable to open the link in the same tab.
  1. Configure the section layout
    1. Background image: Choose a background image for the section (if desired).
    2. Section Full Width: Toggle this setting to make the section span the full width of the screen. If disabled, customize the size at "Section max width."
    3. Content Full Width: Toggle this setting to make the content within the section span its full width. If disabled, customize the size at "Content max width."
    4. Padding and Margin: Adjust the padding and margin for the section on mobile, desktop, and tablet screens to control spacing.
  1. Configure the section color
    1. Navigation Color: Enter the hexadecimal color code for the navigation arrows.
    2. Navigation Background Color: Enter the hexadecimal color code for the background of the navigation arrows.
    3. Background: Choose a color for the section background.
    4. Background Gradient: Set a background gradient. This allows you to create a subtle color transition in the background instead of a solid color.
    5. Foreground: Choose a color for the foreground elements.
    6. Title: Choose a color for titles.
    7. Button Background: Choose a color for button backgrounds. This determines the background color of any buttons within the section.
    8. Button Text: Choose a color for button text. This sets the color of the text displayed on the buttons.
    9. Input, button radius: Set border radius for input and button elements.
  1. Configure the section optimize
    1. Lazy Load Speed: The section will only load when it is scrolled to on the page, improving initial page load times.

Now you know how to customize the Tapita's Shop the Look Section to inspire customers, showcase curated outfits, and increase sales by making it easy to purchase entire looks! If you have any questions or need assistance, please don't hesitate to contact Tapita support.