Shopify dynamically product select section.

Create a dynamic section in Shopify. you can choose a selective product show on the website. products can be select dynamically get from product inventory. provide smooth slide hover effect on section. when hovering on product show price & add to cart icons appear with sliding effect on the product image. you can use this design on your website to show main & limited product offers on your store website.

make beautify product section hover effect on an item when hover on any product show cart & price show with animation effect. using product CSV File by levinmejia.show dynamically product detail in page.using CSS property show cart & price detail on hover.& use background gradient effect in product name label

use font family in layout which I use the direct link from Google font. all images & content are free resources used in layout design.

• all the design & layout created in 1920 x 1080 screen size.
• all the design & layout is responsive in desktop view.
• all the content, fonts & image are free resources.

You have to add font-awesome cdn in your "theme.liquid" file this

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

if you dont have to product csv file then use this CSV File by levinmejia

Section.liquid File

<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&display=swap" rel="stylesheet"> <div class="demo-section" style="margin-top:200px;"> <div class="container"> <h1 style="text-align:center;font-family: 'Josefin Sans', sans-serif;">Top Sell</h1> <div class="images-section"> {%for block in section.blocks %} {%- assign product1 = all_products[block.settings.single-product] -%} <div class="product-box"> <div class="image-wrapper"> {% if product1.images.size == 0 %} <div class="image-box" style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQx0JA3xCiBP3d3Qt4HZiJnhOJfY8DrR15__C6TnsOt6xN1MSpB1Ve-gTY_71vfjAiOLHp8t5YxRSmg1bo8qebbjR0QVZUJC9aUvAYwcllbCjxldjwgkFSd1L4NYCagAzgt-eQqI_xK5V3/s0/no-image.png');"></div> <div class="price-box"> <h1>Null</h1> <h5>Rs Null</h5> </div> {% else %} <div class="image-box" style="background-image: url('{{ product1.featured_image | product_img_url: "large" }}');"> <div class="add-to-cart"> <span><i class="fa fa-shopping-cart" aria-hidden="true"></i></span> </div> </div> {% endif %} <div class="price-box"> <h1>{{ product1.title }}</h1> <h5>Rs {{ product1.price }}</h5> </div> </div> </div> {%endfor%} </div> </div> </div> <style> body{ margin:0; font-family: 'Josefin Sans', sans-serif; } .heading h1 { text-align: center; padding: 25px 0; font-weight: bold; } .images-section { padding-bottom: 50px; margin: 0 auto; display: table; width: 100%; text-align: center; } .images-section .product-box h1 { padding: 0 10px; font-size: 16px; font-family: 'Josefin Sans', sans-serif; line-height: 30px; color: #fff; position: relative; border-top-right-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background: linear-gradient(to right, rgb(0, 65, 106), rgb(228, 229, 230)); } .images-section .product-box { display: inline-block; width: calc(100%/4 - 30px); cursor:pointer; vertical-align: text-top; text-align: center; padding: 0px 20px 20px 20px; } .price-box { margin-top: -3px; } .price-box h5 { margin: 0; position: relative; transition: 0.5s; z-index: -6; font-weight: bold; font-size: 20px; font-family: 'Josefin Sans', sans-serif; transform: translateY(-80px); } .images-section .product-box:hover .price-box h5 { opacity: 1; z-index: 0; transform: translateY(0px); } .images-section .product-box .add-to-cart { position: absolute; top: 0; width: 100%; display: flex; justify-content: center; align-items: center; height: 100%; } .image-box { position: relative; border-radius: 5px; } .image-box:after { background-color: #000; position: absolute; content: ''; top: 0; width: 100%; height: 100%; border-radius: 5px; left: 0; opacity: 0; transition: opacity 0.5s; } .images-section .product-box:hover .image-box:after { opacity: 0.5; transition: opacity 0.5s; } .images-section .product-box .add-to-cart i { color: #fff; z-index: 999; position: relative; font-size: 30px; z-index: -1; transform: translateY(116px); transition: all 0.5s; } .images-section .product-box:hover .add-to-cart i { transform: translateY(0px); z-index:1; transition: all 0.5s; } .image-box { min-height: 220px; background-size: cover; background-position: top; background-repeat: no-repeat; } @media only screen and (max-width: 767px){ .images-section .product-box { width: calc(100%/2 - 20px); padding: 0px 10px 10px 10px; } .images-section .product-box h1 { font-size: 12px; line-height: 26px; padding: 0 10px; font-family: 'Josefin Sans', sans-serif; } .image-box { background-position: center; min-height: 150px; } .price-box h5 { font-size: 12px; } .images-section .product-box:hover .price-box h5 { transform: translateY(-2px); } } @media only screen and (max-width: 991px){ .images-section .product-box { width: calc(100%/3 - 30px); padding: 0px 15px 15px 15px; } .images-section .product-box h1 { font-size: 14px; line-height: 28px; } .image-box { min-height: 200px; background-position: center; } } </style> {% schema %} { "name": "Product Select", "settings": [ ], "blocks": [ { "type": "quote", "name": "Quote", "settings": [ { "id": "single-product", "type": "product", "label": "Choose Product" } ] } ] } {% endschema %}

Output