Adding a custom image to a specific section in Symmetry theme

Store Design
1

I’m using the symmetry theme and I would like to add a background image to a specific section. There is no a way to do it within the theme customization. I know there is a way to pinpoint the section in the code and add the image I want, I just don’t know how to do it. Any help with this would be greatly appreciated. Or if there is a code that I could put in to have that option available in the theme customization. My store is www.shopsarag.com and it is the best seller section on the home page.

#shopify-section-template–16252096708854__featured-collection-grid

@KetanKumar you helped me a few years ago with a different project and insight to this would be appreciated

1 Like
2

@ShopSaraG

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme–critical.css ->paste below code at the bottom of the file.
#shopify-section-template--16252096708854__featured-collection-grid {
background: url(https://cdn.shopify.com/s/files/1/0648/9751/5766/files/sara_slider_merged_1_2000x.png);;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#shopify-section-template--16252096708854__featured-collection-grid [data-background-color=light] {
    background: transparent;
}

change image as you like

1 Like
3

@KetanKumar once again you are a lifesaver. Is there a way to have it repeat horizontal and verticle? Or is it possible to change the schema so I can place different images in the theme editor without having to edit the code each time?

1 Like
4

@ShopSaraG

yes, you can do this Desktop and Mobile Images

1 Like
5

Will this code placed in the same area also work for the newsletter section.

#shopify-section-template–16252096708854__newsletter

1 Like
6

@ShopSaraG

yes, please try this code

#shopify-section-template--16252096708854__newsletter {
background: url(https://cdn.shopify.com/s/files/1/0648/9751/5766/files/sara_slider_merged_1_2000x.png);;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#shopify-section-template--16252096708854__newsletter [data-background-color=none] {
    background: transparent;
}
7

Hello KetanKumar,

I would like to add an image background to my Online Lessons page as well. May I please get assistance with this? I would like the background image to be behind the pricing table shown in the link below.

https://porzakgolf.myshopify.com/pages/online-lessons

I do not know where I can edit this part in the codes.

8

How to image background in the footer section for symetry theme. Do you have any code for this?