Hello, I’m curious about where/what code to use to add shadows bordering sections and photos on my store, thanks!
Topic summary
Goal: add shadowed borders to Shopify sections and images, especially the Image with text section. Store link unavailable; screenshots provided (central to understanding the visual target).
Proposed method: use CSS borders and the box-shadow property (CSS that renders a drop shadow around elements). Examples shared for targeting images and sections, with notes to place rules in a section CSS file.
Code context: the user posted the Image with text section’s Liquid/HTML and asked where to apply box-shadow.
Implementation guidance: create a separate CSS asset (e.g., image-with-text.css) and include it above the section using the theme’s stylesheet_tag. Then:
- Target the section via its class list (e.g., image-with-text …) to add a shadow around the whole block.
- Target images via the img-fluid rounded w-100 {{ section.settings.img_thumbnail }} selector to add shadows/borders per image.
- Optionally target specific inner divs (e.g., animate__animated …) for more granular effects.
Status: practical steps provided; no confirmation from the original poster yet. Open/ongoing.
Can you provide link to your store? Also a screenshot of the section whose border needs to be removed?
you can use css for this for example for images or photos you have to be specific which img you want to add shadows use a main-class then add img same for sections
below is the just the general example but you can use box-shadow : 5px 5px #000 or any other color property also that you want
.main-class img { border: 1px solid; padding: 10px; box-shadow: 5px 10px; } .section-class { border: 1px solid; padding: 10px; box-shadow: 5px 10px; }you can add them in your section css file
detail example
div { width: 300px; height: 100px; padding: 15px; background-color: coral; box-shadow: 10px 10px blue; }The box-shadow Property
This is a div element with a box-shadow
the first image is my store, the 2nd and 3rd image are examples of what I’m trying to accomplish.
I would like to know how to add a shadowed border around the image with text section in the 1st image.
Would also like to know which section to add and how to add a border around each individual image as well as a shadow bordering the whole section to mimic the 3rd image I posted.
Which portion of the code would i add the box shadow css to?
{% if section.settings.image == blank %}
{{ 'image' | placeholder_svg_tag }}
{% else %}
![{{ section.settings.image.alt | escape }}]()
{% endif %}
{% unless section.settings.subtitle == blank %}
{% endunless %}
{% unless section.settings.title == blank %}
{% endunless %}
{% unless section.settings.description == blank %}
{% endunless %}
{% unless section.settings.btn_text == blank %}
{% endunless %}
{{ section.settings.subtitle }}
{{ section.settings.title }}
{{ section.settings.description }}
you can add the separate file above the tag by putting this code
{{ ‘image-with-text.css’ | asset_url | stylesheet_tag }}
then in case of section
you can use class name class=“image-with-text enter-view overflow-hidden {{ bg_color }} {{ section.settings.text_align }} {{ pt }} {{ pb }} {{ mt }} {{ mb }}”
or in case of any div just that div class name
class=“animate__animated animate__faster opacity-0”
for images separately
class="img-fluid rounded w-100 {{ section.settings.img_thumbnail }}