Debut Theme - Image with Text Overlay - Image/Section size

New Member
9 0 0

Hi guys i was wondering if one of you can help. 

As many do im using the Debut theme, i find the layout more than ample for the type of store i have and after tinkerin for a while now i have it mostly the way i want it... i do however have 2 infuriating issues which i cant seem to resolve, ill get to the 2nd in a while.

I want to use the image with text overlay section as a banner image section without text. The problem i'm having is that no matter how much i play with the image size/design in my graphics package i cannot get that section to display the image without it messing around with its size and placement.

Now i understand that you can only have one image for this section ( i would have taken the HTML into something like Dreamweaver and fixed the image placement problem but apparently you can only change the liquid code and i have no desire to become a programmer!) and that the Liquid adjusts for Desktop/Mobile layouts but is there any way to get the liquid to NOT resize the image and or to allow the section to be resized according to the image size? 

I have tried making thin banners and thick banners and the result is always the same, the image gets cropped/stretched which ends up as the image having the image missing the opposite vertical detail to the alignment.

I need to be able to display the whole vertical size of the image, the sides can do what the want for scaling purposes due the the design of the banner but having the section almost hide most of the image past its frame marker is causing me design headaches!!! ideally it would be great if i could have the Liquid adjust the section size to the vertical size of the banner and only cropping the sides since the image is central aligned.

 

Secondly... how do i get rid of that damn "Tax Included" entry on my product pages... i dont even have charge tax ticked on ANY of my items but there it is.. 

 

Many thanks in advance for any help you can give me. i keep on going over and over my design elements while i should be adding products and getting the marketing sorted.

 

Kind Regards

Steve Sealey

 

 

0 Likes
Shopify Staff
Shopify Staff
335 31 79

Hi, Steven!

This is May from Shopify.

Thank you very much for posting your questions here, and the screenshots you provided! I’m sorry to hear that you are frustrated with this image resize issue, and I can see why you would want to display the whole vertical size of the image. I am not an expert in coding myself, but the closest thing I can find to do this is to edit your theme code. Before making any changes to your theme code, I strongly recommend duplicating your theme, to ensure that your customers aren’t affected if you see any unintended results. After you make a duplicate, you can follow the steps below!

  1. From your admin, click on ‘Online Store > Actions > Edit code’.

  2. On the left side, click on ‘Assets’ and select a file called ‘theme.scss.liquid’.

  3. If your banner size is set to ‘Extra small’, in that file, search for ‘hero--x-small’, and locate this block of code

  4. You can adjust the banner height by changing ‘125px’. By editing this dimension, you will be able to show the full vertical size, and the them will automatically scale the sides of the image.

  5. Click ‘Save’.

It is important to note that once you make changes to ‘theme.scss.liquid’, you cannot revert back to older versions. Therefore, it is very important to duplicate your theme before making this change. If this isn't quite what you were after, let me know and we can continue with our support. Our theme support team may also be able to look into this and make the adjustments, since you are using a theme made by Shopify.

As for the ‘Tax Included’ text on your product page, you can remove this tax by adjusting your tax settings. From your admin, you’ll want to go to your ‘Settings > Taxes’ and uncheck the box ‘All taxes are included in my prices’, and click ‘Save’. For more information on charging taxes or tax settings, you can check out our document!

Let me know if this helps. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!

Kind Regards,

May

Shopify Support





 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
9 0 0

Thank you so much for getting in touch with me so quickly regarding my issues. 

Ive found the section of code you suggested changing, now im not saying im a coder by nature, ive picked up enough over the years to piece together a site etc, but... in the code, there seems to be 2 referrences to the "hero sizing code". 

 

There is the bit that you mentioned, which i see does alter the size of the iframe, but there is a section above it which "i think" would alter the way that the code automatically resizes the image based on the chosen xs,s,m,l,xl size of the iframe. if this is the case all of the corresponding sizes are different from eachother in theory no image uploaded to this theme would ever display correctly without both these sections of code being altered. can you confirm this is the case with the upper portion of code?

If i was to alter the size of the upper portion code to match the lower portion i could in theory set whatever image size i like. 

Where is the code section that handles how it is displayed on mobile formats? im guessing there is some size differences between desktop and mobile scaling?

 

also just to clarify... in design mode there are 3 icons above the screen preview, 1 with 2 arrows which i presume is full screen, 1 that looks like computer montor and 1 that is obvisoulsy phone/tablet. As shown in the images i uploaded, the screen layout is different for each of them. i would be eager to have the image displayed the same in all modes. can suggest how to accomplish this, or would those sections of code be enough?

If you need to consult a developer im happy to wait until next week if its going to be a complicated issue.

If you get the impression it is better for your Dev to make the changes on my behalf can you let me know what he needs and to let me know what was done with the code as i would be using the exact same layout with any future stores i decide to launch if this one is a success and would very much like to be able to C&P the code in to correct the banner size.

 

Again, thank you so much for your help.

 

