Simple border around product information box (DEBUT THEME)

Store Design
1

Hello everyone,

I am currently wondering if there is a way to “stop” a html coded border at a specific part of the website via code? I want a border around the title, price, … down to the ATC button.

The product page seems to be one huge html code box in the default debut theme, called “product-single__meta”. Is there a way to tell the border that it need to close / stop after the ATC button without more comlex coding?

Current code in theme.css.liquid:

.product-single__meta
{
   border: 5px solid #4D2A17;
   padding: 20px;
}

On the first image you can see what I want to achieve. On the second one you can see how it does look at the moment. I want that the border ends where I drawed the red line. Is that possible in the normal debut theme code or do I need to “create” a custom html product information box and if so, how?

example.JPG
example.JPG503×601 24.5 KB

problem.JPG
problem.JPG492×540 21.7 KB

2

Can you share your website url?

3

@maxson

Please add the following code at the bottom of your assets/theme.scss.liquid Or assets/theme.css file.

.product-template__container .product-single__meta{ border: 1px solid #4D2A17; padding: 20px;}
.product-template__container .product-single__description { border: 1px solid #4D2A17; padding: 20px;}
.product-template__container .social-sharing { border: 1px solid #4D2A17; padding: 20px;}

Hope this works.

Thanks!

1 Like
4

Unfortunately no. Well it works like a charm but not in the way I need it :grinning_face_with_smiling_eyes:

There is a border now on every section except the one I am wanting to add a seperate border lol

I found a way to achieve it by “hard-coding” it directly in the product-template.liquid

5

Sorry I was wrong! It worked, I just needed to undo the changes I did before.

Thanks!

6

If helpful then please Like

7

Maybe you’re able to help me with another (new) problem. I wanted to create variant swatches for the colors. The code is working and everything is as I need it, only when I take the code of the variant swatches and put it in a new div class container the rest of my code is broken. I think (I don’t know why) the code can’t close the last of the class “product-single__meta” at the very end of the code.


      

        # {{ product.title }}
	

        
          

            {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
          

          {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
            
              {%- if shop.taxes_included -%}
                {{ 'products.product.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            

          {%- endif -%}
          {% capture "form_classes" -%}
            product-form product-form-{{ section.id }}
            {%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form--payment-button-no-variants {%- endif -%}
            {%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
          {%- endcapture %}

          {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
            {% unless product.has_only_default_variant %}
              
                {% for option in product.options_with_values %}
                  

                    
         
                    
 
                    
                    {%if option.name == "Farbe"%}
                    
                    
                    {%assign index = forloop.index %}
                    
                    {%for value in option.values%}
                    
                    
                    
                    
                    {%endfor%}
                    
 
                    {%else%}
                    
                    
                    
                    
                    {%endif%}
                  

                {% endfor %}
              

            {% endunless %}

            

            

{% if section.settings.show_quantity_selector %}
              
                

                  
                  
                

              

            {% endif %}

            
              {{ 'general.accessibility.error' | t }} 
              {% include 'icon-error' %}
              {{ 'products.product.quantity_minimum_message' | t }}
            

            
              

                
                
                {% if section.settings.enable_payment_button %}
                  {{ form | payment_button }}
                {% endif %}
              

            

                
          {% endform %}