How can I add an image to my newsletter section using custom CSS?

[PapaJ0e]

Hello Shopify Community,

Please I would like to know if there is a way to use Custom CSS to include an Image the Newsletter section on my shopify store.

So, I would like to add an image beside the text in my current newsletter section as shown in the initial screenshot. Is there a way to do this through the custom CSS option? Thanks.

[Made4uo-Ribe]

Hi @PapaJ0e

This will need liquid and html code, you might need to hire someone to do this for you. If we try to add it using CSS, it will not be editable. If you want to go on the custom CSS route, please provide your website and the image you want to add. Thank you

[PapaJ0e]

Hi @Made4uo-Ribe

Thank you for your response!

When you say “it will not be editable” - Do you mean I won’t be able to change the image?

Also, will it be responsive for other devices?

[Made4uo-Ribe]

If you need to edit it, you will have change the code. Being responsive to other devices depends on the added code and theme

[PapaJ0e]

Okay, I think I’m using theme combine.

Here’s my website: https://relovetoys.com/

Here’s the Image:

[Made4uo-Ribe]

Hi @PapaJ0e

Thank you for the information provided. I am able to achieve the desktop as shown in image below using Custom CSS and the image link connected to this community. However, this becomes messy and troublesome when trying to change the screen size. I would suggest to do this nicely, and use the appropriate codes.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.newsletter__container.spacing--xlarge.remove-empty-space:before {
    content: "";
    width: 268px;
    height: auto;
    aspect-ratio: 1;
    position: absolute;
    left: 500px;
    top: 80px;
    display: block;
    background-image: url(https://community.shopify.com/c/image/serverpage/image-id/378653i7A496081DEB0908B/image-size/large?v=v2&px=999);
    background-size: 268px;
    background-repeat: no-repeat;
}

.newsletter__container.spacing--xlarge.remove-empty-space {
    margin-left: 41.2%;
    padding: 3rem 1rem;
    background: #3150a2;
    border-radius: 0px 10px 10px 0px;
}

See result below in desktop:

[PapaJ0e]

Wow, thanks! I’ll try this now! and this is responsive for the other devices too?