Kind Regards

Steve Sealey

 

0 Likes
New Member
9 0 0

Also, Im having a few issues with the layout of the collection page. 

ive uploaded a screendump to show the problem.

its down too the formatting of the page and the way it handles body text and headers, there is simply too much space between "free delivery on all orders" and the body of text under.. also it keeps defaultig to centred for the body text, i have tried left aligning but it keeps showing as centred.

also i want to get rid of the white frame lines competely, it doesnt suit my design.

returning back to the banner issue, would it be possible (once ive been able to correctly size the image to the frame or vice versa with the Hero code section) to display that section on all pages/collections - i would like to use it as part of the branding where i can periodically change it or even have a dynamic image there like a GIF or something, if thats even possible...

 

0 Likes
Shopify Partner
47 0 2

Hey Steven! Kiersten from Shogun Page Builder here.

I saw that you were having issues with banners and layout, in general. We made this super easy to work with in Shogun. 

If you want to start making changes on your own (without needing to know how to code), you can import your existing Shopify pages into Shogun and start editing them as well as build new pages for your store. 

Give Shogun a free trial for 10 days, and keep all your hard work: https://apps.shopify.com/shogun

Also, let us know if you need anything by emailing us directly at support@getshogun.com

Cheers!
Kiersten

0 Likes
Shopify Staff
Shopify Staff
335 31 79

Hi again, Steven!

That is a great suggestion from Kiersten! Using an app such as Shogun Page Builder is definitely an option here.

No worries, Steven! I am not an expert in coding myself, but you are correct, there are two sections of the hero sizing code.

When I dived deeper into this, it looks like the first half of the code is for sizing the banner on a mobile view, and the second half is for sizing on desktop browsers.

As for the three icons above the screen preview, they are icons for previewing your store in desktop and mobile/tablet version. This default one: is a desktop preview with the sidebar to customize your theme. This icon: is a full screen desktop preview without the sidebar editor. Finally, this icon: is for mobile/tablet preview. Another trick to see what your website looks like on different screen sizes is to adjust your browser’s window size!

You’ve got some great questions that I unfortunately don’t have the answers to. I will send you an email to your email address attached to this forum account. Moving to email means I can gather more info about the specifics on your banner, and also reach out to our theme support team!

Now, let’s check out your collections page! Thanks for providing me with a screenshot. That is quite odd, once you set the text to align to the left, it should stay on the left. However, if that still doesn’t work, you can add a short CSS styling code just for that page. To do this, you’ll want to go to your collections, and on the rich text editor, click on the ‘<>’ icon. Then, on the bottom of the content, paste this code:

<style>
h3 {
  text-align: left !important;
  margin-bottom: 0px !important;
}
h6 {
  margin-top: 10px !important;
}
</style>

The code above will also adjust the spacing between your paragraphs (by editing ‘margin-top’ or ‘margin-bottom’). You can also add a banner to your collections page by uploading a collection image photo, located on the bottom right side of the page.

You can upload your banner there, and you can even upload a GIF! About the white frame lines, you can change this on you theme settings. From your admin, click on ‘Online Store > Customize > Theme Settings > Colors’ and scroll down to ‘Page > Borders and lines’. Changing this color will change all the color of your borders and lines throughout your entire store.

On that note, I will send out an email to you, and if you have any other questions, you can reply back to that email or post it here!

Kind Regards,

May

Shopify Support

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
9 0 0

Ok so ive gone with the advice last given by email and ive used the Custom Content section and ive turned off the image with text overlay section. im now displaying the full height of the image and have now designed an image which will cope with any random resizing.

Also a bit of a wierd one, the text alignment doesnt work under mobile view. Even though i have set the alignment to Centre (which seems to work on desktop view the text is left aligned on mobile view.

I would like to be able to have the headings for those sections centered and left align the body text, also i would like to be able to change the body text size just in those sections as i have a piece of text in a custom section at the bottom of the page where i would like the text as small as possible (a T&C section).

i have posted new pics of how it currently looks so you get an idea of the elements i need changing. (ignore the image elements, its an older screenshot).

If it would be quicker for a Dev to do it on your side im happy for that to take place as ive still not used the 60mins design time that May said i was entitlted to get due to me using a Shopify theme.

Ok not too sure how to correct this one, but hey this why im here.

On a products page where there are variants - is it possiblle to allow the clicking of the variants thumbnail image to select the item to be ordered instead of just changing the large image to save the customer having to select the colour/variant from the dropdown menu like i have seen on other websites. It just feels messy having to click through the variants and THEN having to select the variant off the dropdown list especially when the supplier may have used non user friendly variant descriptions.

 

Kind Regards

 

Steve

 

 

0 Likes
New Member
3 0 0

Hi,

 

Do you know how I make the Header, text and button to go down a bit in the ''image with text overlay section''.

 

Right now it is in the middle of the image on the mobileversion but I need it further down, do you know how?

 

Regards,

Philip

0 Likes