Chèn khung hình background sản phẩm theme Flastsome

Khi làm trang bán hàng cần làm cho sản phẩm đẹp ta thường chỉnh sửa hình sản phẩm úp lên , tuy nhiên trong một số trường hợp trang Sản phẩm có rồi mà ko được như ý, nên ta cần css frame background sản phẩm cho lung linh lại, bài hôm nay mình chỉ cách bạn làm nhé

Chèn khung hình background sản phẩm theme Flastsome

Chuẩn bị file hình frame để chèn vào background cho sản phẩm

Có nhiều trang share hình nà, lựa chọn và tải về úp lên host mình cái ứng ý nhé

Xác định vị trí muốn chèn hình này (có thể chèn giống nhau hoặc khác nhau cho mỗi vị trí ở trang chủ)

Ví dụ : Mình chèn vào sản phẩm nổi bật 

= > Tạo sản phẩm nổi bật = > đặt class “noibat” như hình

Chèn css vào khung theo mã sau:

/* Khung cho sản phẩm nổi bật */
.noibat .box-image:before {
content: '';
z-index: 3;
width: 100%;
height: 100%;
background: url(https://magiamgiahosting.com.vn/wp-content/uploads/2024/09/khung1.png) no-repeat;
background-size: contain;
position: absolute;
margin-left: -50%;
}
/* Khung cho sản phẩm - shop - bài liên quan */
.has-equal-box-heights .box-image:before {
content: '';
z-index: 3;
width: 100%;
height: 100%;
background: url(https://magiamgiahosting.com.vn/wp-content/uploads/2024/09/khung2.png) no-repeat;
background-size: contain;
position: absolute;
margin-top: -100%;
}
/* Khung cho siler sản phẩm */
.product-gallery-slider:before {
content: '';
z-index: 3;
width: 100%;
height: 100%;
background: url(https://magiamgiahosting.com.vn/wp-content/uploads/2024/09/khung3.png) no-repeat;
background-size: contain;
position: absolute;
}

• Có 3 chỗ background khung sản phẩm ( như vị trí note )
• Nhớ thay đổi link hình của bạn nhé 

OK xong rồi bạn thử xem qua demo nhé

Chúc bạn thành công nhé