Adding images to the margins of pages

greenvalleycbd
Excursionist
37 0 6

Hello there! I need help with a customization for this page: https://greenvalleynutrition.com/pages/cbd-101-cannabinoid-science

I want to add images to the margins of the page, like this: https://cdn.shopify.com/s/files/1/0072/0676/4613/files/Untitled_design_4.png?v=1711637564

Any advice on how to do this?

Replies 6 (6)

BrewBrains
Shopify Partner
100 15 19

Hi @greenvalleycbd ,

 

I have added the image on left, use below code as reference and you can add other in same manner. 

You can add code by following these steps

  1. Go to Online Store -> Theme -> Edit code.
    2. Open your theme.liquid file
  2. Paste the below code before </body> on theme.liquid

 

<style>
.section-template--21903818326338__cf1ec130-207f-4d27-89fd-37a1af93b4e6-padding:after {
    left: 5%;
    top: 5%;
    border-radius: 0;
    position: absolute;
    background: url(https://greenvalleynutrition.com/cdn/shop/files/web_Green_Valley_Nutrition_r3_0133_copy.jpg?v=1691117827&width=1070);
    max-width: 254px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transform: rotate(45deg); 
}
<style>

 

 

Screenshot 2024-03-28 at 9.30.10 PM.png

 

If you need any assistance feel free to get in touch. 

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution.

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Partner


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

greenvalleycbd
Excursionist
37 0 6

Thank you so much! Is the theme.liquid file the best place to put this code? I don't want to bog down loading/response time by adding unnecessary code to the main template file. Also, how does this look on mobile view?

BrewBrains
Shopify Partner
100 15 19

@greenvalleycbd 

If so you can paste the css on base.css at last. Do not add <style> and </style> as in CSS file you do not need to add these tag. 

 

Let me know if you require any support or have any queries. 

 

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution.

 

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Partner


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

greenvalleycbd
Excursionist
37 0 6

Here's what it looks like. It's good, but appears behind text making it difficult to read. Mobile version looks more like a background image. Is there a way to ensure it stays in the margins and not behind page content?

 

Screen Shot 2024-04-01 at 10.46.28 AM.png

BrewBrains
Shopify Partner
100 15 19

Yes we can do that need to write some custom code. Do you have any designs, how you want on mobile?

@greenvalleycbd 

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Partner


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

greenvalleycbd
Excursionist
37 0 6

Hello again. I'd like the images to be positioned the way they are shown in the example image I included in the original post. It needs to look the same in both mobile and web versions. Let me know if you'd like to send a proposal for writing the custom code. Thanks!