Add a background image to a shop’s account portal

Introduction:

A number of shops as of late have been requesting the ability to customize the look of their portal beyond what’s currently offered within the theming page. And a frequent request has been adding a custom image to their portal’s background as to align with a shop’s branding. While currently (12/6/23) not a feature, using our CSS overrides, you can still achieve this result as first seen on Lemme’s site:

Prerequisites:

All media has been added to the shop’s Files section within Shopify Admin

Steps:

1. Within Shopify Admin, navigate to Files section and copy the image path for your image by clicking on the 🔗 (We’re gonna need this for later)
2. Navigate to Smartrr and open the theming page.
3. Navigate to the CSS overrides section and paste in the following CSS code:

/* Background*/ &:not(.smartrr-portal-modal-wrapper) { background: url("<IMG_PATH_URL>") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Replace <IMG_PATH_URL> with the copied url

📚 Quick ‘lil breakdown of what’s happening here:

• Since we use CSS-in-JS (styled-components / emotion / SASS / Less, etc…), we are able to utilize the & operator which means we’re referring to all instances of the component / parent selector, in this case our parent selectors are:

#smartrr_wrapper, #smartrr_header, #smartrr_inner, .smartrr-portal-modal-wrapper

• Using :not() and selecting .smartrr-portal-modal-wrapper as to prevent the image from being applied to the modal background. Here’s a preview of what that looks like:

See? No bueno.

• All the remaining styles, no-repeat center center and cover ensure the image is taking up the entirety of the screen relative to it’s size, doesn’t repeat and is centered vertically and horizontally. And including:

-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;

Ensures these styles apply across browsers

Now, lets take what we learned and apply an image to the portal’s header:

.smartrr-portal-header { background: url("<IMG_PATH_URL>") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Replace <IMG_PATH_URL> with the copied url

Same styles just scoped to the header instead. Hit Save and that’s it! Here’s what our hard work could look like:

How pretty 💅🏽

 ⚠️ If you’re using the & selector, after hitting save you may notice that the & becomes &. Do not worry, just leave this style as it. & is the HTML / unicode? reference code for &. The styles should function normally.