Add CSS that is specific to a product template

Store Design
1

Hey there,

Hope you can help me with this. I’m trying to add custom CSS to a specific product. I have different product templates so I’m able to do so by doing the following:

#shopify-section-template–14841722667098__164686846760990228 {
margin-bottom: -260px;
}

This targets a specific section in a specific template, and it is exactly what I need. However, I found that whenever I duplicate the theme to work on a test environment, these numbers are shuffled and the CSS no longer works.

How can I still target specific sections in specific templates without having these issues?

2

You can try targeting the class instead.

3

Yeah that wouldn’t work because the section is in all product pages and targetting the class would not do it

4

What’s the link to your website?

5

thomasashborne.com

On the product pages there is a video positioned with Translate: transform but each video needs to be at a different height

6

There might be an easier way to solve this than using the margin-bottom: -260px;. How many video heights do you have?

7

Hey,

The issue is not the video height, but the height of the content on top of it. For instance, one product will have a paragraph of text on top of it but another one will have 3 paragraphs, so they need to be higher or lower

8

Ok. So what is it that you are trying to adjust? Just want to make sure I understand exactly what it is that you need.

9

Basically I want the videos on each product page to have a different value of the transform, translate highlighted here

Screenshot_1.jpg
Screenshot_1.jpg1872×930 267 KB

10

Any reason as to why you’re using transform: translate? You could simply have the video container come directly after the text in your liquid file, then use a margin: bottom on the text to clean everything up.

I’m assuming some of the videos are overlapping over the text, and you’re trying to prevent that, correct?