Add outer glow to main product picture in product page

Store Design
, , ,

Topic summary

A store owner selling neon signs wants to add a color-matching outer glow effect to product images on their product page. When customers select different color swatches (e.g., red), the main product image should display a corresponding colored glow effect.

Proposed Solution:

  • Add custom CSS/JavaScript code to the theme.liquid file (just above the </body> tag)
  • The code snippet provided aims to dynamically apply glow effects based on selected product variants

Additional Suggestion:

  • A third-party app (DTS Signify Customizer) was recommended as an alternative solution for custom neon sign visualization

Status: The original poster thanked the first responder, suggesting the CSS solution may have been helpful, though no explicit confirmation of implementation or success was provided. The discussion includes a Photoshop mockup showing the desired glow effect.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone! I would like to add a outer glow to the main picture of the product in the product page (since i’m selling neon signs).

Here’s the product page: Velador Neon – Flow Neon

The idea is to change the color outer glow when I select a different color from the color swatch.

For example, if I chose red color I would like to show red outer glow.

I’ve attached an image I made in Photoshop of how I would like to see it.

glow.png
glow.png1276×838 149 KB

Thank you!

2

Hi @ody777

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag 
{% if product %}

{% endif %}

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

2 Likes
3

Thank you Makka for your help!

4

Hiiody777,

If you’re looking to offer custom signs and Glow Effect for neon on your Shopify store, DTS Signify Customizer is the perfect solution. Our app allows customers to easily create personalized signs, with a seamless design process and smooth checkout.

Explore how it can enhance your custom sign offerings: DTS Signify Customizer

Best regards,
Deep Patel