How to add product boxes to a home banner slider

Ask & Offer
, , ,
1

Hi Guys.

I have a theme that has a section that i love but i would like to make something like it for the refresh theme as the theme which has it now is very limited in sections, blocks etc.

The section i would like to creat is a banner with two produt boxes lik the one in the picture

homeslider
homeslider1255×534 112 KB

The code for it is as follows:

<div class="fixed-slider-left">

    <div class="slider-inner-text">

        <h5>{{ section.settings.title }}</h5>

    </div> 

    <div class="line"></div>

    <div class="slides-numbers" style="display: block;">

        <span class="active">01</span> / <span class="total"></span>

    </div> 

</div>

<div class="container"> 

    <div class="home-slider-left-col"> 

        <div class="home-left-slider">

            {% for block in section.blocks %}

                <div class="left-slider-item">

                    <div class="d-flex w-100 align-items-center no-gutters">

                        <div class="col-md-8 col-12"> 

                            <div class="left-slide-itm-inner"> 

                                <div class="section-title">

                                    <span class="subtitle">{{ block.settings.subtitle }}.</span>

                                    <h2>{{ block.settings.title }}</h2>

                                </div>

                                <p>{{ block.settings.desc }}</p>

                                <div class="flex-btn d-flex align-items-center">

                                    <a href="{{ block.settings.btn_url }}" class="btn">

                                        <svg xmlns=" http://www.w3.org/2000/svg " width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">

                                        {{ block.settings.btn }}

                                    </a>

                                    <a href="{{ block.settings.btn_url1 }}" class="btn-secondary">

                                        <svg xmlns=" http://www.w3.org/2000/svg " width="14" height="14" viewBox="0 0 14 14" fill="none">

                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.97487 11.0098C8.98031 11.7822 7.73058 12.2422 6.37332 12.2422C3.12957 12.2422 0.5 9.61492 0.5 6.37402C0.5 3.13313 3.12957 0.505859 6.37332 0.505859C9.61706 0.505859 12.2466 3.13313 12.2466 6.37402C12.2466 7.73009 11.7863 8.97872 11.0131 9.97241L13.285 12.2421C13.5717 12.5285 13.5717 12.993 13.285 13.2794C12.9983 13.5659 12.5334 13.5659 12.2467 13.2794L9.97487 11.0098ZM10.7783 6.37402C10.7783 8.8047 8.80612 10.7751 6.37332 10.7751C3.94051 10.7751 1.96833 8.8047 1.96833 6.37402C1.96833 3.94335 3.94051 1.9729 6.37332 1.9729C8.80612 1.9729 10.7783 3.94335 10.7783 6.37402Z" fill="#494949"/>

                                        </svg>

                                        {{ block.settings.btn1 }}

                                    </a>

                                </div>

                            </div>

                        </div>

                        <div class="col-md-4 col-12"> 

                            <div class="banner-right-contant">

                                {%- assign product = block.settings.product -%} 

                                {% if block.settings.product != blank %}

                                <div class="grid__item card product-card">

                                    {% render 'card-product', card_product: product, pro_img_widthheight: section.settings.pro_img_widthheight, show_secondary_image: section.settings.show_secondary_image,

                                    show_vendor: section.settings.show_vendor,show_wish: section.settings.show_wish, show_variants: section.settings.show_variants %}

                                </div>

                                {% endif %}

                                {%- assign product = block.settings.product1 -%} 

                                {% if block.settings.product1 != blank %}

                                <div class="grid__item card product-card">

                                    {% render 'card-product', card_product: product, pro_img_widthheight: section.settings.pro_img_widthheight, show_secondary_image: section.settings.show_secondary_image,

                                    show_vendor: section.settings.show_vendor,show_wish: section.settings.show_wish, show_variants: section.settings.show_variants %}

                                </div>

                                {% endif %}

                            </div>

                        </div>

                    </div>

                </div> 

            {% endfor %}

        </div>  

    </div>  

</div>

{% schema %}

{

“name”: “t:settings_schema.common-section.slider”,

“settings”: [

{

  "type": "image_picker",

  "id": "bg_img",

  "label": "t:settings_schema.common.settings.bg_img"

},

{

  "type": "text",

  "id": "title",

  "label": "t:settings_schema.common.settings.title"

},

{

  "type": "header",

  "content": "t:settings_schema.common.settings.pro_set"

},

{

  "type": "checkbox",

  "id": "show_secondary_image",

  "default": false,

  "label": "t:settings_schema.common.settings.pro_hvr_img"

},

{

  "type": "checkbox",

  "id": "show_vendor",

  "default": false,

  "label": "t:settings_schema.common.settings.sh_ven"

},

{

  "type": "checkbox",

  "id": "show_wish",

  "default": false,

  "label": "t:settings_schema.common.settings.sh_wish"

},

{

  "type": "checkbox",

  "id": "show_variants",

  "default": true,

  "label": "t:settings_schema.common.settings.sh_var"

},

{

  "type": "text",

  "id": "pro_img_widthheight",

  "default": "600x600",

  "label": "t:settings_schema.common.settings.width_height"

}

],

"blocks": \[

{

  "type": "image",

  "name": "Slider",

  "settings": \[

    {

      "type": "text",

      "id": "subtitle",

      "label": "t:settings_schema.common.settings.subtitle"

    },

    {

      "type": "text",

      "id": "title",

      "label": "t:settings_schema.common.settings.title"

    },        

    {

      "type": "text",

      "id": "desc",

      "label": "t:settings_schema.common.settings.desc"

    },        

    {

      "type": "url",

      "id": "btn_url",

      "label": "t:settings_schema.common.settings.btn_url"

    },        

    {

      "type": "text",

      "id": "btn",

      "label": "t:settings_schema.common.settings.btn"

    },        

    {

      "type": "url",

      "id": "btn_url1",

      "label": "t:settings_schema.common.settings.btn_url"

    },

    {

      "type": "text",

      "id": "btn1",

      "label": "t:settings_schema.common.settings.btn"

    },

    {

      "type": "product",

      "id": "product",

      "label": "t:settings_schema.common.settings.sec_pro"

    },

    {

      "type": "product",

      "id": "product1",

      "label": "t:settings_schema.common.settings.sec_pro"

    }

  \]

}

],

“presets”: [

{

  "name": "t:settings_schema.common-section.slider"

}

]

}

