Motion Theme: Add Shadow to "Add To Cart" Button on Product Page

Store Design
1

Hello. Trying to put a box shadow on my “add to cart” button on my product pages. I can’t seem to figure out the CSS to do it. Website is: https://www.flipgrip.co/products/flipgrip . Thank you in advance for your help

2

Always backup themes before changing code.

At the bottom of theme.css, or in a custom-liquid block inside a tag try the following CSS:

.add-to-cart {
    box-shadow: 2px 3px 4px 0px black;
}

When that’s in place to tweak the look either find a box-shadow generator online, or in chrome brower right click the button element and choose “inspect” to open dev tools and in the rightside Styles pane scroll to the CSS rule or use the filter to box to search to for “box-shadow” to access a small interactive box-shadow editor directly for the page.

FYI , for a product like that you REALLY want a video of casual usage.

3

Hi @snowman1 .

This is PageFly - Advanced Page Builder.

You can go to Online store => themes => actions => edit code and add this code on file theme.css

#AddToCartForm-template--15943938212064__main-7452274131168{
box-shadow: 1px 2px 3px !important;
}

Hope this helps.

Best Regards;

Pagefly

4

Thank you this worked for our needs!

5

Thank you this worked for individual sections!

6

Hello i also need a help i need to add price in my variant and also upload icon image with the help of liquid coding how can i do that please help

Thank in advance for your help

7

hi,

Im using the dawn theme and dont have theme.css in it, should i be placing this code in theme.liquid?