Shop the look

This unique section allows you to showcase the curated lookbook offers. Customers then have the ability to see the exact products that were used in the lookbook.

⬇️ On this page:


Add the shop the look section


Steps to add Shop the look section:

  1. In your Shopify admin dashboard, go to Online Store > Themes.
  2. Choose the theme you want to edit and click on the Customize button.
  3. Click on the arrow down next to Home page↓and select a template you want your Shop the look section to add to. 
  4. Click on + Add section which can be found in your left sidebar or directly in the live editor. 
  5. Scroll down, or search for Testimonials, then click on TAAA
  6. Click and hold the drag-and-drop handles ⋮⋮  to re-order your sections.

Congrats! 👏 You just added your Shop the look section.


Customize the section

After you've successfully added the Shop the look section following the steps above you can customize the section by adjusting your Section controls. If you don't see the customization options, click on your Shop the look section.

Shop the look

  1. Image - Add an image to the section by clicking Select image or Explore free images if you want to choose an image from Shopify's library. Optionally, upload a Mobile image if you wish for a different image to appear on mobile screens. Recommended dimensions are 768x1024 pixels. Alternately, connect to a dynamic source.
  2. Desktop image height - Here are the options for the image height:
    1. Original
    2. Small - Desktop: 420 px, mobile: 280 px
    3. Medium (default) - Desktop: 560 px, mobile: 340 px
    4. Large - Desktop: 720 px, mobile: 390 px
  3. Image focal point - You can set a focal point to ensure that a key part of an image won't get cropped. Choose Top, Middle, or Bottom Image focal point.

Content

  1. Subheading - Subheading of the section.
  2. Subheading size - Choose between small or meduim.
  3. Heading - The title of the section. Connect to a dynamic source.
  4. Heading size - Choose the heading size. Available options are small, medium, large, or extra large.
  5. Show product count - If checked, the number of products added in the next step will be displayed.
  6. Description - The description for the section.
  7. Button label - The text of a button added below the column block. Leave blank if you don't have a button added.
  8. Button link - The URL that you want the button to link to. Click the source button to add a dynamic source as a URL.
  9. Button style - Choose a style for your button.

Content controls

  1. Content position - Choose where, relative to the image, you want to display your content block. Available options include Top left, Middle Right, Bottom Left, etc.
  2. Test alignment - Set the alignment of the image banner text for desktop computers. Choose between right, left, or center.
  3. Color scheme - It controls the background color of your content block, the text color, etc. Click Change to pick a different color scheme. Remember that you can Edit the existing scheme or add a new one in Theme settings.
  4. Enable Gradient - If marked, this will bring the text to the bottom and add a gradient to the image.

Popup active controls

  1. Inner image - You have the option to add an image to the inner section. Once you reveal the inner section with products, this will be the first image to show among all the products that you add following these steps. Add an image to the section by clicking Select image or Explore free images if you want to choose an image from Shopify's library. Optionally, upload a Mobile image if you wish for a different image to appear on mobile screens. Recommended dimensions are 768x1024 pixels. Alternately, connect to a dynamic source.
  2. Color scheme - The color scheme for the inner section of the popup. Click Change to pick a different color scheme. Remember that you can Edit the existing scheme or add a new one in Theme settings.

Card content layout

  1. Layout -  There are two options:
    • Product info floating - Product information will be displayed directly on the product image.
    • Product info stacked - Product information will be displayed under the product image.

Section padding

  1. (Optional) You can change both top and bottom section padding (the empty space above and below the section) and set it anywhere from 0px to 100px.
  2. Read more about Custom CSS.

Add products


Once you have added the section, you can now configure the products that you want to display within your inner section.

Steps to add products:


  1. Find the Shop the look section you added and customized following the steps above.
  2. Click + Add Product underneath.
  3. Once you add a product, click on it. Then, click Select product, choose a product and click Select.
  4. (Optional) Click and hold the drag-and-drop handles ⋮⋮    to re-order your products.

Still need help? Contact Us Contact Us