{% endschema %}

I have tried recreating this in the refresh theme with no joy.

Please, any help is much appreciated.

1 Like
2

Sure, I’m available to help to fix it

3

Example: Banner with Two Product Boxes

Here’s a simple custom section you can use as a starting point:

liquid

{% schema %} { "name": "Banner with 2 Products", "settings": [ { "type": "image_picker", "id": "banner_image", "label": "Banner background image" }, { "type": "text", "id": "banner_heading", "label": "Heading", "default": "Featured Products" } ], "blocks": [ { "type": "product", "name": "Product Box", "settings": [ { "type": "product", "id": "product", "label": "Select product" } ] } ], "max_blocks": 2, "presets": [ { "name": "Banner with 2 Products", "category": "Custom" } ] } {% endschema %} <div class="banner-with-products" style="background: url('{{ section.settings.banner_image | img_url: 'master' }}') no-repeat center; background-size: cover; padding:40px; text-align:center;"> <h2>{{ section.settings.banner_heading }}</h2> <div class="product-boxes" style="display:flex; justify-content:center; gap:20px; margin-top:20px;"> {% for block in section.blocks %} {% if block.settings.product != blank %} {% assign product = all_products[block.settings.product] %} <div class="product-box" style="background:white; padding:20px; border-radius:10px; max-width:250px;"> <a href="{{ product.url }}"> <img src="{{ product.featured_image | img_url: '400x' }}" alt="{{ product.title }}" style="width:100%; border-radius:8px;"> <h3 style="margin-top:10px;">{{ product.title }}</h3> <p>{{ product.price | money }}</p> </a> </div> {% endif %} {% endfor %} </div> </div>

4

Thank you for the reply #leotech.

this is great, couple of things though. How do i add the CTA on the left side, also how do i stack the product boxes as a column rather than a row and have the product image to the side not on top.

Thanks for the help.

5

This is how it looks at the minute.

banner with two products
banner with two products1255×575 130 KB

6

This is where i am up to now:

{% schema %} { “name”: “Banner with 2 Products”, “settings”: [ { “type”: “image_picker”, “id”: “banner_image”, “label”: “Banner background image” }, { “type”: “text”, “id”: “banner_heading”, “label”: “Heading”, “default”: “Featured Products” } ], “blocks”: [ { “type”: “product”, “name”: “Product Box”, “settings”: [ { “type”: “product”, “id”: “product”, “label”: “Select product” } ] } ], “max_blocks”: 2, “presets”: [ { “name”: “Banner with 2 Products”, “category”: “Custom” } ] } {% endschema %}

{{ section.settings.banner_heading }}

{% for block in section.blocks %} {% if block.settings.product != blank %} {% assign product = all_products[block.settings.product] %} {% endif %} {% endfor %}

7

just a little fix. Are you with me

8

yes. this is the code you gave me but i have edited it to stack the boxxes. now i need to make the product boxes so that the image is on the left and add the CTA on the left

9

Use this to chat it to the left side

HTML

‘‘‘html

Washing Machine

<span class="store-name">Samsung</span>

<h3>Samsung Washing Machine</h3>

<p class="price">£349.00 GBP <span class="old-price">£590.00 GBP</span></p>

<button class="add-to-cart">🛒 Add To Cart</button>

`

CSS Example:

```css

.product-box {

display: flex;

background: #fff;

padding: 20px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

border-radius: 10px;

margin-bottom: 20px;

align-items: center;

}

.product-image {

width: 120px;

margin-right: 20px;

border-radius: 8px;

}

.product-details {

flex: 1;

}

.store-name {

color: teal;

font-weight: bold;

font-size: 14px;

}

h3 {

margin: 5px 0;

}

.price {

font-size: 16px;

color: black;

}

.old-price {

text-decoration: line-through;

color: gray;

margin-left: 10px;

}

.add-to-cart {

background-color: #00ffcc;

color: black;

border: none;

padding: 10px 15px;

font-weight: bold;

border-radius: 5px;

cursor: pointer;