CSS Selector Guide

This guide will help you identify and use CSS selectors to customize various elements of the Shop the Look widget. You'll learn how to use Chrome Developer Tools to inspect elements and apply custom styling.

Using Chrome Developer Tools

To inspect and find CSS selectors for Shop the Look elements:

1. Open Chrome Developer Tools

   • Right-click on any Shop the Look element on your page
   • Select "Inspect" or "Inspect Element"
   • The Developer Tools will open, highlighting the selected element

2. Find the CSS Selector

   • In the Elements panel, you'll see the HTML structure
   • Look for classes that start with .stl__embeded
   • Copy the selector by right-clicking on the element and selecting "Copy > Copy selector"

Common CSS Selectors

Below are the most commonly used CSS selectors for customizing Shop the Look elements:

Widget Title

.stl__embeded .ctl-title

Use this selector to style the main title of the Shop the Look widget.

Example customization:

.stl__embeded .ctl-title {
  font-size: 24px;
  color: #333;
  font-weight: bold;
  text-align: center;
}

Product Titles

.stl__embeded .ctl-product-title a

This selector targets the product titles within the widget.

Example customization:

.stl__embeded .ctl-product-title a {
  color: #0066cc;
  text-decoration: none;
  font-size: 16px;
}
.stl__embeded .ctl-product-title a:hover {
  text-decoration: underline;
}

Product Prices

.stl__embeded .ctl-product-price span

Use this to style the price display for products.

Example customization:

.stl__embeded .ctl-product-price span {
  font-size: 18px;
  font-weight: bold;
  color: #ff6600;
}

Add to Cart Button

.stl__embeded .shopthelook_add-to-cart

This selector targets the Add to Cart buttons.

Example customization:

.stl__embeded .shopthelook_add-to-cart {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.stl__embeded .shopthelook_add-to-cart:hover {
  background-color: #218838;
}

Variant Picker

.stl__embeded .shopthelook_variants

This selector is for the variant selection dropdown or buttons.

Example customization:

.stl__embeded .shopthelook_variants {
  border: 1px solid #ddd;
  padding: 5px;
  border-radius: 3px;
  background-color: #f8f9fa;
}

Product Images

.stl__embeded .cell-asset-image

Use this to style product images within the widget.

Example customization:

.stl__embeded .cell-asset-image {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.stl__embeded .cell-asset-image:hover {
  transform: scale(1.05);
}

Best Practices

1. Specificity: Always use the .stl__embeded prefix to ensure your styles only affect Shop the Look elements
2. Testing: Test your CSS changes across different screen sizes and devices
3. Performance: Avoid overly complex selectors that might slow down page rendering
4. Backup: Keep a copy of your original CSS before making changes

How to Apply Custom CSS

Once you've identified the selectors you want to customize:

1. Navigate to Layouts & Design → Customize CSS in your Shop the Look dashboard
2. Add your custom CSS rules using the selectors from this guide
3. Click Save to apply your changes
4. Preview your store to see the customizations in action

Tips for Advanced Customization

Responsive Design

/* Mobile styles */
@media (max-width: 768px) {
  .stl__embeded .ctl-title {
    font-size: 18px;
  }
  .stl__embeded .shopthelook_add-to-cart {
    width: 100%;
  }
}

Hover Effects

/* Add hover effects to product containers */
.stl__embeded .ctl-product:hover {
  background-color: #f5f5f5;
  transition: background-color 0.3s ease;
}

Custom Animations

/* Fade-in animation for products */
.stl__embeded .ctl-product {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Important Notes

• Changes made using these selectors will apply to all Shop the Look widgets on your site
• Some themes may have conflicting styles that override these selectors
• Always test your customizations in a development environment first
• If a selector doesn't work, use Chrome Developer Tools to check for more specific selectors or conflicting styles