How to implement a shiny effect for foil trading cards on a website?

Store Design
1

Hello,

I am attempting to implement a way for certain products to have a shiny effect - we are a TCG (Trading Card Game) based website, and wanted to give our customers an easier way to see which cards are shiny (foil cards) and we came up with the idea of adding an effect over certain cards.

We thought perhaps if certain products containing a specific tag, for instance the tag would be ‘foil’ then every card with that tag would have the effect applied to it. An example of this I have linked below. My only problem is actually implementing something like this onto our store. If anybody has an understanding of this, and would reach out to me, we would love some assistance with this!

Example: https://codepen.io/frontendor/pen/QWbrKbx

2

Have you attempted to add the code from your example to your store yet?

This is a bit more involved then just a simple code add, if I were you I would make a second template for products that you want to have this effect (cards) so that the other products in your store are not given this effect.

Once you do that, duplicate the product template and add the code with the main product image as the selector.

3

If it’s doable with only CSS use an alternate template and a custom css setting.

If javascript is required use either custom-liquid block/section using product tags for logic, or an alternate templates assign to the special products so you don’t have to build tag logic.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/templates#create-a-new-template

If using a custom-liquid block

Check the products tags.

{%- liquid
 assign product_tag = "shiny"

 assign product_tags = product.tags | join:"," | downcase

 assign shiny = false
 if product_tags contain "shiny"
  assign shiny = true
 endif
-%}

{%- if shiny -%}
 <-- shiny css & javascript code -->
{%- endif -%}

If you need this customization setup then contact me directly by mail for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.