How to edit element style - Printful estimated delivery time (EDT)

[VrVa]

This is a little bit OCD overkill, but maybe someone can help.

I have integrated Printful app into my store and enabled for EDT to be displayed right under the "Buy it now" button on product page.

However the EDT is center-aligned and has 8px left padding, which is driving me crazy, since everything else on the product page has no left padding and is left-aligned.

I was able to edit the element trough the "inspect" tool when browsing the store but I can't figure out how to edit the code itself.

In the file theme.liquid I have found Printful's code for EDT from which it seems it could be done yet I am failing at it.

<!-- PF EDT START -->
<script type='text/javascript'>
{%- if content_for_header contains 'shopify-product-customizer' -%}
{%- if product -%}
{%- if product.first_available_variant -%}
var pfProductId = {{ product.metafields.printful.is_synced | json }};
var pfEdt = {{ shop.metafields.printful.is_edt_enabled | json }};
var pfEdtTextColor = {{ shop.metafields.printful.edt_text_color | json }};
var pfEdtBackgroundColor = {{ shop.metafields.printful.edt_background_color | json }};
var pfEdtBorderColor = {{ shop.metafields.printful.edt_border_color | json }}; 
var pfEdtUseDefaultStyling = {{ shop.metafields.printful.edt_default_style | json }};
var pfEdtTextAlignment = {{ shop.metafields.printful.edt_text_alignment | json }};
var pfEdtFlags = {
US: "{{ 'US.svg' | asset_url }}",CA: "{{ 'CA.svg' | asset_url }}",ES: "{{ 'ES.svg' | asset_url }}",LV: "{{ 'LV.svg' | asset_url }}",GB: "{{ 'GB.svg' | asset_url }}",DE: "{{ 'DE.svg' | asset_url }}",FR: "{{ 'FR.svg' | asset_url }}",AU: "{{ 'AU.svg' | asset_url }}",JP: "{{ 'JP.svg' | asset_url }}",NZ: "{{ 'NZ.svg' | asset_url }}",IT: "{{ 'IT.svg' | asset_url }}",BR: "{{ 'BR.svg' | asset_url }}",KR: "{{ 'KR.svg' | asset_url }}",NL: "{{ 'NL.svg' | asset_url }}",GB: "{{ 'GB.svg' | asset_url }}",
};
{%- else -%}
var pfEdt = 0;
{%- endif -%}
{%- endif -%}
{%- endif -%}
</script>
<!-- PF EDT END -->

Can someone help?

[StratosShop]

How were you able to make it work? I've been looking all over the setting and everything is as the guide shows but I am not able to display the EDT on my store. 

[VrVa]

For me it only took to go trough the Printful's guide and check the box "Show EDT to your customers on your storefront" in Settings → Shipping. 

If that doesn't work, maybe your theme has some unusual code. I'm sure, that if you reach out to the Shopify support, the will be able to help,.I have great experience with them, not so much with Printful support haha.

[sachinshah1999]

Did you find out?

[VrVa]

Unfortunately no. I tried bunch of things but after a while decided it has not enough importance to spend more time on it.

[Spac-es]

¡Hola buenas!

Esto es una posible solución, aunque si que es cierto que este código específico que hace referencia a los 8px de relleno izquierdo que mencionas no he podido encontrarlo dentro del código de la tienda...

<div class="edt" style="width: 100%; alineación de texto: centro; margin-top: 8px;" >

Sin embargo, Printful te permite cambiar el centrado y el estilo del Tiempo de Entrega Estimado (EDT) desde su propia web. Te adjunto imágenes para que puedas comprobarlo.

Esto es muy útil si quieres cambiar el estilo y personalizarlo un poco más a tu gusto.

Como te comentaba no entiendo porque esos 8px se añaden al relleno izquierdo cuando la alineación del texto lo eliges en centrado. Editado/Añadido: "Creo que ese relleno de 8px es inexistente; los 8px se refiere al margen superior. Cuando te fijas en el centrado del EDT, está centrado tal y como dice Printful. Creo que el problema es más bien visual.
Los botones de compra están alineados a la izquierda y tienen otras dimensiones, por lo que al centrar el EDT, éste no se centra según las dimensiones de los botones de compra sino que se centra según los márgenes que tiene la información del producto, es decir, el espacio donde están ubicados todos estos elementos. Adjuntaré una imagen."

He tenido este mismo problema y es lo máximo que he podido hacer. ¡Espero que te sirva de ayuda!

 

---------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------

EDITED

 

  

[Spac-es]

Para solucionar lo que le he comentado hay que aumentar el tamaño del botón: "Agregar al Carrito" para que de esta forma coincida con el ancho de la página.

Para ello debe agregar el siguiente código en theme.liquid

.product-form .product-form__buttons { max-width: 100%; width: 100%; }

 

Si utiliza una alineación de centrado en el EDT, ¡esto se verá justo como quería!

[Adam_25]

When using the inspect tool, you will notice the div element for the Estimated Delivery text is assigned a 'class' name of 'edt'.

In your section-main-product.css file, you can target that edt class name like such:

.edt {
  padding: 0 0 0 0 !important;
  text-align: left !important;
}

You have to use the !important property to override the inherited styles for the class.

This is what you get: