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

PapaJ0e
Shopify Partner
6 0 1

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.Screenshot 2023-10-27 172455.pngScreenshot 2023-10-27 172634.pngSo, 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.

Replies 6 (6)

Made4uo-Ribe
Shopify Partner
5576 1340 1655

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


PapaJ0e
Shopify Partner
6 0 1

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
Shopify Partner
5576 1340 1655

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


PapaJ0e
Shopify Partner
6 0 1

Okay, I think I'm using theme combine.

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

Here's the Image:Rectangle 4 (1).png

Made4uo-Ribe
Shopify Partner
5576 1340 1655

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:

Made4uoRibe_0-1698432963324.png

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


PapaJ0e
Shopify Partner
6 0 1

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