How do I add an underlay behind the section in the Lorenza theme?

Store Design
, ,

Topic summary

A user wants to add a sketchbook-style background underlay behind content sections on their Shopify store using the Lorenza theme. They provided screenshots showing their current white background and the desired sketchbook effect.

Initial guidance provided:

  • Upload the background image via Shopify admin → Settings → Files
  • Access theme customization through Online Store → Themes → Customize
  • Look for Background Section settings to add the image

Issue encountered:
The user couldn’t locate the “Sections” or “Background Section” options mentioned in step 5, indicating the Lorenza theme lacks built-in background image functionality for specific sections.

Alternative solution offered:
Since the theme doesn’t support section-specific backgrounds natively, custom CSS code is required:

  • Navigate to Online Store → Themes → Actions → Edit code
  • Open Assets → theme.scss.liquid
  • Add CSS code at the bottom using background-image: url() with the uploaded image URL
  • Adjust properties like background-repeat, background-position, and background-attachment

Important note: This CSS approach applies the background to the entire website, not individual sections. For section-specific backgrounds, custom code must be added to that section’s template file. The discussion references Shopify’s official documentation for further guidance on adding background images to sections.

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

Screenshot 2023-02-16 at 11.01.00 AM.png
Screenshot 2023-02-16 at 11.01.00 AM.png2414×1708 519 KB

the first image is what our website currently looks like with a white background behind the content, we would like to add a sketchbook underlay underneath the website. Any thoughts on how we do this?

Screenshot 2023-02-16 at 11.01.00 AM.jpg
Screenshot 2023-02-16 at 11.01.00 AM.jpg2414×1708 448 KB

what we want it to look like…

2
  1. To add an underlay behind the section in the Lorenza theme, you can follow these steps:
  2. Upload your sketchbook image to your Shopify store. You can do this by going to your Shopify admin dashboard and navigating to the “Files” section under “Settings”. Then, click on “Upload files” and select your image file.
  3. Go to the “Online Store” section of your Shopify admin dashboard and click on “Themes”. Then, click on “Customize” next to the Lorenza theme.
  4. In the theme editor, click on “Sections” and find the section where you want to add the underlay. For example, if you want to add the underlay to the homepage, click on “Homepage”.
  5. Scroll down to the “Background” section and click on “Add image” to upload your sketchbook image.
  6. Once the image is uploaded, you can adjust the settings to control how it appears behind the section. For example, you can adjust the image position, size, and repeat settings.
  7. Save your changes and preview your website to see the underlay behind the section.
  8. Note that the specific steps may vary slightly depending on the version of the Lorenza theme you are using and the exact section where you want to add the underlay
3

Got to #5 of your suggestion, from there we cannot follow. There is no “Sections” or “Background Sections.”

Screenshot 2023-02-16 at 11.45.33 AM.png
Screenshot 2023-02-16 at 11.45.33 AM.png2802×1904 672 KB

4

Pm me Your Store URL

I apologize for the confusion in my previous response. It looks like the Lorenza theme does not have a built-in option to add a background image to specific sections.

However, you can achieve the desired effect by adding custom code to your theme. Here’s how you can add a sketchbook background underlay behind the entire website using custom code:

  1. Go to the “Online Store” section of your Shopify admin dashboard and click on “Themes”. Then, click on “Actions” and select “Edit code” for the Lorenza theme.

  2. In the left sidebar, navigate to the “Assets” folder and click on “theme.scss.liquid” to edit the stylesheet.

  3. Scroll to the bottom of the stylesheet and add the following code:

css
body { background-image: url("your-image-url-here"); background-repeat: repeat; background-position: center center; background-attachment: fixed; }

 

Replace “your-image-url-here” with the URL of your sketchbook background image. You can get the image URL by going to the “Files” section of your Shopify admin dashboard, right-clicking on the image, and selecting “Copy image address”.

  1. Save your changes to the stylesheet.

  2. Preview your website to see the sketchbook background underlay behind the entire website.

Note that this will add the background image to the entire website, not just a specific section. If you want to limit the background image to a specific section, you will need to add custom code to that section’s template file instead of the stylesheet. You can find more information on how to do this in Shopify’s documentation: https://shopify.dev/tutorials/customize-theme-add-background-images-to-sections